:root{
  --bg:#000000;
  --line:rgba(255,255,255,.24);
  --line-dim:rgba(255,255,255,.12);
  --line-strong:#ffffff;
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.60);
  --text-dimmer:rgba(255,255,255,.34);
}
*{box-sizing:border-box}
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  font-size:14.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:inherit; font-weight:700; text-wrap:balance; margin:0; letter-spacing:-.01em; }
.mono{ font-variant-numeric:tabular-nums; }
a{ color:var(--text); text-underline-offset:3px; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
::selection{ background:#fff; color:#000; }
::placeholder{ color:var(--text-dimmer); }

.cursor{ display:inline-block; width:.5em; height:1em; background:#fff; vertical-align:-.15em; margin-left:2px; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .cursor{ animation:none; } }

.btn{
  border:1px solid var(--line); background:transparent; color:var(--text);
  border-radius:0; padding:10px 16px; font-size:13px; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.btn:hover{ border-color:var(--line-strong); background:rgba(255,255,255,.08); }
.btn-primary{ background:#fff; border-color:#fff; color:#000; font-weight:700; }
.btn-primary:hover{ background:transparent; color:#fff; }
.btn-danger{ color:var(--text-dim); }
.btn-danger:hover{ color:#fff; border-color:#fff; }
.btn-ghost{ border-color:transparent; background:transparent; }
.btn-ghost:hover{ border-color:var(--line); background:transparent; }
.btn:disabled{ opacity:.4; cursor:default; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:1px solid #fff; outline-offset:2px;
}

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:600; }
.field input, .field select, .field textarea{
  background:transparent; border:1px solid var(--line); border-radius:0; padding:10px 11px; font-size:13.5px;
  width:100%; resize:vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:#fff; }

.error-text{ color:var(--text); font-size:12.5px; min-height:18px; }
.error-text:not(:empty)::before{ content:"! "; }

.tag{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:3px 8px; border:1px solid transparent; white-space:nowrap; line-height:1.4; }
.tag-fill{ background:#fff; color:#000; border-color:#fff; }
.tag-outline{ background:transparent; color:#fff; border-color:var(--line-strong); }
.tag-dim{ background:transparent; color:var(--text-dim); border-color:var(--line); }
.tag-plain{ background:transparent; color:var(--text-dimmer); border-color:transparent; padding-left:0; padding-right:0; }

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand-mark{ display:block; object-fit:contain; transition:opacity .12s; }
a.brand:hover .brand-mark, button.brand:hover .brand-mark{ opacity:.75; }
a.brand:focus-visible{ outline:1px solid #fff; outline-offset:6px; }