:root{
  --b-key-y:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%232A1A14'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFC93C'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='0' y='10' width='2' height='6' fill='%232A1A14'/%3E%3Crect x='2' y='10' width='8' height='6' fill='%23E39A12'/%3E%3Crect x='10' y='10' width='2' height='6' fill='%232A1A14'/%3E%3Crect x='2' y='16' width='8' height='2' fill='%232A1A14'/%3E%3C/svg%3E");
  --b-key-y-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%232A1A14'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFC93C'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='10' width='8' height='2' fill='%232A1A14'/%3E%3C/svg%3E");
  --b-key-s:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%23E5452F'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%23E5452F'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFF1D6'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%23E5452F'/%3E%3Crect x='0' y='10' width='2' height='6' fill='%23E5452F'/%3E%3Crect x='2' y='10' width='8' height='6' fill='%238E2A1C'/%3E%3Crect x='10' y='10' width='2' height='6' fill='%23E5452F'/%3E%3Crect x='2' y='16' width='8' height='2' fill='%23E5452F'/%3E%3C/svg%3E");
  --b-key-s-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%23E5452F'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%23E5452F'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFF1D6'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%23E5452F'/%3E%3Crect x='2' y='10' width='8' height='2' fill='%23E5452F'/%3E%3C/svg%3E");
  --b-key-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%232A1A14'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFF1D6'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='0' y='10' width='2' height='6' fill='%232A1A14'/%3E%3Crect x='2' y='10' width='8' height='6' fill='%232A1A14'/%3E%3Crect x='10' y='10' width='2' height='6' fill='%232A1A14'/%3E%3Crect x='2' y='16' width='8' height='2' fill='%232A1A14'/%3E%3C/svg%3E");
  --b-key-i-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%232A1A14'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFF1D6'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='10' width='8' height='2' fill='%232A1A14'/%3E%3C/svg%3E");
  --b-key-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='18' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%23D9C7A6'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%23D9C7A6'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23F7DDB0'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%23D9C7A6'/%3E%3Crect x='0' y='10' width='2' height='6' fill='%23D9C7A6'/%3E%3Crect x='2' y='10' width='8' height='6' fill='%23D9C7A6'/%3E%3Crect x='10' y='10' width='2' height='6' fill='%23D9C7A6'/%3E%3Crect x='2' y='16' width='8' height='2' fill='%23D9C7A6'/%3E%3C/svg%3E");
  --b-pan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%232A1A14'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23FFF1D6'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='0' y='10' width='2' height='4' fill='%232A1A14'/%3E%3Crect x='2' y='10' width='8' height='4' fill='%23D9C7A6'/%3E%3Crect x='10' y='10' width='2' height='4' fill='%232A1A14'/%3E%3Crect x='2' y='14' width='8' height='2' fill='%232A1A14'/%3E%3C/svg%3E");
  --b-pan-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%232A1A14'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%23F7DDB0'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%232A1A14'/%3E%3Crect x='0' y='10' width='2' height='4' fill='%232A1A14'/%3E%3Crect x='2' y='10' width='8' height='4' fill='%23D9C7A6'/%3E%3Crect x='10' y='10' width='2' height='4' fill='%232A1A14'/%3E%3Crect x='2' y='14' width='8' height='2' fill='%232A1A14'/%3E%3C/svg%3E");
  --b-pan-n:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='16' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='8' height='2' fill='%23FFF1D6'/%3E%3Crect x='0' y='2' width='2' height='8' fill='%23FFF1D6'/%3E%3Crect x='2' y='2' width='8' height='8' fill='%2324203A'/%3E%3Crect x='10' y='2' width='2' height='8' fill='%23FFF1D6'/%3E%3Crect x='0' y='10' width='2' height='4' fill='%23FFF1D6'/%3E%3Crect x='2' y='10' width='8' height='4' fill='%2347406E'/%3E%3Crect x='10' y='10' width='2' height='4' fill='%23FFF1D6'/%3E%3Crect x='2' y='14' width='8' height='2' fill='%23FFF1D6'/%3E%3C/svg%3E");
}
/* Henpad: a 1997 colour-LCD toy on its cream blister card. Keys and panels are 9-slice pixel art (above).
   Pixelify = names/titles/buttons, Tiny5 = labels, Gabarito = reading, Azeret Mono = every number. */
:root{
  --paper:#FFF1D6;--paper-2:#F7DDB0;--sand:#D9C7A6;--ink:#2A1A14;--ink-2:#5B463C;
  --shell:#E5452F;--shell-lt:#FF7A5C;--shell-dk:#A32A1E;--red-dk:#8E2A1C;
  --yolk:#FFC93C;--gold-dk:#E39A12;--gold-lt:#FFE27A;
  --sky:#9ED8EE;--white:#F4FBF8;--grass:#86C35A;--grass-dk:#3E7F45;--wood:#C4874A;--wood-dk:#9A5E33;--wood-dk2:#6F4626;
  --night:#24203A;--night-2:#47406E;--night-3:#8C7FC7;--glass:#C9DDB4;--glass-dk:#93AE88;
  --fp:"Pixelify Sans",ui-monospace,monospace;--ft:"Tiny5",ui-monospace,monospace;--fb:"Gabarito",system-ui,sans-serif;--fm:"Azeret Mono",ui-monospace,monospace;
  --maxw:1240px;--gut:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;scroll-padding-top:120px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.5 var(--fb);min-height:100vh;overflow-x:hidden}
img,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--shell);outline-offset:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font:16px var(--ft)}
.skip:focus{top:8px}
.num,.mono{font-family:var(--fm);font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-.01em}
.lab{font:400 16px/1.2 var(--ft);text-transform:uppercase;letter-spacing:.04em;-webkit-font-smoothing:none;font-smooth:never}
.dim{opacity:.62}
.sp{flex:1}
.h2{font:700 56px/1 var(--fp);letter-spacing:.01em}
.ptitle{font:700 56px/1.02 var(--fp);margin-top:6px}
.eyebrow{color:var(--shell)}
.lede{font-size:19px;max-width:62ch;margin-top:14px;color:var(--ink-2)}
.px{image-rendering:pixelated}

/* ---------------------------------------------------------------- keys (rubber toy keys, 9-slice) */
.k,.btn,.seg button{--bi:var(--b-key-s);--bia:var(--b-key-s-a);display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;
  min-height:56px;padding:0 18px;border-style:solid;border-width:4px 4px 10px;border-color:transparent;border-image-source:var(--bi);border-image-slice:4 4 10 4 fill;border-image-width:4px 4px 10px 4px;
  font:700 22px/1 var(--fp);color:var(--shell);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.k:hover,.btn:hover{transform:translateY(-2px)}
.k:active,.btn:active,.k.busy,.btn.busy{border-image-source:var(--bia);transform:translateY(6px)}
.k-y,.btn.p{--bi:var(--b-key-y);--bia:var(--b-key-y-a);color:var(--ink)}
.k-x{--bi:var(--b-key-i);--bia:var(--b-key-i-a);color:var(--ink);padding:0 14px}
.k-x svg{width:20px;height:20px}
.k-s,.btn.sm,.seg button{min-height:46px;padding:0 13px;font-size:17px}
.k-s.k-x{padding:0 11px}
.k-s.k-x svg{width:17px;height:17px}
.k[disabled],.btn[disabled],.k[aria-disabled=true]{--bi:var(--b-key-d);--bia:var(--b-key-d);color:rgba(42,26,20,.4);cursor:not-allowed;transform:none}
.btn.busy::before,.k.busy::before{content:"";width:20px;height:20px;background:url(/assets/px/eggs-native.png) 0 0/120px 20px;image-rendering:pixelated;animation:wob .3s steps(1) infinite}
@keyframes wob{0%{transform:translateX(-1px)}50%{transform:translateX(1px)}}
.btn.ghost{--bi:var(--b-key-i);--bia:var(--b-key-i-a);color:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{font-family:var(--fm);font-weight:600;font-size:15px}
.seg button[aria-pressed=true]{--bi:var(--b-key-y-a);color:var(--ink);transform:translateY(6px)}

/* CA chip: label + Azeret address + small copy key */
.ca{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 4px 0 12px;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);white-space:nowrap}
.ca b{font:400 16px var(--ft);-webkit-font-smoothing:none}
.ca .mono{font-size:14px}
.ca button{display:inline-grid;place-items:center;width:38px;height:38px;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--ink)}
.ca button:hover{background:var(--yolk)}
.ca button:disabled{opacity:.45;cursor:not-allowed}
.ca .cl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cpg{width:18px;height:18px;background:
  linear-gradient(var(--ink),var(--ink)) 0 0/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/2px 14px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 12px/6px 2px no-repeat,
  linear-gradient(var(--ink),var(--ink)) 6px 4px/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 6px 4px/2px 14px no-repeat,linear-gradient(var(--ink),var(--ink)) 16px 4px/2px 14px no-repeat,linear-gradient(var(--ink),var(--ink)) 6px 16px/12px 2px no-repeat}
.ca.copied .cpg{background:url(/assets/px/eggs-native.png) 0 0/108px 18px;image-rendering:pixelated}
.ca.cerr button{background:var(--shell-lt)}
.ca.sm{height:40px}
.ca.sm button{width:32px;height:32px}
.carow{display:inline-flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.lk{font-weight:600;color:var(--shell);text-underline-offset:3px}

/* sprite helpers (sheet backgrounds, pixelated) */
.egg-s{--e:2;display:inline-block;flex:none;width:calc(20px*var(--e));height:calc(20px*var(--e));background:url(/assets/px/eggs-native.png) 0 0/calc(120px*var(--e)) calc(20px*var(--e));image-rendering:pixelated;vertical-align:middle}
.egg-s.g{background-position:calc(-20px*var(--e)) 0}
.egg-s.spark{animation:spark .6s steps(1) infinite}
@keyframes spark{0%{background-position:calc(-20px*var(--e)) 0}50%{background-position:calc(-40px*var(--e)) 0}}
.ico-s{display:inline-block;flex:none;width:24px;height:24px;background:url(/assets/px/icons-native.png) 0 0/192px 24px;image-rendering:pixelated;vertical-align:middle}
.ico-sun{background-position:0 0}.ico-moon{background-position:-24px 0}.ico-camera{background-position:-48px 0}.ico-scale{background-position:-72px 0}
.ico-egg{background-position:-96px 0}.ico-basket{background-position:-120px 0}.ico-sack{background-position:-144px 0}.ico-star{background-position:-168px 0}

/* ---------------------------------------------------------------- header */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;min-height:72px;padding:8px max(var(--gut),calc((100vw - 1400px)/2));background:var(--paper);box-shadow:0 2px 0 var(--ink)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 26px/1 var(--fp);color:var(--ink)}
.brand img{width:27px;height:32px;image-rendering:pixelated}
.links{display:flex;gap:4px;margin-left:12px}
.links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;text-decoration:none;font:400 16px var(--ft);-webkit-font-smoothing:none}
.links a:hover,.links a[aria-current]{background:var(--paper-2);box-shadow:inset 0 -3px 0 var(--shell)}
.nav-r{display:flex;align-items:center;gap:8px}
.nav-r .k-s{min-height:46px}
.menu-b{display:none;width:46px;height:46px;flex-direction:column;justify-content:center;align-items:center;gap:5px;box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper)}
.menu-b i{display:block;width:20px;height:3px;background:var(--ink)}
.drawer{position:fixed;inset:0;z-index:60;background:var(--paper);display:flex;flex-direction:column;gap:4px;padding:84px 24px 24px;overflow:auto}
.drawer a{font:700 32px/1.2 var(--fp);text-decoration:none;padding:8px 0;border-bottom:2px dashed var(--sand)}
.dlg-x{position:absolute;right:16px;top:16px;width:48px;height:48px;font:700 30px/1 var(--fp);box-shadow:inset 0 0 0 2px var(--ink);background:var(--paper)}
@media (max-width:1180px){.links{display:none}.menu-b{display:flex}}
@media (max-width:900px){
  .nav{flex-wrap:wrap;gap:8px 8px;padding-top:8px;padding-bottom:10px}
  .nav .sp{display:none}
  .brand{margin-right:auto}
  .nav-r{order:3;width:100%;justify-content:space-between;gap:6px}
  .nav-r .wal{position:absolute;right:66px;top:10px}
  .nav-r .ca{flex:1 1 auto;min-width:0}
  .nav-r .ca .mono{overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:560px){
  .nav-r .k-s{padding:0 9px;font-size:15px}
  .nav-r .ca{padding-left:8px;gap:6px}
  .nav-r .ca .mono{font-size:12px}
}
@media (max-width:360px){.nav-r .ca .mono{display:none}.brand span{font-size:22px}}

/* ---------------------------------------------------------------- hero: the toy */
.hero{display:grid;justify-items:center;padding:18px var(--gut) 56px;background:var(--paper);position:relative}
.hero-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:44px;width:100%;max-width:1300px}
.tag{display:grid;gap:6px;padding:16px 18px 14px;border-style:solid;border-width:4px 4px 8px;border-color:transparent;border-image:var(--b-pan) 4 4 8 4 fill/4px 4px 8px 4px;min-width:250px}
.tag-l{justify-self:end;text-align:right}
.tag-r{justify-self:start}
.tag .big{font-size:30px;font-weight:600;line-height:1.1}
.tag .lab.dim{font-size:12px}
.clock{display:flex;font-size:46px;font-weight:700;line-height:1.05;justify-content:flex-end}
.clock i{font-style:normal;display:inline-block}
.clock i.st{animation:st .16s steps(1)}
@keyframes st{0%{transform:translateY(-4px)}50%{transform:translateY(-2px)}}
.toy{--d:6px;--d:clamp(2px,round(down,min(min(100vw - 32px,760px)/82,max(270px,100vh - 330px)/90),1px),10px);--p:calc(var(--d)/3);position:relative;width:calc(var(--d)*82);height:calc(var(--d)*90);flex:none}
.toy .lcd{position:absolute;left:calc(var(--d)*17);top:calc(var(--d)*33);width:calc(var(--d)*49);height:calc(var(--d)*28);image-rendering:pixelated;background:url(/assets/px/lcd-day-native.png) 0 0/100% 100%;image-rendering:pixelated}
.toy .shell{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(calc(var(--d)*2) calc(var(--d)*2) 0 var(--sand))}
.hud{position:absolute;left:calc(var(--d)*17);top:calc(var(--d)*33);width:calc(var(--d)*49);height:calc(var(--d)*28);pointer-events:none;overflow:hidden}
.hud .t{position:absolute;left:calc(var(--p)*var(--x));top:calc(var(--p)*var(--y));font:400 calc(var(--p)*8)/1 var(--ft);color:var(--ink);white-space:nowrap;-webkit-font-smoothing:none}
.hud .t.n{font:600 calc(var(--p)*7)/1 var(--fm);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hud .t.big{font-size:calc(var(--p)*12);font-weight:700}
.hud .t.sm{font-size:calc(var(--p)*5.5)}
.hud .t.dim{opacity:.6}
.hud .t.inv{background:var(--ink);color:var(--glass);padding:calc(var(--p)*1) calc(var(--p)*2)}
.hud .t.tk,.hud .t.ck{background:var(--glass);padding:calc(var(--p)*1.5) calc(var(--p)*2) calc(var(--p)*.5);box-shadow:0 0 0 calc(var(--p)*1) var(--ink)}
.hud .pips{position:absolute;left:calc(var(--p)*var(--x));top:calc(var(--p)*var(--y));display:flex;gap:calc(var(--p)*3);background:var(--glass);padding:calc(var(--p)*1);box-shadow:0 0 0 calc(var(--p)*1) var(--ink)}
.hud .pips i{display:grid;place-items:center;width:calc(var(--p)*6);height:calc(var(--p)*6);box-shadow:inset 0 0 0 calc(var(--p)*1) var(--ink);font:400 calc(var(--p)*6)/1 var(--ft);font-style:normal;color:var(--ink)}
.hud .pips i.on{background:var(--ink)}
.hud .pips i.q{box-shadow:none}
.demo{position:absolute;left:calc(var(--d)*17 + var(--p)*3);top:calc(var(--d)*61 - var(--p)*3 - 26px);font:400 16px/1 var(--ft);background:var(--ink);color:var(--paper);padding:5px 7px 4px;-webkit-font-smoothing:none;z-index:2}
.keys .key{--kx:22;--ky:68;--kw:9;position:absolute;left:calc(var(--d)*(var(--kx) + var(--kw)/2));top:calc(var(--d)*(var(--ky) + var(--kw)/2));width:max(46px,calc(var(--d)*var(--kw)));height:max(46px,calc(var(--d)*var(--kw)));transform:translate(-50%,-50%);border-radius:50%;z-index:3;-webkit-tap-highlight-color:transparent}
.keys .key-b{--kx:37;--ky:69;--kw:8}
.keys .key-c{--kx:51}
.keys .key i{position:absolute;left:50%;top:50%;width:calc(var(--d)*var(--kw));height:calc(var(--d)*var(--kw));transform:translate(-50%,-50%);background:url(/assets/px/device-hero-native.png) calc(var(--d)*var(--kx)*-1) calc(var(--d)*(var(--ky) - 1)*-1)/calc(var(--d)*82) calc(var(--d)*90);image-rendering:pixelated;visibility:hidden}
.keys .key.dn i,.keys .key:active i{visibility:visible}
.keys .key:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hero-txt{display:grid;justify-items:center;text-align:center;margin-top:10px}
.name{font:700 112px/.92 var(--fp);letter-spacing:.01em;color:var(--ink)}
.name .r{color:var(--shell)}
.line{font-size:21px;line-height:1.35;max-width:46ch;margin-top:10px;color:var(--ink-2)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:18px}
.hint{margin-top:16px;font-size:12px;color:var(--ink-2)}
.kb{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;box-shadow:inset 0 0 0 2px var(--ink-2);font:600 13px var(--fm)}
@media (max-width:1100px){.hero-row{gap:20px}.tag{min-width:200px}.clock{font-size:36px}}
@media (max-width:899px){
  .hero{display:flex;flex-direction:column;align-items:center;padding-top:14px}
  .hero-row{display:contents}
  .tag-l{order:0;justify-self:auto;text-align:center;min-width:0;margin-bottom:14px;grid-template-columns:auto auto;align-items:center;gap:4px 14px;padding:10px 14px 8px}
  .tag-l .lab.dim{display:none}
  .clock{font-size:30px;justify-content:center}
  .toy{order:1;--d:clamp(2px,round(down,min(100vw - 32px,760px)/82,1px),10px)}
  .hero-txt{order:2}
  .tag-r{order:3;justify-self:auto;margin-top:22px;grid-template-columns:auto auto;gap:4px 14px;align-items:baseline;min-width:0}
  .tag .big{font-size:20px}
  .name{font-size:64px}
  .line{font-size:18px}
  .hint{display:none}
}
@media (max-width:360px){.name{font-size:54px}}

/* ---------------------------------------------------------------- scenes */
.sc{position:relative;padding:104px var(--gut) 112px;overflow:hidden}
.sh{position:relative;z-index:1;max-width:860px;margin:0 auto 44px;text-align:center}
.sh .lab{display:table;margin-left:auto;margin-right:auto;background:var(--ink);color:var(--paper);padding:6px 8px 5px;margin-bottom:16px}
.sh p{max-width:58ch;margin:16px auto 0;font-size:19px}
.stage-w{position:relative;z-index:1;display:grid;justify-items:center;gap:18px;max-width:1100px;margin:0 auto}
.stage{--s:4;--w:119;--h:90;position:relative;flex:none;border:calc(var(--s)*4px) solid var(--paper);box-shadow:0 0 0 2px var(--ink),calc(var(--s)*3px) calc(var(--s)*3px) 0 2px var(--sh,rgba(42,26,20,.22))}
.stage canvas{width:calc(var(--s)*var(--w)*1px);height:calc(var(--s)*var(--h)*1px);image-rendering:pixelated}
.stage .ovl{position:absolute;inset:0;pointer-events:none}
.say{position:absolute;left:calc(var(--s)*var(--x)*1px);top:calc(var(--s)*var(--y)*1px);font:400 max(12px,calc(var(--s)*4px))/1 var(--ft);background:var(--ink);color:var(--paper);padding:3px 5px 2px;white-space:nowrap;-webkit-font-smoothing:none}
.say.n{font-family:var(--fm);font-weight:600;font-size:max(11px,calc(var(--s)*3px))}
#yard{--w:119;--h:90}
#pick{--w:168;--h:90}
#gnight{--w:112;--h:84}

.s-hold{background:var(--sky);padding-bottom:0}
.s-hold .stage{--sh:var(--grass-dk)}
.s-hold .grass{position:relative;height:120px;margin:-60px calc(var(--gut)*-1) 0;background:var(--grass);box-shadow:inset 0 6px 0 var(--grass-dk)}
.daybar{position:relative;width:calc(var(--sw,600px));max-width:100%;padding:26px 0 0;margin-top:30px;margin-bottom:84px}
.daybar .track{position:relative;height:6px;background:var(--ink)}
.daybar .cur{position:absolute;top:-8px;left:calc(var(--p,0)*100%);width:6px;height:22px;margin-left:-3px;background:var(--shell);box-shadow:0 0 0 2px var(--ink)}
.daybar .pips{position:absolute;left:0;right:0;top:0;height:0}
.pip{position:absolute;left:calc(var(--p)*100%);top:-12px;transform:translateX(-50%);display:grid;justify-items:center;gap:2px}
.pip .ico-s{filter:grayscale(1) opacity(.5)}
.pip.shot .ico-s,.pip.open .ico-s{filter:none}
.pip b{font:400 16px/1 var(--ft);position:absolute;top:-18px}
.daybar .ends{display:flex;justify-content:space-between;margin-top:14px;font-size:14px}

.s-egg{background:var(--paper-2)}
.s-egg .stage{--sh:var(--gold-dk)}
.realday{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;max-width:880px;text-align:center;font-size:14px}
.realday a{font-family:var(--fm);font-size:14px;color:var(--ink);text-decoration-color:var(--shell);text-underline-offset:3px}
.realday .num{font-size:14px}
.pill{font:400 14px/1 var(--ft);background:var(--ink);color:var(--paper);padding:4px 6px 3px}
.pill.g{background:var(--yolk);color:var(--ink)}

.s-gold{background:var(--night);color:var(--paper)}
.s-gold .stars{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.s-gold .sh .lab{background:var(--yolk);color:var(--ink)}
.s-gold .stage{--sh:var(--night-2);border-color:var(--paper)}
.gold-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;max-width:1160px;margin:0 auto}
.gold-side{display:grid;gap:30px;max-width:520px}
.seven{display:flex;flex-wrap:wrap;gap:10px}
.seven .slot{display:block}
.seven .egg-s{--e:3}
.seven .egg-s.g{background-position:0 0;animation:none}
.seven.in .slot{animation:hop .36s steps(3) both;animation-delay:calc(var(--i)*.22s)}
.seven.in .egg-s.g{animation:goldon 0s steps(1) forwards,spark .6s steps(1) infinite;animation-delay:calc(var(--n,7)*.22s + .2s),calc(var(--n,7)*.22s + .2s)}
@keyframes hop{0%{transform:translateY(0)}33%{transform:translateY(-12px)}66%{transform:translateY(-6px)}100%{transform:none}}
@keyframes goldon{to{background-position:calc(-20px*var(--e)) 0}}
.gnums{display:grid;grid-template-columns:repeat(3,auto);gap:10px 28px;justify-content:start}
.gnums div{display:flex;flex-direction:column-reverse;gap:6px}
.gnums dd{font:700 44px/1 var(--fm);color:var(--yolk)}
.gnums dt{color:var(--paper);font-size:14px}
.goldlist ul{list-style:none;display:grid;gap:8px;margin-top:10px}
.goldlist li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.goldlist li a{color:var(--paper);font-weight:600}
.goldlist .num{font-size:15px}
.goldlist .none{color:var(--paper);opacity:.75}

.s-coop{background:var(--paper) url(/assets/px/tile-eggs-native.png) 0 0/128px 128px;image-rendering:pixelated}
.s-coop .sh p,.s-coop .sh .h2{background:var(--paper);display:inline-block;padding:2px 10px}
.lids{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:40px 28px;max-width:1240px;margin:0 auto;image-rendering:auto}
.lidc{display:flex;flex-direction:column;align-items:center;gap:0;color:var(--ink);text-decoration:none}
.lids.in .lidc{animation:drop .27s steps(3) both;animation-delay:calc(var(--i,0)*.08s)}
@keyframes drop{0%{transform:translateY(-18px)}34%{transform:translateY(-10px)}67%{transform:translateY(-3px)}100%{transform:none}}
.ft{--fd:3;position:relative;display:block;width:calc(var(--fd)*47px);height:calc(var(--fd)*63px);flex:none}
.ft canvas{position:absolute;left:calc(var(--fd)*13px);top:calc(var(--fd)*24px);width:calc(var(--fd)*21px);height:calc(var(--fd)*17px);image-rendering:pixelated;background:var(--glass)}
.ft img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(calc(var(--fd)*2px) calc(var(--fd)*2px) 0 rgba(42,26,20,.2))}
.lidc:hover .ft,.lidc:focus-visible .ft{transform:translateY(-6px)}
.tagc{display:grid;gap:8px;width:100%;margin-top:-6px;padding:16px 16px 12px;border-style:solid;border-width:4px 4px 8px;border-color:transparent;border-image:var(--b-pan) 4 4 8 4 fill/4px 4px 8px 4px}
.ln{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ln b{font:700 22px/1.1 var(--fp);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ln .tk{font:400 14px var(--ft);color:var(--shell)}
.lv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lv>span{display:grid;gap:3px}
.lv .lab{font-size:11px;color:var(--ink-2)}
.lv .num{font-size:16px;font-weight:600}
.nx{font-size:12px;color:var(--ink-2)}
.nx .num{font-size:13px;color:var(--ink)}
.lidc.inv .tagc{border-image-source:var(--b-pan-2)}
.lidc.inv .k{margin-top:6px;justify-self:start}
.lidc.inv.solo{grid-column:1/-1;max-width:420px;justify-self:center}

/* ---------------------------------------------------------------- ending: the box back */
.ending{position:relative;background:var(--shell);color:var(--paper);padding:110px var(--gut) 48px;overflow:hidden}
.pt{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--s)*69px);height:calc(var(--s)*92px);z-index:0}
.pt i{position:absolute;left:calc(var(--s)*18px);top:calc(var(--s)*31px);width:calc(var(--s)*32px);height:calc(var(--s)*29px);background:var(--glass)}
.pt img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(calc(var(--s)*3px) calc(var(--s)*3px) 0 var(--red-dk))}
.end-in{position:relative;z-index:1;max-width:720px;margin:0 auto;display:grid;justify-items:center;text-align:center;gap:26px}
.ending .h2{font-size:72px;color:var(--paper)}
.steps{list-style:none;display:grid;gap:14px;text-align:left;font-size:19px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:baseline}
.steps .num{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;background:var(--yolk);color:var(--ink);font-weight:700;font-size:20px;box-shadow:inset 0 0 0 2px var(--ink)}
.steps b{font:700 24px/1.1 var(--fp)}
.end-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.ending .ca{color:var(--ink)}
.ending .fine,.foot .fine{font-size:14px}
.ending .fine a{color:var(--paper)}
@media (max-width:899px){.pile .p1,.pile .p3,.pile .p4{display:none}.pt{--s:2!important}.pile .p0{left:-30px;top:20px}.pile .p2{left:auto;right:-40px;top:auto;bottom:40px}.ending .h2{font-size:48px}}

/* ---------------------------------------------------------------- footer (inner pages) */
.foot{background:var(--shell);color:var(--paper);margin-top:96px;padding:28px var(--gut) 22px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;max-width:var(--maxw);margin:0 auto}
.foot .brand{color:var(--paper)}
.foot nav{display:flex;gap:6px;flex-wrap:wrap}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:400 16px var(--ft);text-decoration:none}
.foot nav a:hover{background:var(--red-dk)}
.foot .ca{color:var(--ink)}
.foot .fine{max-width:var(--maxw);margin:14px auto 0}
.foot .fine a{color:var(--paper)}

/* ---------------------------------------------------------------- inner pages */
.inner main{max-width:var(--maxw);margin:0 auto;padding:44px var(--gut) 0}
.card{display:block;padding:22px 22px 18px;border-style:solid;border-width:4px 4px 8px;border-color:transparent;border-image:var(--b-pan) 4 4 8 4 fill/4px 4px 8px 4px;min-width:0}
.card h3,.h3{display:flex;align-items:center;gap:10px;font:400 18px/1.2 var(--ft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;-webkit-font-smoothing:none}
.mt{margin-top:26px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:baseline}
.kv dt{color:var(--ink-2);font-size:15px}
.kv dd{text-align:right;font-weight:600}
.kv dd.num{font-size:15px}
.field{display:grid;gap:6px;margin-top:16px}
.field>span{font:400 15px var(--ft);text-transform:uppercase;-webkit-font-smoothing:none}
.field input,.field textarea,.field select{width:100%;min-height:48px;padding:10px 12px;background:var(--white);border:0;box-shadow:inset 0 0 0 2px var(--ink);font-size:17px;border-radius:0}
.field input[inputmode=decimal]{font-family:var(--fm);font-variant-numeric:tabular-nums}
.field input:focus,.field textarea:focus{outline:3px solid var(--shell);outline-offset:2px}
.field textarea{min-height:96px;resize:vertical}
.field input[type=file]{padding:10px}
.field small{font-size:14px;color:var(--ink-2)}
.note{font-size:14px;color:var(--ink-2);margin-top:12px}
.dim{color:inherit}
.cointop{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.cointop h1{font:700 56px/1 var(--fp)}
.cointop .mono{font-size:15px;margin-top:8px;color:var(--ink-2)}
.ft.big{--fd:3}
.cnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:26px}
.cnums>div{display:grid;gap:6px;padding:14px 16px 10px;border-style:solid;border-width:4px 4px 8px;border-color:transparent;border-image:var(--b-pan-2) 4 4 8 4 fill/4px 4px 8px 4px}
.cnums .num{font-size:24px;font-weight:600}
.coin-tray{margin-top:28px}
.tray{position:relative;padding:14px;background:var(--wood);box-shadow:inset 0 0 0 2px var(--ink),inset 0 -8px 0 var(--wood-dk2)}
.cups{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.cup{position:relative;display:grid;place-items:center;aspect-ratio:1;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--wood-dk2),inset 0 -6px 0 var(--sand);min-width:0}
.cup.laid{cursor:pointer}
.cup.laid .egg-s{--e:2;margin-top:-12px}
.cup.laid:hover .egg-s,.cup.up .egg-s{transform:translateY(-4px)}
.cup.drop .egg-s{animation:drop .3s steps(3)}
.stamp{position:absolute;left:4px;right:4px;bottom:6px;display:flex;justify-content:space-between;font:500 11px/1 var(--fm);color:var(--ink);pointer-events:none}
.stamp .sl{font-family:var(--ft);font-weight:400}
.stamp .sw{display:none}
.stamp.g .sa{color:var(--shell-dk)}
.cup.today{background:var(--yolk);box-shadow:inset 0 0 0 2px var(--ink),inset 0 -6px 0 var(--gold-dk)}
.ringc{display:grid;justify-items:center;gap:2px;text-align:center}
.ringc .lab{font-size:10px}
.ringc .num{font-size:12px;font-weight:600}
.cup.past .nd{font:400 12px var(--ft);opacity:.55}
.lidcard{position:absolute;z-index:5;width:270px;padding:16px 18px 12px;border-style:solid;border-width:4px 4px 8px;border-color:transparent;border-image:var(--b-pan) 4 4 8 4 fill/4px 4px 8px 4px;display:grid;gap:6px;font-size:15px}
.lidcard .big{font-size:26px;font-weight:700}
.lidcard a{color:var(--shell)}
.lidcard .cx{position:absolute;right:6px;top:4px;width:36px;height:36px;font:700 22px var(--fp)}
.pager{display:flex;align-items:center;gap:12px;margin-top:18px}
.pager .lab{margin-right:auto}
.hist{list-style:none;display:grid}
.hist li{display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:2px dashed var(--sand);font-size:15px}
.hist li .egg-s{--e:1.5;margin-right:8px}
.hist .num{font-weight:600}
.hist a{color:var(--ink);text-decoration-color:var(--shell)}
.hist li.empty{display:block;border:0;color:var(--ink-2)}
.trade .tabs{margin-bottom:6px}
.trade #t-go{margin-top:14px}
.waitbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:28px}
.waitbar .num{font-size:36px;font-weight:700}
.mgo{margin-top:22px}
.lpv{display:grid;justify-items:center;gap:10px;margin-top:30px}
.lpv .ft{--fd:4}
.statline{font:700 40px/1.15 var(--fp);margin-top:20px;max-width:24ch}
.statline .num{font-weight:700;color:var(--shell)}
.tblw{overflow-x:auto;margin-top:8px;box-shadow:inset 0 0 0 2px var(--ink);background:var(--white)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{font:400 14px var(--ft);text-transform:uppercase;text-align:left;padding:12px;background:var(--ink);color:var(--paper)}
.tbl td{padding:10px 12px;border-top:2px dashed var(--sand);white-space:nowrap}
.tbl td.num{text-align:right}
.tbl a{color:var(--shell)}
.docs-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}
.dtoc{position:sticky;top:110px;display:grid;justify-items:start;gap:16px}
.dtoc nav{display:grid;gap:4px}
.dtoc nav a{display:flex;align-items:center;gap:8px;min-height:40px;font:400 16px var(--ft);text-decoration:none}
.dtoc nav a:hover{color:var(--shell)}
.docs h2{font:700 36px/1.1 var(--fp);margin:42px 0 14px}
.docs p,.docs li{font-size:17px;max-width:68ch}
.docs ul,.docs ol{padding-left:22px;display:grid;gap:10px}
.docs .kv{max-width:640px}
.nfp{background:var(--night);color:var(--paper)}
.nf{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:22px;padding:32px 16px;text-align:center}
.nf img{width:min(492px,86vw);height:auto;image-rendering:pixelated}
.nf .h2{font-size:48px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}.cups{grid-template-columns:repeat(6,1fr)}.docs-grid{grid-template-columns:1fr}.dtoc{position:static;grid-template-columns:auto 1fr;align-items:center}.dtoc .ft{--fd:2}}
@media (max-width:640px){
  .h2,.ptitle,.cointop h1{font-size:36px}
  .sc{padding:72px var(--gut) 80px}
  .sh p{font-size:17px}
  .gnums{grid-template-columns:repeat(3,auto);gap:10px 16px}
  .gnums dd{font-size:28px}
  .seven .egg-s{--e:2}
  .statline{font-size:28px}
  .lids{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:30px 14px}
  .ft{--fd:2}
  .lv{grid-template-columns:1fr 1fr}
  .lv>span:last-child{display:none}
  .tagc{padding:12px 10px 8px}
  .ln{flex-direction:column;align-items:flex-start;gap:2px}
  .ln b{font-size:18px;max-width:100%}
  .lidc.inv .k{font-size:15px;padding:0 8px}
}

/* toasts + wallet dialog */
.tstack{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;padding:12px 10px 10px 16px;font-size:15px;border-style:solid;border-width:4px 4px 8px;border-color:transparent;border-image:var(--b-pan) 4 4 8 4 fill/4px 4px 8px 4px}
.toast.ok{border-image-source:var(--b-pan-2)}
.toast.err{box-shadow:inset 6px 0 0 var(--shell)}
.toast .tt{flex:1}
.toast a{color:var(--shell);white-space:nowrap}
.toast .tx{width:30px;height:30px;font:700 20px var(--fp)}
.dlg{margin:auto;width:min(440px,calc(100vw - 24px));padding:28px 22px 22px;background:var(--paper);color:var(--ink);border:0;box-shadow:0 0 0 2px var(--ink),8px 8px 0 2px var(--sand)}
.dlg::backdrop{background:rgba(42,26,20,.55)}
.dlg h2{font:700 30px/1.1 var(--fp);margin-bottom:16px;padding-right:50px}
.wp-list{display:grid;gap:10px}
.wp-item{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 14px;background:var(--white);box-shadow:inset 0 0 0 2px var(--ink);font:600 17px var(--fb);text-align:left}
.wp-item:hover{background:var(--yolk)}
.wp-item img{width:32px;height:32px}
.wp-dot{width:32px;height:32px;background:url(/assets/mark-native.png) center/27px 32px no-repeat;image-rendering:pixelated}
.wp-cur,.wp-none{margin:0 0 14px}
.wp-get{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px}
.wp-get a{font-weight:600;color:var(--shell)}
.wp-off{margin-top:16px}
.wp-err{color:var(--shell-dk);font-size:15px;margin-top:10px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.seven .egg-s.g{background-position:calc(-20px*var(--e)) 0}}

/* ---------------------------------------------------------------- "How it works" dialog (explainer video, no autoplay) */
.k[hidden]{display:none}
.hw-t{font:600 17px/1 var(--fm);font-variant-numeric:tabular-nums}
.howto{width:min(1280px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink),8px 8px 0 var(--shell)}
.howto::backdrop{background:rgba(42,26,20,.86)}
.howto-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 10px 20px}
.howto-bar h2{margin:0;font:700 28px/1 var(--fp)}
.howto video{display:block;width:calc(100% - 6px);height:auto;margin:0 3px 3px;aspect-ratio:16/9;background:var(--ink)}
@media (max-width:759px){.howto-bar h2{font-size:20px}}