.mod-fi /* Field Instruments — card chrome (evolved from the original four-card set) */
:root{
  --bg:#04070c;
  --card:#070b12;
  --ink:#e9efec;
  --dim:#8a97a3;
}.mod-fi *{margin:0;padding:0;box-sizing:border-box}.mod-fi, .mod-fi{background:var(--bg)}.mod-fi{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}.mod-fi .wrap{max-width:1560px;margin:0 auto;padding:56px 40px 80px}.mod-fi /* ---------- header ---------- */
header{margin-bottom:44px}.mod-fi .kicker{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(233,239,236,.42);margin-bottom:18px;
}.mod-fi h1{font-size:30px;font-weight:500;letter-spacing:-.01em}.mod-fi .sub{margin-top:12px;font-size:13.5px;color:var(--dim);max-width:56ch;line-height:1.6}.mod-fi .sub em{font-style:normal;color:rgba(233,239,236,.75)}.mod-fi /* ---------- domain sections ---------- */
.domain{margin:0 0 18px}.mod-fi .domain + .grid{margin-bottom:52px}.mod-fi .domain .d-kick{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(233,239,236,.34);margin-bottom:8px;
}.mod-fi .domain h2{font-size:19px;font-weight:500;letter-spacing:-.005em}.mod-fi .domain p{margin-top:6px;font-size:12.5px;color:var(--dim);max-width:64ch;line-height:1.55}.mod-fi /* ---------- card grid ---------- */
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1240px){.mod-fi .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.mod-fi .grid{grid-template-columns:1fr}.mod-fi .wrap{padding:36px 18px 64px}}.mod-fi /* ---------- 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;
}.mod-fi .card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,232,195,.2);
}.mod-fi .card canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.mod-fi /* 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%);
}.mod-fi /* ---------- UI layer (non-interactive, .mod-fi canvas gets all pointer events) ---------- */
.ui{position:absolute;inset:0;pointer-events:none;padding:24px 24px 22px;display:flex;flex-direction:column}.mod-fi .ui .top{display:flex;justify-content:space-between;align-items:flex-start}.mod-fi .idx{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px;letter-spacing:.14em;
  color:var(--accent);opacity:.55;padding-top:4px;
}.mod-fi .tag{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);opacity:.7;
  padding-top:6px;text-align:right;max-width:60%;line-height:1.5;
}.mod-fi .body{margin-top:auto}.mod-fi .name{
  font-size:23px;font-weight:500;letter-spacing:.01em;
  color:var(--accent);
  text-shadow:0 0 22px rgba(255,255,255,.06);
}.mod-fi .desc{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--dim);max-width:30ch}.mod-fi .hint{
  position:absolute;right:20px;bottom:18px;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(233,239,236,.28);
  transition:color .4s ease;
}.mod-fi .card:hover .hint{color:var(--accent)}.mod-fi /* ---------- 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;
}.mod-fi footer code{
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;
  color:rgba(233,239,236,.72);
}

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