/* Field Instruments — card chrome (evolved from the original four-card set) */
:root{
  --bg:#04070c;
  --card:#070b12;
  --ink:#e9efec;
  --dim:#8a97a3;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg)}
body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1560px;margin:0 auto;padding:56px 40px 80px}

/* ---------- header ---------- */
header{margin-bottom:44px}
.kicker{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(233,239,236,.42);margin-bottom:18px;
}
h1{font-size:30px;font-weight:500;letter-spacing:-.01em}
.sub{margin-top:12px;font-size:13.5px;color:var(--dim);max-width:56ch;line-height:1.6}
.sub em{font-style:normal;color:rgba(233,239,236,.75)}

/* ---------- domain sections ---------- */
.domain{margin:0 0 18px}
.domain + .grid{margin-bottom:52px}
.domain .d-kick{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(233,239,236,.34);margin-bottom:8px;
}
.domain h2{font-size:19px;font-weight:500;letter-spacing:-.005em}
.domain p{margin-top:6px;font-size:12.5px;color:var(--dim);max-width:64ch;line-height:1.55}

/* ---------- card grid ---------- */
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1240px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}.wrap{padding:36px 18px 64px}}

/* ---------- card ---------- */
.card{
  --accent:#7ce8c3;
  position:relative;
  min-height:360px;
  border-radius:18px;
  background:var(--card);
  border:1px solid rgba(124,232,195,.10);
  overflow:hidden;
  cursor:crosshair;
  transition:border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  touch-action:pan-y;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,232,195,.2);
}
.card canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* CSS vignette + top sheen — zero-cost depth above the canvas */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.028), transparent 55%),
    radial-gradient(140% 120% at 50% 55%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ---------- UI layer (non-interactive, canvas gets all pointer events) ---------- */
.ui{position:absolute;inset:0;pointer-events:none;padding:24px 24px 22px;display:flex;flex-direction:column}
.ui .top{display:flex;justify-content:space-between;align-items:flex-start}
.idx{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;
  color:var(--accent);opacity:.55;padding-top:4px;
}
.tag{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);opacity:.7;
  padding-top:6px;text-align:right;max-width:60%;line-height:1.5;
}
.body{margin-top:auto}
.name{
  font-size:23px;font-weight:500;letter-spacing:.01em;
  color:var(--accent);
  text-shadow:0 0 22px rgba(255,255,255,.06);
}
.desc{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--dim);max-width:30ch}
.hint{
  position:absolute;right:20px;bottom:18px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,239,236,.28);
  transition:color .4s ease;
}
.card:hover .hint{color:var(--accent)}

/* ---------- footer ---------- */
footer{
  margin-top:8px;padding-top:28px;border-top:1px solid rgba(233,239,236,.07);
  font-size:12px;color:var(--dim);max-width:72ch;line-height:1.6;
}
footer code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;
  color:rgba(233,239,236,.72);
}

@media (prefers-reduced-motion:reduce){
  .card,.hint{transition:none}
}