:root{
  --bg:#060709;
  --ink:#eef0f3;
  --muted:#98a1ac;
  --faint:#7d8691;
  --line:rgba(255,255,255,.16);
  --line-strong:rgba(255,255,255,.34);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.stage{
  flex:1 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(.9rem,2.4svh,1.6rem);
  padding:max(1.5rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right))
          max(1.5rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));
  text-align:center;
  background:radial-gradient(60% 46% at 50% 30%,rgba(125,211,252,.07),transparent 70%);
}
.art{
  position:relative;
  width:min(88vw,540px,58svh);aspect-ratio:1/1;
  margin-bottom:clamp(.25rem,1.5svh,1rem);
}
.art img,.art canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.art canvas{opacity:0;transition:opacity 900ms ease;cursor:grab}
.art canvas:active{cursor:grabbing}
.art img{transition:opacity 900ms ease;object-fit:contain;pointer-events:none;user-select:none}
.stage.ready .art canvas{opacity:1}
.stage.ready .art img{opacity:0}

.mark{
  margin:0;
  font-weight:600;
  font-size:clamp(2.1rem,7vw,3.6rem);
  letter-spacing:.42em;
  padding-left:.42em; /* optically recentres the tracked letters */
  line-height:1;
}
.line{
  margin:0;
  font-size:clamp(.72rem,1.9vw,.84rem);
  letter-spacing:.34em;padding-left:.34em;
  text-transform:uppercase;
  color:var(--muted);
}
.links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
  margin-top:clamp(.25rem,1.2svh,.75rem);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.9rem;padding:.7rem 1.6rem;
  border:1px solid var(--line);border-radius:999px;
  color:var(--ink);text-decoration:none;
  font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color 180ms ease,background-color 180ms ease;
}
.btn:hover{border-color:var(--line-strong);background:rgba(255,255,255,.05)}
.btn:focus-visible{outline:2px solid #7dd3fc;outline-offset:3px}
.notice{
  margin:clamp(.5rem,2svh,1.25rem) 0 0;
  max-width:34rem;
  padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.82rem;line-height:1.65;color:var(--faint);
}
@media (max-width:420px){
  .btn{flex:1 1 100%}
  .mark{letter-spacing:.34em;padding-left:.34em}
}
@media (prefers-reduced-motion:reduce){
  .art canvas,.art img,.btn{transition:none}
}

.risk{
  margin:0;
  padding:.55rem max(1rem,env(safe-area-inset-right)) .55rem max(1rem,env(safe-area-inset-left));
  padding-top:max(.55rem,env(safe-area-inset-top));
  text-align:center;
  font-size:.74rem;line-height:1.45;letter-spacing:.02em;
  color:var(--faint);
  border-bottom:1px solid var(--line);
}
.legal{
  padding:1rem max(1.25rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left));
  text-align:center;
}
.legal p{
  margin:0 auto;max-width:44rem;
  font-size:.72rem;line-height:1.6;color:var(--faint);
}
.missing{
  margin:0;
  padding:.55rem 1.1rem;
  border:1px solid var(--line);border-radius:999px;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}