:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101413;
  color: #f5f7f6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px 24px 28px;
  background: radial-gradient(ellipse at 50% 0%, #23372a80, transparent 60%);
}
.profile { width: 100%; max-width: 420px; text-align: center; }
.brand-mark {
  margin: 0 auto 28px;
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: #c4f782;
  color: #182315;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  font-weight: 750;
  letter-spacing: -3px;
  box-shadow: 0 8px 40px #b2ef6612, inset 0 1px 0 #ffffff80;
}
.brand-mark span { font-size: 1.25rem; align-self: flex-start; margin-top: 16px; letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(2.25rem, 9vw, 3rem); letter-spacing: -0.055em; line-height: 1.15; font-weight: 720; }
.dot { color: #c4f782; }
.subtitle { margin: 12px 0 34px; color: #a8b0ac; font-size: 1rem; line-height: 1.5; }
.links { display: grid; gap: 12px; text-align: left; }
.link {
  min-height: 72px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #333b36;
  border-radius: 16px;
  background: #1c221f;
  color: #f5f7f6;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 550;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms, background 160ms, transform 160ms;
}
.icon { color: #c4f782; width: 24px; height: 24px; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arrow { color: #8e9a92; margin-left: auto; font-size: 1.35rem; font-weight: 400; }
.link:focus-visible { outline: 3px solid #c4f782; outline-offset: 4px; }
.link:active { transform: scale(.98); background: #2a342d; }
@media (hover: hover) { .link:hover { border-color: #8baa70; background: #273129; transform: translateY(-2px); } .link:hover .arrow { color: #c4f782; } }
.notice { color: #c4f782; font-size: .875rem; line-height: 1.5; margin: 20px 0 0; }
.notice:empty { display: none; }
.tagline { margin: 26px 0 0; color: #a8b0ac; font-size: .875rem; line-height: 1.5; letter-spacing: .02em; }
footer { margin-top: 24px; color: #849087; font-size: .75rem; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; gap: 10px; }
.signal { color: #a9bc9c; font-size: 1rem; letter-spacing: -.1em; }
@media (min-width: 768px) { body { padding: 64px 24px; } .profile { max-width: 420px; } .brand-mark { margin-bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }