:root{
  --ink:#000;--paper:#fff;
  --dim:rgba(255,255,255,.60);--faint:rgba(255,255,255,.36);
  --line:rgba(255,255,255,.14);--line-2:rgba(255,255,255,.26);
  --mono:'JetBrains Mono',ui-monospace,monospace;--disp:'Space Grotesk',system-ui,sans-serif;
  --pad:clamp(20px,5vw,80px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
::selection{background:#fff;color:#000}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:820px;margin:0 auto;padding:0 var(--pad)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad)}
.nav__logo{display:inline-flex;align-items:center;gap:4px}
.nav__logo img{height:22px;width:81px}
.nav__logo .x{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1;letter-spacing:-.02em}
.nav a.back{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.nav a.back:hover{color:var(--paper)}

/* head */
.head{padding:56px 0 34px}
.head .tag{display:flex;gap:12px;align-items:center;margin-bottom:26px}
.head .tag .bar{height:1px;width:40px;background:var(--line-2)}
.head .tag span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.head h1{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;line-height:.94;font-size:clamp(44px,9vw,92px);text-transform:uppercase}
.head p{color:var(--dim);max-width:54ch;margin-top:22px;font-size:15px;line-height:1.7}

/* form */
form{padding:8px 0 90px}
.field{border-top:1px solid var(--line);padding:34px 0}
.field:first-child{border-top:none}
.field .lab{display:flex;gap:14px;align-items:baseline;margin-bottom:18px}
.field .lab .n{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.1em}
.field .lab .t{font-family:var(--disp);font-size:clamp(18px,2.4vw,24px);font-weight:600;letter-spacing:-.01em}
.field .lab .t .opt{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin-left:8px}

input[type=text],textarea{width:100%;background:transparent;border:1px solid var(--line-2);color:var(--paper);
  font-family:var(--mono);font-size:15px;padding:14px 16px;outline:none;transition:border-color .2s}
input[type=text]::placeholder,textarea::placeholder{color:var(--faint)}
input[type=text]:focus,textarea:focus{border-color:var(--paper)}
textarea{resize:vertical;min-height:110px;line-height:1.6}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{font-family:var(--mono);font-size:13px;letter-spacing:.02em;border:1px solid var(--line-2);
  padding:11px 16px;color:var(--dim);cursor:pointer;user-select:none;transition:.15s;background:transparent}
.pill:hover{color:var(--paper);border-color:var(--paper)}
.pill[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.submit{border-top:1px solid var(--line);padding-top:34px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:15px 30px;
  border:1px solid var(--paper);background:var(--paper);color:var(--ink);cursor:pointer;transition:.2s}
.btn:hover{background:transparent;color:var(--paper)}
.note{font-family:var(--mono);font-size:12px;color:var(--faint);max-width:40ch}
.err{color:var(--paper);border-color:var(--paper)!important}
.msg{font-family:var(--mono);font-size:13px;color:var(--dim);margin-top:20px;min-height:1.2em}
.msg b{color:var(--paper);font-weight:500}

footer{border-top:1px solid var(--line);padding:28px var(--pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
@media(max-width:600px){
  .nav{padding-block:14px}
  .head{padding:42px 0 25px}
  .field{padding:25px 0}
  .field .lab{gap:10px;align-items:flex-start}
  .pill{padding:10px 12px;min-height:44px}
  .submit{align-items:stretch;flex-direction:column}
  .submit .btn{width:100%;min-height:48px}
  form{padding-bottom:65px}
}
@media(hover:none){.pill:not([aria-pressed="true"]):hover{color:var(--dim);border-color:var(--line-2)}}
@media(prefers-reduced-motion:reduce){.btn,.pill,input[type=text],textarea{transition:none}}