:root{
  color-scheme: light dark;
  --bg:#ffffff;
  --text:#0f1419;
  --text-dim:#57636f;
  --border:#eef1f3;
  --accent:#0d8fe0;
  --gold:#a9791f;
  --track:#f6f7f8;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="light"]){
    --bg:#0e1216;
    --text:#eef1f3;
    --text-dim:#93a1ac;
    --border:#22282e;
    --accent:#4db4f2;
    --gold:#d4ad4a;
    --track:#15191d;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1216;
  --text:#eef1f3;
  --text-dim:#93a1ac;
  --border:#22282e;
  --accent:#4db4f2;
  --gold:#d4ad4a;
  --track:#15191d;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--track);
}

body{
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex;
  justify-content:center;
}

.page{
  width:100%;
  max-width:420px;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  padding:0 20px;
  position:relative;
}

.escape-hatch{
  position:relative;
  height:190px;
  margin-top:26px;
}
.escape-hatch svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:var(--accent);
  overflow:visible;
}
.escape-hatch .label{
  position:absolute;
  left:0;
  bottom:46px;
  font-size:15px;
  font-weight:600;
  color:var(--accent);
}
.arrow-solid{ opacity:0.95; }
.arrow-track{ opacity:0.3; }
.arrow-flow{ stroke-dashoffset:0; }
.arrow-head{
  transform-box:fill-box;
  transform-origin:50% 50%;
}
@media (prefers-reduced-motion: no-preference){
  .arrow-flow{ animation:flow 1.1s linear infinite; }
  .arrow-head{ animation:arrive 1.1s ease-in-out infinite; }
}
@keyframes flow{
  to{ stroke-dashoffset:-32px; }
}
@keyframes arrive{
  0%,65%{ opacity:.55; transform:scale(1); }
  85%{ opacity:1; transform:scale(1.15); }
  100%{ opacity:.55; transform:scale(1); }
}

.avatar{
  width:150px;
  height:150px;
  border-radius:22px;
  flex:none;
  overflow:hidden;
  margin-top:18px;
  background:var(--track);
}
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
}
.logo-mark{
  width:20px;
  height:20px;
  border-radius:5px;
  object-fit:cover;
  flex:none;
}
.badge{
  width:16px;
  height:16px;
  flex:none;
}
.brand-name{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text);
}

h1{
  font-size:26px;
  line-height:1.22;
  letter-spacing:-0.01em;
  margin:22px 0 10px;
  text-wrap:balance;
}
p.lede{
  font-size:15px;
  line-height:1.5;
  color:var(--text-dim);
  margin:0 0 26px;
  max-width:34ch;
}

ol.steps{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
ol.steps li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:15px;
}
.step-num{
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1.5px solid var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:600;
}
.steps kbd{
  font:inherit;
  font-weight:600;
  background:var(--track);
  border:1px solid var(--border);
  border-radius:6px;
  padding:2px 8px;
}
.steps .quote{ color:var(--accent); font-weight:600; }

.timing{
  font-size:13.5px;
  color:var(--text-dim);
  margin:22px 0 0;
}

.status{
  margin-top:auto;
  padding-top:28px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--text-dim);
}
.status .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  flex:none;
}
@media (prefers-reduced-motion: no-preference){
  .status.pending .dot{ animation:pulse 1s ease-in-out infinite; }
}
@keyframes pulse{ 50%{ opacity:.25; } }

footer{
  padding:18px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border);
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:10px;
  font-size:13.5px;
  color:var(--text-dim);
}
footer button{
  font:inherit;
  color:var(--text-dim);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
footer a{
  color:var(--accent);
  font-weight:600;
  text-decoration:none;
}
footer .sep{ color:var(--border); }
footer .copied{ color:var(--accent); }


  .tap-arrow__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* faint dotted guide the runner travels along */
  .tap-arrow__track {
    fill: none;
    stroke: #c7c7c7;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1 10;
  }

  /* the moving highlighted segment — pathLength="100" on the <path>
     lets the dasharray/offset be authored in percent, regardless of
     the curve's real length */
  .tap-arrow__runner {
    fill: none;
    stroke: #1a8cff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 16 84;
    stroke-dashoffset: 100;
    animation: run 1.8s cubic-bezier(.5, 0, .5, 1) infinite;
  }

  @keyframes run {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    10%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { stroke-dashoffset: 0;  opacity: 0; }
  }

  .tap-arrow__head {
    fill: none;
    stroke: #1a8cff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: nudge 1.8s ease-in-out infinite;
  }

  @keyframes nudge {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(2px, -3px); }
  }