@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root { color-scheme: dark; --bg: #09090a; --pink: #ff1493; --line: #252427; --edge: clamp(22px,4vw,76px); background: var(--bg); color: #f8f7f9; font: 16px/1.5 "Space Grotesk", Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (hover: hover) and (forced-colors: none) {
  html { scrollbar-color: #995372 var(--bg); scrollbar-width: thin; }
  @supports selector(::-webkit-scrollbar) {
    html { scrollbar-color: auto; scrollbar-width: auto; }
    html::-webkit-scrollbar { width: 12px; }
    html::-webkit-scrollbar-track { background: var(--bg); }
    html::-webkit-scrollbar-thumb {
      border: 3px solid transparent;
      border-radius: 12px;
      background: #995372 padding-box;
    }
    html::-webkit-scrollbar-thumb:hover,
    html::-webkit-scrollbar-thumb:active { background-color: var(--pink); }
  }
}
body { margin: 0; --bar-height: 72px; -webkit-user-select: none; user-select: none; }
main { display: grid; min-height: calc(100vh - var(--bar-height)); min-height: calc(100dvh - var(--bar-height)); }
a { color: inherit; text-decoration: none; }
 :is(a,button):focus-visible { outline: 2px solid #ff79c0; outline-offset: 5px; }
.bar,footer { padding-inline: max(var(--edge), calc((100% - 1340px) / 2)); display: flex; align-items: center; justify-content: space-between; }
.bar { height: var(--bar-height); }
.brand, .scroll-cue { background: transparent; border: 0; padding: 0; cursor: pointer; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { display: block; width: clamp(96px, 10vw, 128px); height: auto; }
.brand { -webkit-touch-callout: none; }
.site-notice {
  position: fixed;
  z-index: 5;
  inset-inline: 16px;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: fit-content;
  margin-inline: auto;
  max-width: calc(100% - 32px);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #19171b;
  font-size: 14px;
  text-align: center;
  pointer-events: none;
}
.site-notice:empty { opacity: 0; }
.hero { display: grid; place-items: center; padding: 72px var(--edge); text-align: center; }
h1,p { margin: 0; }
h1 { margin-inline: auto; font-size: clamp(34px,4.2vw,48px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
h1 span { color: var(--pink); white-space: nowrap; }
.intro p { margin: 22px auto 0; max-width: 55ch; color: #aaa7ae; font-size: clamp(16px,1.6vw,20px); line-height: 1.45; text-wrap: balance; }
footer {
  gap: 18px 32px;
  flex-wrap: wrap;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  background: #101012;
}
.footer-status, .footer-signature { display: grid; gap: 3px; }
.footer-status strong { font-size: 15px; }
.footer-status span, .footer-signature { font-size: 12px; color: #b5afb6; }
.footer-status span { display: flex; align-items: center; gap: 7px; }
.footer-status span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.footer-line { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.footer-signature { text-align: right; }
@media (max-width: 480px) {
  .footer-line { width: 100%; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px; }
  .footer-signature { text-align: left; }
}
.round, .scroll-cue { display: grid; place-items: center; width: 44px; height: 44px; color: #cfc8ce; }
.round { background: #19171b; border: 1px solid #393239; border-radius: 50%; cursor: pointer; }
.round:hover, .scroll-cue:hover { color: var(--pink); }
.round svg, .scroll-cue svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fullscreen[hidden], .collapse, .fullscreen[aria-pressed="true"] .expand { display: none; }
.fullscreen[aria-pressed="true"] .collapse { display: inline; }
.scroll-cue { position: absolute; bottom: 12px; left: calc(50% - 22px); }
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .dot-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 90%);
}
.hero::before {
  content: "";
  background: radial-gradient(circle, #89788650 1px, transparent 1.4px) 0 0 / 22px 22px;
}
.hero:has(.dot-field)::before { visibility: hidden; }
@keyframes arrive { from { transform: translateY(7px); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .intro { animation: arrive .7s ease-out both; }

}
@media (max-width:650px) {
  body { --bar-height: 62px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }