@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('/assets/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('/assets/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; src: url('/assets/fonts/jetbrains-mono-v24-latin-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; src: url('/assets/fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 800; src: url('/assets/fonts/jetbrains-mono-v24-latin-800.woff2') format('woff2'); }

*{box-sizing:border-box;margin:0;padding:0}
:root{--accent:#3DDC84;--bg:#0D1117;--bar:#262c3a;--ink:#E6EDF3}
html,body{height:100%}
body{
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));
  font-family:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(120% 90% at 50% 28%,#0F1518 0%,#0A0E11 55%,#07090B 100%);
}
::selection{background:var(--accent);color:#06100B}
.card{
  width:100%;max-width:430px;border:1px solid var(--bar);border-radius:14px;overflow:hidden;
  background:var(--bg);box-shadow:0 40px 90px -40px rgba(0,0,0,.8),0 0 0 1px rgba(61,220,132,.05);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--bar)}
.bar .cmd{font-size:13px;font-weight:600;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g{color:var(--accent)}
.dim{color:rgba(230,237,243,.45)}
.dots{display:flex;align-items:center;gap:8px}
.dots span{
  width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(230,237,243,.55);
}
.body{padding:30px}
.eyebrow{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.2px;margin-bottom:20px}
.panel{
  position:relative;border:1px solid rgba(61,220,132,.16);border-radius:14px;
  padding:14px;aspect-ratio:1/1;display:flex;
}
.panel svg{display:block;width:100%;height:100%}
.cap{display:flex;align-items:center;gap:12px;margin-top:22px;text-decoration:none}
.cap .mark{flex:none}
.cap .who{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.cap .dom{font-size:13px;color:rgba(230,237,243,.55);line-height:1.3}
@media(max-width:380px){.body{padding:24px}.bar .cmd{font-size:12px}}