:root {
  --bg: #03060c;
  --navy: #0a1424;
  --blue: #185baf;
  --electric-blue: #65b2ff;
  --white: #e8e9e8;
  --muted: #96a6bd;
  --border: #254d7e;
  --font: Arial, Helvetica, sans-serif;
  --interface-font: Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { min-width: 280px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--white);
  font-family: var(--font);
  background: var(--bg);
}

button { font: inherit; -webkit-tap-highlight-color: transparent; }

.landing {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  text-align: center;
  isolation: isolate;
  background:
    radial-gradient(ellipse 420px 360px at 50% 35%, #0b234334, transparent 100%),
    radial-gradient(ellipse at 50% 40%, transparent 25%, #0005 100%),
    var(--bg);
}

.identity { display: flex; flex-direction: column; align-items: center; }

.coin {
  position: relative;
  width: clamp(300px, 42svh, 420px);
  max-width: 78vw;
  aspect-ratio: 1;
  isolation: isolate;
  mix-blend-mode: screen;
}

.coin::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: -1;
  border-radius: 50%;
  background: #1265da;
  opacity: .14;
  filter: blur(44px);
}

.coin img { display: block; width: 100%; height: 100%; mix-blend-mode: screen; }

h1 {
  margin: 10px 0 0;
  font-size: clamp(52px, 7.2svh, 72px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.065em;
  padding-right: .065em;
  color: var(--white);
  text-shadow: 0 2px 0 #7f8c9d26;
}

.monitor { width: min(100%, 540px); margin-top: clamp(24px, 3.6svh, 38px); }

h2 {
  margin: 0;
  color: var(--muted);
  font-family: var(--interface-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .24em;
  padding-left: .24em;
}

.status-space { height: 62px; display: grid; place-items: center; margin-top: 5px; }

.status {
  margin: 0;
  max-width: 100%;
  font-size: clamp(23px, 4svh, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.status[data-length="long"] { font-size: clamp(18px, 2.7vw, 25px); letter-spacing: -.025em; }

.ecg { display: block; width: 208px; height: 35px; margin: 0 auto 22px; overflow: visible; }
.ecg path { stroke: url(#pulse-fade); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.ecg-baseline { opacity: .18; }
.ecg-heartbeat { opacity: .6; stroke-dasharray: 300; stroke-dashoffset: 0; animation: heartbeat 5.6s linear infinite; }
.ecg-flatline { opacity: 0; }
.monitor[data-state="checking"] .ecg-heartbeat,
.monitor[data-state="revived"] .ecg-heartbeat { animation: checking .65s ease-out; }
.monitor[data-state="dead"] .ecg-heartbeat { opacity: 0; animation: none; }
.monitor[data-state="dead"] .ecg-flatline { opacity: .9; }

.metal-button {
  --rim: 1px;
  --frame-inset: 5px;
  --edge-glow: #1765c625;
  --cut: polygon(5px 0, 72% 0, 74% 2px, 75% 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 26% 100%, 25% calc(100% - 1px), 23% 100%, 0 100%, 0 5px);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 0;
  color: var(--white);
  background: transparent;
  filter: drop-shadow(0 2px 2px #0009) drop-shadow(0 0 4px var(--edge-glow));
  font-family: var(--interface-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .025em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}

/* Separate rim and recessed face keep the chipped silhouette crisp at every size. */
.metal-button::before {
  content: "";
  position: absolute;
  inset: var(--frame-inset) 0;
  z-index: -2;
  clip-path: var(--cut);
  background:
    linear-gradient(126deg, transparent 42%, #020710 44% 53%, #94b1cd99 55%, transparent 59%) 77% 0 / 12px 5px no-repeat,
    linear-gradient(112deg, transparent 34%, #03060c 38% 61%, transparent 65%) 18% 100% / 9px 3px no-repeat,
    linear-gradient(105deg, #d3e7f2a3, #407dd0 18%, #18457e 46%, #5185c8 73%, #183b67) top / 100% 1px no-repeat,
    linear-gradient(155deg, #4a86cb, #234f92 36%, #0a2244 65%, #3269a5);
  box-shadow: inset 0 -1px 0 #528fcb55;
  pointer-events: none;
  transition: filter .16s ease;
}

.metal-button::after {
  content: "";
  position: absolute;
  inset: calc(var(--frame-inset) + var(--rim)) var(--rim);
  z-index: -1;
  clip-path: var(--cut);
  background:
    linear-gradient(167deg, transparent 46%, #9dc5e81c 48% 51%, transparent 54%) 13px 4px / 22px 4px no-repeat,
    linear-gradient(128deg, transparent 46%, #7495b315 49% 52%, transparent 55%) calc(100% - 8px) calc(100% - 4px) / 13px 5px no-repeat,
    linear-gradient(112deg, #527fa010, transparent 34%, #0004 76%),
    linear-gradient(#101d2c, #060e18);
  box-shadow: inset 0 1px 0 #c4def01c, inset 0 3px 4px #0008, inset 0 -1px 0 #22456b66;
  pointer-events: none;
  transition: box-shadow .16s ease;
}

.metal-button svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: #a3bedb; }
.check-button {
  --rim: 2px;
  --frame-inset: 0px;
  --edge-glow: #1e78f04d;
  --cut: polygon(9px 0, 69% 0, 70% 3px, 72% 1px, 73% 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 23% 100%, 22% calc(100% - 2px), 20% 100%, 0 100%, 0 65%, 2px 61%, 0 58%, 0 9px);
  width: 214px;
  min-height: 52px;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .095em;
}
.check-button::before {
  background:
    linear-gradient(127deg, transparent 30%, #050a12 34% 48%, #b8ced9a3 50% 53%, transparent 58%) 73% 0 / 15px 7px no-repeat,
    linear-gradient(115deg, transparent 28%, #03060c 32% 56%, #81a7c477 59% 64%, transparent 68%) 21% 100% / 15px 5px no-repeat,
    linear-gradient(105deg, #eff7fccc, #75aeeb 17%, #1b529c 42%, #b1d6f0b3 68%, #275e99) top / 100% 1px no-repeat,
    linear-gradient(152deg, #6ba7e5, #2666ba 24%, #123971 49%, #0a2041 71%, #397abe);
}
.check-button::after { box-shadow: inset 0 1px 0 #c4def038, inset 0 4px 5px #000a, inset 0 -2px 0 #31588577; }
.check-button svg { width: 16px; height: 16px; }

.metal-button:focus-visible { outline: 2px solid #a5d1ff; outline-offset: 5px; }
.metal-button:active:not(:disabled) { transform: translateY(1px); filter: drop-shadow(0 1px 1px #0009) drop-shadow(0 0 2px var(--edge-glow)); }
.metal-button:active:not(:disabled)::after { box-shadow: inset 0 4px 8px #000d, inset 0 -1px 0 #31588544; }
.metal-button:disabled { cursor: default; }
.social-button:disabled { --edge-glow: #1765c612; color: #b1bac8; }
.social-button:disabled::before { filter: saturate(.65) brightness(.8); }
.social-button:disabled svg { color: #8a9fb7; }
.check-button:disabled { color: #a3aec0; }

@media (hover: hover) {
  .metal-button:hover:not(:disabled) { transform: translateY(-1px); filter: drop-shadow(0 3px 3px #0009) drop-shadow(0 0 6px var(--edge-glow)); }
  .metal-button:hover:not(:disabled)::before { filter: brightness(1.2); }
  .check-button:hover:not(:disabled) { transform: translateY(-2px); }
  .metal-button:active:not(:disabled) { transform: translateY(1px); filter: drop-shadow(0 1px 1px #0009) drop-shadow(0 0 2px var(--edge-glow)); }
}

.socials { display: flex; justify-content: center; gap: 10px; max-width: 100%; margin-top: 30px; }
/* The compact 34px face retains a 44px keyboard and touch target. */
.social-button { flex: 0 1 auto; }
.script-notice { color: var(--muted); font-size: 12px; margin: 18px 0 0; }

@keyframes heartbeat {
  0%, 68%, 100% { opacity: .38; }
  74% { opacity: .9; }
  80% { opacity: .5; }
}

@keyframes checking {
  0% { stroke-dashoffset: 300; opacity: .35; }
  65% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: .6; }
}

@media (max-width: 480px) {
  .coin { width: clamp(230px, 36svh, 310px); }
  h1 { font-size: clamp(50px, 7.5svh, 62px); margin-top: 12px; }
  .monitor { margin-top: 28px; }
  .socials { margin-top: 26px; gap: 8px; }
  .social-button { padding: 0 9px; gap: 6px; font-size: 10px; letter-spacing: .02em; }
  .status { font-size: 30px; }
  .status[data-length="long"] { font-size: 20px; }
}

@media (max-height: 740px) and (min-width: 481px) {
  .landing { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .coin { width: clamp(220px, 40svh, 300px); }
  h1 { font-size: 52px; margin-top: 4px; }
  .monitor { margin-top: 20px; }
  .ecg { margin-bottom: 16px; }
  .socials { margin-top: 22px; }
}

@media (max-height: 680px) and (max-width: 480px) {
  .landing { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .coin { width: 204px; }
  h1 { font-size: 48px; margin-top: 6px; }
  .monitor { margin-top: 22px; }
  .status-space { height: 54px; }
  .ecg { margin-bottom: 15px; }
  .socials { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .metal-button:hover:not(:disabled), .metal-button:active:not(:disabled) { transform: none; }
}