:root{
  --ink:#f2f2ea;
  --void:#0a0a0a;
  --bg:#787890;
  --acid:#c6ff3a;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  overflow:hidden;
  min-height:100vh;
}
::selection{background:var(--acid);color:var(--void)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

#grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;width:100%;height:100%;
}

.top{
  position:fixed;top:18px;right:18px;z-index:50;
  display:flex;gap:8px;
}
.tbtn{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,10,10,.55);backdrop-filter:blur(8px);
  transition:border-color .2s,transform .15s;
}
.tbtn svg{width:17px;height:17px;color:#f2f2ea;transition:color .2s}
.tbtn img{width:24px;height:24px;object-fit:contain}
.tbtn:hover{border-color:var(--acid);transform:translateY(-1px)}
.tbtn:hover svg{color:var(--acid)}
.tbtn--solid{background:#f2f2ea;border-color:#f2f2ea}
.tbtn--solid:hover{background:var(--acid);border-color:var(--acid)}

.stage{
  position:relative;z-index:3;
  min-height:100vh;display:grid;place-items:center;
  padding:80px 24px;
}
.gif{
  width:min(560px,86vw);height:auto;
  filter:drop-shadow(0 12px 70px rgba(0,0,0,.6));
}

.ca{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:8px;
  max-width:min(560px,92vw);
  border:1px solid rgba(255,255,255,.2);
  background:rgba(10,10,10,.6);backdrop-filter:blur(10px);
  padding:6px 6px 6px 16px;
}
.ca code{
  font-family:"Space Mono",monospace;font-size:.8rem;color:#f2f2ea;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ca-copy{
  width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;
  border:1px solid rgba(255,255,255,.2);background:transparent;
  transition:border-color .2s,background .2s;
}
.ca-copy svg{width:18px;height:18px;color:var(--acid)}
.ca-copy:hover{border-color:var(--acid)}
.ca-copy.done{background:var(--acid);border-color:var(--acid)}
.ca-copy.done svg{color:var(--void)}

@media(max-width:560px){
  .top{top:14px;right:14px}
  .tbtn{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}