@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/fonts/inter-var.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("assets/fonts/jetbrains-mono-var.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("assets/fonts/space-grotesk-var.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --canvas:#2b2b2a;
  --canvas-2:#30302f;
  --panel:#383735;
  --panel-2:#403f3d;
  --text:#fdf3f3;
  --muted:rgba(253,243,243,.68);
  --border:rgba(253,243,243,.13);
  --border-strong:rgba(253,243,243,.23);
  --cta:#8a1d1d;
  --ink-red:#d96a5f;
}
*{box-sizing:border-box;letter-spacing:0}
html{min-width:320px;background:var(--canvas)}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#343432 0,var(--canvas) 320px);
  color:var(--text);
  font-family:"Space Grotesk",Inter,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main{width:min(960px,calc(100% - 40px));margin:0 auto;padding:58px 0 78px}
header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin:0;
  padding:0 0 30px;
  border-bottom:1px solid var(--border);
}
.kicker,.label{
  margin:0 0 8px;
  color:var(--muted);
  font:650 9px/1.4 "JetBrains Mono",ui-monospace,monospace;
  text-transform:uppercase;
}
h1{margin:0;font-size:56px;line-height:.98;font-weight:650;letter-spacing:0}
h2{margin:0 0 10px;font-size:22px;line-height:1.15}
p,li,.hero span,.hero p{color:var(--muted);font-size:14px;line-height:1.65}
a{color:inherit}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
nav a{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:7px;
  background:rgba(253,243,243,.025);
  color:var(--text);
  font-size:11px;
  font-weight:600;
  text-decoration:none;
}
nav a:hover{border-color:var(--border-strong);background:rgba(253,243,243,.06)}
a:focus-visible{outline:2px solid var(--cta);outline-offset:3px;box-shadow:0 0 0 5px rgba(138,29,29,.26)}
.card,.hero{
  margin:0;
  padding:28px 0;
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.hero{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:center}
.hero img{width:96px;height:96px;padding:16px;border:1px solid var(--border-strong);border-radius:8px;object-fit:contain;background:#242423}
.hero strong{display:block;font-size:28px;line-height:1.08;letter-spacing:0}
.hero p{margin:8px 0 0}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.field{
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:15px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--panel);
  font-size:13px;
}
.field a{width:max-content;max-width:100%;border:0;color:var(--text);text-decoration:underline;text-decoration-color:var(--ink-red);text-underline-offset:4px}
.note{padding-left:18px;border-left:1px solid var(--cta);background:rgba(138,29,29,.08)}
footer{margin-top:24px;color:var(--muted);font-size:11px}

@media(max-width:700px){
  main{width:min(100% - 28px,960px);padding:30px 0 54px}
  header{align-items:flex-start;flex-direction:column;padding-bottom:24px}
  h1{max-width:100%;font-size:32px;line-height:1.04;overflow-wrap:anywhere}
  nav{justify-content:flex-start}
  nav a{min-height:44px}
  .card,.hero{padding:23px 0}
  .hero{grid-template-columns:72px 1fr;gap:15px}
  .hero img{width:72px;height:72px;padding:12px}
  .hero strong{font-size:23px}
  .grid{grid-template-columns:1fr}
  .field{min-height:76px}
  .note{padding-left:14px}
}