:root,:host{color-scheme:dark;--paper:#0c0c0c;--ink:#f4f2ee;--muted:#999999;--pink:#f4f2ee;--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
*{box-sizing:border-box}:host,body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}header{height:78px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2b2a28;margin:0 2vw}.wordmark{font-size:32px;font-weight:800;letter-spacing:-2px;text-decoration:none}.wordmark span{font-size:12px;vertical-align:top;letter-spacing:0}.edition,.skip,.eyebrow,footer,.hint,.micro,.replay,.companion span{font-family:'IBM Plex Mono',monospace}.edition{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.skip{font-size:11px;text-underline-offset:5px}.intro{min-height:calc(100svh - 126px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 20px 18px}.intro-copy{text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;margin:0 0 12px;color:var(--muted)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#799374;margin-right:6px}h1{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-1.7px;line-height:1.1;margin:0}.mobile-break{display:none}.subtitle{font-size:13px;color:var(--muted);margin:10px 0 0}.pet-space{position:relative;margin:-4px 0 -12px}.pet-space:after{content:"";position:absolute;width:44%;height:12px;bottom:7px;left:28%;background:#81536926;border-radius:50%;filter:blur(9px);z-index:-1}.pet{width:min(370px,48svh,88vw);aspect-ratio:5/6;position:relative;isolation:isolate}.pet>svg{display:block;width:100%;height:100%;overflow:visible}.pet-button{position:absolute;border:0;background:transparent;border-radius:50%;width:13%;height:10.84%;top:78.64%;padding:0;touch-action:manipulation}.pet-button.hello{left:28%}.pet-button.mood{left:43.5%;top:81.56%}.pet-button.heart{left:59%}.pet-button:focus-visible{outline-offset:0;outline-width:2px}.intro-actions{text-align:center}.hint{font-size:10px;color:var(--muted);margin:0 0 18px}.hint span{padding:0 9px;color:#777777}.enter{border:1px solid #2b2a28;border-radius:999px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:35px;padding:13px 24px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.enter:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.enter span{font-size:19px;line-height:15px}.micro{font-size:9px;color:var(--muted);margin:13px 0 0}footer{min-height:48px;padding:15px 4vw;display:flex;justify-content:space-between;gap:16px;font-size:9px;letter-spacing:1.1px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.accessory{opacity:0;transition:opacity 160ms var(--ease-out)}#pixel-portrait{transform-origin:400px 590px;transition:transform 250ms var(--ease-out)}#hand{transform-origin:464px 542px;transition:transform 250ms var(--ease-out),opacity 160ms var(--ease-out)}#love{transition:opacity 160ms var(--ease-out)}.button-inset{opacity:0;transition:opacity 120ms var(--ease-out)}.physical-button.pressed .button-inset{opacity:1;transition-duration:0ms}.pet[data-state="hello"] #hand{opacity:1;transform:rotate(-14deg)}.pet[data-state="hello"] #pixel-portrait{transform:rotate(-3deg)}.pet[data-state="dance"] #pixel-portrait{transform:translateY(-8px) rotate(7deg)}.pet[data-state="coffee"] #cup,.pet[data-state="cool"] #shades,.pet[data-state="love"] #love{opacity:1}.pet[data-state="coffee"] #pixel-portrait{transform:rotate(-4deg)}.pet[data-state="love"] #pixel-portrait{transform:translateY(-7px)}.pet[data-state="dance-alt"] #pixel-portrait{transform:translateY(-4px) rotate(-7deg)}.world{min-height:calc(100svh - 126px);padding:9vh 9vw 7vh}.world h2{font-size:clamp(70px,12vw,170px);font-weight:500;line-height:.88;letter-spacing:-.075em;margin:35px 0 50px}.world h2 em{font-family:Archivo,system-ui,sans-serif;font-weight:400;color:var(--pink)}.world h2:focus{outline:none}.world-bottom{display:flex;align-items:center;gap:50px}.world-bottom p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}.replay{display:block;margin-top:40px;background:none;border:none;padding:8px 0;text-decoration:underline;text-underline-offset:5px;color:var(--muted);font-size:11px}.companion{position:fixed;right:24px;bottom:30px;background:var(--paper);border:1px solid #373133;border-radius:22px;padding:8px 12px;box-shadow:0 8px 35px #58354312}.companion img{display:block}.companion span{font-size:10px}.no-script{text-align:center}[hidden]{display:none!important}
@media(hover:hover) and (pointer:fine){.enter:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}.pet-button:hover{box-shadow:0 0 0 2px #fff8}.skip:hover,.replay:hover{color:var(--pink)}}
@media(max-width:600px){header{height:64px;padding:0 4vw}.edition{display:none}.intro{min-height:calc(100svh - 111px);padding-top:22px}.pet{width:min(370px,49svh,94vw)}h1{font-size:29px;letter-spacing:-1.2px}.subtitle{font-size:12px}.hint{font-size:9px}.hint span{padding:0 6px}.footer-right{display:none}footer{justify-content:center;font-size:8px}.world{padding:70px 7vw 160px;min-height:calc(100svh - 111px)}.world-bottom{align-items:flex-start;flex-direction:column;gap:25px}.companion{right:15px;bottom:15px}.world h2{margin-bottom:35px}.micro{font-size:8px}}
@media(prefers-reduced-motion:reduce){#pixel-portrait,#hand{transition:opacity 160ms var(--ease-out);transform:none!important}.accessory{transition:opacity 160ms var(--ease-out)}}

/* Keep the introduction inside the available screen, including mobile browser chrome. */
:host,body{height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 40px;overflow:hidden}
header{height:64px;min-width:0;flex-shrink:0}
.wordmark{font:500 14px 'IBM Plex Mono',monospace;letter-spacing:-.3px}
main{min-height:0}
.intro{height:100%;min-height:0;padding:0 16px;gap:0}
.pet-space{margin:0 0 2px;flex-shrink:0}
.pet{width:min(430px,calc((100dvh - 240px)/1.2),88vw)}
.intro-actions{flex-shrink:0}
.enter{min-width:164px;min-height:46px}
.hint{margin:0 0 16px}
footer{min-height:0;height:40px;align-items:center;padding:0 4vw}
.world{height:100%;min-height:0;overflow:auto}
@media(max-width:600px){
  .wordmark{font-size:13px}
  .skip{font-size:10px}
  .intro{min-height:0;padding:0 12px}
  .pet{width:min(430px,calc((100dvh - 240px)/1.2),94vw)}
}
@media(max-height:500px){
  :host,body{grid-template-rows:48px minmax(0,1fr) 24px}
  header{height:48px}
  footer{height:24px;font-size:8px}
  .pet{width:min(430px,calc((100dvh - 165px)/1.2),70vw)}
  .micro{display:none}
  .hint{margin-bottom:8px}
  .enter{min-height:36px;padding:9px 25px}
}

#pet-speech{font-family:"IBM Plex Mono",monospace;font-weight:500}
.skip{border-bottom:1px solid transparent;padding-bottom:3px;text-decoration:none;transition:border-color .2s ease}
.skip:focus-visible{border-color:currentColor}
@media(hover:hover) and (pointer:fine){.skip:hover{border-color:currentColor;color:var(--ink)}}

/* A matte, lightly worn backdrop, like a vintage electronics catalog. */
:host,body{
  --paper:#0c0c0c;
  background-color:var(--paper);
  background-image:radial-gradient(ellipse at 50% 44%,rgba(140,140,140,.035) 0%,rgba(90,90,90,.015) 38%,transparent 68%);
  isolation:isolate;
}
:host::before,body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23grain)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.pet-space{isolation:isolate}
.pet-space:after{
  width:54%;
  height:14px;
  left:23%;
  bottom:8px;
  background:rgba(0,0,0,.72);
  filter:blur(11px);
  transform:scaleY(.7);
}

/* Slow grayscale pixel rain, kept away from the character and controls. */
.intro{position:relative;isolation:isolate;container-type:size}
.pixel-rain{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 78%,transparent),linear-gradient(to right,#000,transparent 35%,transparent 65%,#000);
  mask-composite:intersect}
.pixel-rain i{position:absolute;top:0;display:block;background:#aaa;opacity:0;
  animation:pixel-fall 32s linear infinite}
@keyframes pixel-fall{
  0%{transform:translateY(-6px);opacity:0}
  12%{opacity:.18}
  80%{opacity:.18}
  100%{transform:translateY(100cqh);opacity:0}
}
.pixel-rain.paused i{animation-play-state:paused}
@media(max-width:600px){.pixel-rain i:nth-child(even){display:none}}
@media(prefers-reduced-motion:reduce){
  .pixel-rain i{animation:none;transform:translateY(var(--rest-y));opacity:.12}
}

/* A few muted pink pixels echo the shell without competing with it. */
.pixel-rain i:nth-child(6n + 1){background:#c58a9f}

/* Initial focus belongs to the intro, not the primary action. */
.intro:focus{outline:none}

/* A single terminal-style invitation; space is reserved before typing starts. */
.micro.terminal-hint{display:block;margin:0 0 18px;color:#c8c8c8;font-size:11px;line-height:1.5}
.terminal-line{position:relative;display:inline-block;padding-right:1ch;white-space:nowrap}
.terminal-copy{display:inline-block}
.terminal-cursor{position:absolute;left:0;top:0;transform:translateX(35ch)}
.terminal-hint.is-typing .terminal-copy{animation:hint-type 1.5s steps(35,end) .45s both}
.terminal-hint.is-typing .terminal-cursor{animation:hint-caret-travel 1.5s steps(35,end) .45s both,hint-caret-blink 1s steps(1,end) infinite}
@keyframes hint-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hint-caret-travel{from{transform:translateX(0)}to{transform:translateX(35ch)}}
@keyframes hint-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:360px){.micro.terminal-hint{font-size:10px}}
@media(max-height:500px){.micro.terminal-hint{margin-bottom:8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){
  .terminal-hint.is-typing .terminal-copy,.terminal-hint.is-typing .terminal-cursor{animation:none}
}