:root{
  --paper:#ECE9E1;
  --ink:#1B1813;
  --bar:#16140F;
  --bar-ink:#E7E3DA;
  --copper:#B06A2C;
  --copper-deep:#8A4F1C;
  --live:#34A85A;
  --muted:#6E685C;
  --grid:rgba(27,24,19,0.085);
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--mono);
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--grid) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  background-position:-1px -1px;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* device status bar — echoes the e-ink badge header */
.bar{
  background:var(--bar);
  color:var(--bar-ink);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 20px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bar .right{display:flex;align-items:center;gap:9px}
.led{
  width:8px;height:8px;border-radius:50%;
  background:var(--live);
  box-shadow:0 0 0 0 rgba(52,168,90,.55);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(52,168,90,.5)}
  70%{box-shadow:0 0 0 7px rgba(52,168,90,0)}
  100%{box-shadow:0 0 0 0 rgba(52,168,90,0)}
}

/* trace signature */
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.trace path{
  fill:none;stroke:var(--copper);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2000;stroke-dashoffset:2000;
  animation:draw 1.7s cubic-bezier(.7,0,.2,1) .25s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
.pad{fill:var(--copper);opacity:0;animation:fade .5s ease 1.6s forwards}
.pad-hole{fill:var(--paper)}

/* content */
.content{position:relative;z-index:2;text-align:center;padding:32px 24px}
.eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--copper-deep);margin-bottom:22px;
  opacity:0;animation:rise .7s ease .15s forwards;
}
.wordmark{
  font-size:clamp(46px,12vw,116px);
  font-weight:700;letter-spacing:-.03em;line-height:.92;
  color:var(--ink);
  opacity:0;animation:rise .8s ease .3s forwards;
}
.tagline{
  margin-top:24px;font-size:clamp(14px,2.1vw,17px);
  font-weight:400;color:var(--ink);letter-spacing:.01em;
  max-width:30ch;margin-left:auto;margin-right:auto;line-height:1.55;
  opacity:0;animation:rise .8s ease .5s forwards;
}
.status{
  margin-top:34px;font-size:13px;letter-spacing:.05em;
  color:var(--muted);
  opacity:0;animation:rise .8s ease .7s forwards;
}
.cursor{
  display:inline-block;width:.6em;height:1.05em;
  background:var(--copper);margin-left:3px;vertical-align:-2px;
  animation:blink 1.1s step-end infinite;
}
@keyframes blink{50%{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* footer */
.foot{
  display:flex;justify-content:space-between;
  padding:14px 20px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);
}
.foot a{color:var(--copper-deep);text-decoration:none}
.foot a:hover,.foot a:focus-visible{text-decoration:underline}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

@media (max-width:520px){
  .bar{font-size:11px;padding:10px 14px}
  .foot{font-size:10px;padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .trace path{stroke-dashoffset:0}
  .pad,.eyebrow,.wordmark,.tagline,.status{opacity:1;transform:none}
}