/* Hatchery — a handheld LCD in a gold shell. */
/* Digits only: Pixelify's 5 reads as an S, so every figure set in the display face takes DM Mono's numerals. */
@font-face{font-family:'Hatch Num';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0030-0039;
  src:url(https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5/files/dm-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Hatch Num';font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0030-0039;
  src:url(https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5/files/dm-mono-latin-500-normal.woff2) format('woff2')}
:root{
  --lcd:#9EA89C; --lcd2:#869186; --hi:#C4C9BF; --gold:#B18211; --olive:#57584D; --ink:#0C1228;
  --gold-hi:#C99A33; --gold-lo:#8A650E; --ink-2:#1C2442;
  --fd:'Hatch Num','Pixelify Sans', ui-monospace, monospace;
  --fb:'DM Mono', ui-monospace, monospace;
  --pad:clamp(10px,1.6vw,22px);
  --rad:clamp(16px,2vw,28px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--gold);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:400 15px/1.55 var(--fb);overflow-x:hidden;
  background:
    radial-gradient(ellipse at 15% -10%, rgba(255,240,200,.28), transparent 45%),
    radial-gradient(rgba(12,18,40,.09) 1px, transparent 1.4px) 0 0/5px 5px,
    var(--gold);}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--olive)}
h1,h2,h3{font-family:var(--fd);font-weight:700;line-height:.95;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.lbl{font:500 11px/1.25 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.big{font:700 clamp(26px,3vw,40px)/1 var(--fd);font-variant-numeric:tabular-nums}
.ghost{text-shadow:3px 3px 0 rgba(12,18,40,.13)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--hi);padding:10px 14px;z-index:200}
.skip:focus{left:10px;top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* shell top */
.top{display:flex;align-items:center;gap:14px;padding:12px var(--pad);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 20px/1 var(--fd);letter-spacing:.08em}
.brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 2px var(--ink);object-fit:cover}
.brand:hover{color:var(--ink)}
.brand:hover img{transform:rotate(-6deg)}
.brand img{transition:transform .2s}
.modes{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none;max-width:100%}
.modes::-webkit-scrollbar{display:none}
.modes a{font:400 15px/1 var(--fd);text-decoration:none;padding:9px 11px;border-radius:8px;white-space:nowrap;color:var(--ink);transition:background .15s,transform .08s}
.modes a:hover{background:var(--gold-hi);color:var(--ink)}
.modes a:active{transform:translateY(2px)}
.modes a[aria-current="page"]{background:var(--ink);color:var(--hi)}
.top-slots{display:flex;gap:6px}
.top-slots a{font:400 13px/1 var(--fd);padding:8px 10px;border-radius:8px;box-shadow:inset 0 0 0 2px var(--ink);text-decoration:none}
@media (max-width:720px){
  .top{gap:8px 10px;padding:10px var(--pad) 6px}
  .modes{order:3;width:100%;margin-left:0;justify-content:space-between}
  .modes a{padding:8px 6px;font-size:13px}
  .brand{font-size:17px}.brand img{width:30px;height:30px;border-radius:8px}
  .top-slots{margin-left:auto}
}

/* the glass */
.lcd{position:relative;background:var(--lcd);border-radius:var(--rad);isolation:isolate;overflow:hidden;
  box-shadow:inset 0 0 0 3px var(--olive), inset 0 12px 26px rgba(12,18,40,.26), 0 2px 0 var(--gold-hi), 0 -2px 0 var(--gold-lo);}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;
  background-image:linear-gradient(rgba(12,18,40,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(12,18,40,.06) 1px,transparent 1px);
  background-size:4px 4px}
.lcd::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;border-radius:inherit;
  background:linear-gradient(128deg, rgba(255,255,255,.16), transparent 34%)}
.wrap{padding:0 var(--pad) var(--pad);display:grid;gap:var(--pad)}
.pane{padding:clamp(20px,3.6vw,52px)}
.pane h2{font-size:clamp(30px,4.4vw,62px)}
.pane > *{position:relative;z-index:2}
.grill{height:14px;margin:2px auto;width:min(220px,50%);background:radial-gradient(circle,var(--gold-lo) 2px,transparent 2.6px) center/11px 11px repeat-x}

/* keys */
.key{appearance:none;border:0;cursor:pointer;font:400 16px/1.05 var(--fd);color:var(--hi);background:var(--ink);padding:12px 16px;border-radius:10px;
  box-shadow:0 4px 0 var(--olive);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:44px;
  transition:transform .08s,box-shadow .08s,background .15s;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.key:hover{background:var(--ink-2);color:var(--hi)}
.key:active,.key.pressed{transform:translateY(3px);box-shadow:0 1px 0 var(--olive)}
.key:disabled{cursor:not-allowed;background:var(--olive);color:var(--hi);box-shadow:none}
.key.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--olive)}
.key.alt:hover{background:var(--hi)}
.key.alt:active{box-shadow:inset 0 0 0 2px var(--ink),0 1px 0 var(--olive)}
.key.gold{background:var(--gold);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 4px 0 var(--gold-lo)}
.key.gold:hover{background:var(--gold-hi)}
.key.sm{font-size:13px;padding:8px 11px;min-height:36px}
.keys{display:flex;flex-wrap:wrap;gap:10px}
.arrow::after{content:"▸";font-family:var(--fd)}

/* bars */
.pbar{height:18px;border:2px solid var(--ink);border-radius:4px;padding:2px;background:var(--lcd);overflow:hidden}
.pbar > i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 8px);transition:width .18s}
.seg{display:flex;gap:3px}
.seg i{flex:1;height:14px;background:var(--lcd2)}
.seg i.on{background:var(--ink)}

/* range */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--ink);border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background:var(--gold);border:3px solid var(--ink);border-radius:5px;transition:transform .1s,background .1s}
input[type=range]:hover::-webkit-slider-thumb{background:var(--gold-hi)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.18)}
input[type=range]::-moz-range-track{height:6px;background:var(--ink);border-radius:3px}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--gold);border:3px solid var(--ink);border-radius:5px}
input[type=range]:focus-visible{outline-offset:1px}

input.field{background:var(--hi);border:2px solid var(--ink);border-radius:10px;padding:10px 12px;min-height:44px;width:100%;font:400 14px var(--fb);transition:box-shadow .12s}
input.field:hover{box-shadow:0 3px 0 var(--olive)}
input.field:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* live & states */
.fresh{font:400 12px/1.4 var(--fb)}
.fresh::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;background:var(--ink);vertical-align:1px}
[data-state="live"] .fresh::before,.fresh[data-state="live"]::before{animation:blink 1.4s steps(1) infinite}
[data-state="saved"] .fresh::before,[data-state="stale"] .fresh::before,
.fresh[data-state="saved"]::before,.fresh[data-state="stale"]::before{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
@keyframes blink{50%{opacity:0}}
.is-loading .val{animation:wait 1s steps(2) infinite}
@keyframes wait{50%{opacity:.35}}
.state{display:flex;gap:16px;align-items:center;padding:14px;border:2px dashed var(--ink);border-radius:14px;background:rgba(196,201,191,.5)}
.state img{width:88px;height:auto;flex:none;border-radius:10px}
.state p{font-size:14px}
.state b{font:700 18px/1.1 var(--fd);display:block;margin-bottom:4px}
.frame{border-radius:16px;overflow:hidden;box-shadow:0 0 0 3px var(--ink), 6px 6px 0 var(--olive);background:var(--hi)}
.frame img{width:100%;height:auto}
.tag-sim{display:inline-flex;gap:6px;align-items:center;font:500 11px/1 var(--fb);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px;border:2px solid var(--ink);border-radius:6px}

/* footer */
.foot{padding:30px var(--pad) 44px;display:grid;gap:16px}
.foot-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.foot-row img{width:52px;height:52px;border-radius:12px;box-shadow:0 0 0 2px var(--ink);object-fit:cover}
.foot .tagline{font:700 clamp(22px,3vw,36px)/1 var(--fd)}
.fine{font-size:12px;max-width:72ch}
.slots{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.slots a{font:400 14px/1 var(--fd);padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 2px var(--ink);text-decoration:none;transition:background .15s}
.slots a:hover{background:var(--gold-hi)}
.ca{display:flex;gap:8px;align-items:center;background:var(--lcd);padding:6px 6px 6px 12px;border-radius:10px;max-width:100%;box-shadow:inset 0 0 0 2px var(--ink)}
.ca code{font:500 12px var(--fb);overflow-wrap:anywhere}
.ca button{appearance:none;border:0;background:var(--ink);color:var(--hi);font:400 13px var(--fd);padding:8px 10px;border-radius:8px;cursor:pointer;transition:transform .08s}
.ca button:hover{background:var(--ink-2)}
.ca button:active{transform:translateY(2px)}

/* waitlist */
.wait{display:grid;gap:10px;max-width:560px}
.wait form{display:flex;gap:10px;flex-wrap:wrap}
.wait form input{flex:1 1 220px}
.wait .note{font-size:12px}

/* mode switch — the overlay met between pages. On arrival it clears in about half a second. */
#modeswitch{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--lcd);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s}
#modeswitch::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(12,18,40,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(12,18,40,.06) 1px,transparent 1px);background-size:4px 4px}
#modeswitch.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .12s ease}
#modeswitch.boot{animation:msout .18s ease .42s forwards;pointer-events:none}
@keyframes msout{to{opacity:0;visibility:hidden}}
.ms-in{display:grid;gap:14px;justify-items:start;padding:24px;width:min(600px,90vw)}
.ms-dest{font:700 clamp(40px,9vw,104px)/.9 var(--fd);text-shadow:4px 4px 0 rgba(12,18,40,.13)}
.ms-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}
.ms-bar i{height:18px;background:var(--lcd2)}
#modeswitch.boot .ms-bar i{animation:seg .1s steps(1) forwards;animation-delay:calc(var(--i) * 30ms)}
#modeswitch.going .ms-bar i{animation:seg .1s steps(1) forwards;animation-delay:calc(var(--i) * 28ms)}
@keyframes seg{to{background:var(--ink)}}
.ms-voice{font:400 14px var(--fb)}

/* scene stage: a still frame drawn in SVG, taken over by three.js */
.stage{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;z-index:1}
.stage:active{cursor:grabbing}
.stage .still{position:absolute;left:var(--fx,50%);top:var(--fy,50%);height:var(--fh,60%);width:auto;max-width:none;transform:translate(-50%,-50%);transition:opacity .5s;shape-rendering:crispEdges}
.stage.live3d .still{opacity:0}
.scene-canvas{position:absolute;inset:0;width:100% !important;height:100% !important;image-rendering:pixelated;display:block}
@media (prefers-reduced-motion:no-preference){
  .stage:not(.live3d) .still{animation:still-beat 2s ease-in-out infinite}
  @keyframes still-beat{0%,100%{transform:translate(-50%,-50%) scale(1)}10%{transform:translate(-50%,-50%) scale(1.03)}}
  .rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  #modeswitch.boot{animation:none;opacity:0;visibility:hidden}
}