@font-face{font-family:"Inter";font-style:normal;font-weight:300;font-display:swap;src:url("assets/fonts/inter-300.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"PT Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/pt-mono-400.woff2") format("woff2")}

:root{
  --ink:#071014;
  --ink-2:#0b171a;
  --sage:#8a9a90;
  --mist:#d2d5d0;
  --pink:#d93a70;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--ink);overflow-x:hidden}
body{font-family:"Inter",system-ui,sans-serif;color:var(--mist)}
.mono{font-family:"PT Mono",ui-monospace,monospace}

.bg{
  position:fixed;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(7,16,20,.90),rgba(7,16,20,.82) 55%,rgba(7,16,20,.93)),url("assets/blurred-lobby.webp") center/cover no-repeat;
  filter:brightness(1.08);
}

.grid-overlay{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:linear-gradient(90deg,transparent calc(25% - .5px),rgba(205,218,213,.14) 25%,transparent calc(25% + .5px)),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(205,218,213,.14) 50%,transparent calc(50% + .5px)),
    linear-gradient(90deg,transparent calc(75% - .5px),rgba(205,218,213,.14) 75%,transparent calc(75% + .5px));
}

.noise{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
}

.frame{
  position:relative;z-index:3;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:28px 32px;
}

.label-top{
  display:flex;flex-direction:column;gap:2px;
  font-size:11px;letter-spacing:.12em;color:var(--sage);
}

.center{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:18px;max-width:640px;
  padding:40px 0;
}

.mark{
  line-height:0;display:inline-flex;padding:6px;
  border:1px solid rgba(205,218,213,.22);
}
.mark svg{display:block}

.wordmark{font-size:15px;letter-spacing:.1em;color:var(--mist)}

h1{
  margin:0;font-weight:300;font-size:64px;line-height:1.08;
  color:var(--mist);letter-spacing:-.01em;
}

.status{
  margin-top:10px;font-size:11px;letter-spacing:.08em;color:var(--sage);
  display:flex;flex-direction:column;gap:6px;width:100%;max-width:360px;
}

.status-row{display:flex;justify-content:space-between;gap:16px}
.status-key{color:var(--sage)}
.status-val{color:var(--mist)}

.progress{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.progress-track{
  width:100%;height:2px;background:rgba(205,218,213,.14);position:relative;overflow:hidden;
}
.progress-seg{
  position:absolute;top:0;left:0;height:100%;width:22%;background:var(--pink);
  animation:build-sweep 6.5s ease-in-out infinite;
}
.progress-caption{color:var(--sage);font-size:10px;letter-spacing:.1em}
.cursor{
  display:inline-block;margin-left:2px;color:var(--pink);
  animation:blink 1.1s steps(1) infinite;
}

@keyframes build-sweep{
  0%{left:-22%}
  50%{left:78%}
  100%{left:-22%}
}
@keyframes blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .progress-seg{animation:none;left:0}
  .cursor{animation:none;opacity:1}
}

.label-bottom{
  display:flex;justify-content:space-between;align-items:flex-end;
  font-size:11px;letter-spacing:.1em;color:var(--sage);gap:16px;
}
.meta-left{display:flex;gap:18px}

@media (max-width:600px){
  .frame{padding:20px 18px}
  h1{font-size:40px}
  .center{padding:24px 0;gap:14px}
  .label-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}