/* ══════════ THE WIRE : shared design system (ported from agentmesh.ai) ══════════
   agentnaming.ai / Personal Agent Naming. Sibling of agentmesh.ai by design:
   same tokens, same rail, same type. The ecosystem should read as one hand. */
:root{
  --ink:#0A1417; --panel:#0F1D22; --panel-2:#12242A; --line:#1C2E33;
  --paper:#E7EFEC; --dim:#7C918C; --faint:#4A5D5A;
  --signal:#F2A93B;   /* amber: the ask / the name */
  --verify:#43D6A6;   /* mint: verified / online / bound */
  --address:#6BA8FF;  /* blue: address / resolve */
  --broadcast:#B69CFF;/* violet */
  --disp:'Space Grotesk', sans-serif;
  --body:'IBM Plex Sans', system-ui, sans-serif;
  --wire:'IBM Plex Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px;
  background-position:-1px -1px;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 45% at 30% 0%, rgba(242,169,59,.10), transparent 60%),
    radial-gradient(70% 50% at 100% 10%, rgba(67,214,166,.08), transparent 55%),
    linear-gradient(180deg, rgba(10,20,23,.72), var(--ink) 62%);
}
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

/* ── layout shell ── */
.layout{ position:relative; z-index:1; display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.rail{ border-right:1px solid var(--line); padding:26px 22px; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; }
.brand{ font-family:var(--wire); font-weight:600; font-size:.82rem; letter-spacing:.02em;
  display:flex; align-items:center; gap:9px; color:var(--paper); text-decoration:none; margin-bottom:30px; }
.brand .dot{ width:9px; height:9px; border-radius:2px; background:var(--signal);
  box-shadow:0 0 0 3px rgba(242,169,59,.15), 8px 0 0 -2px var(--verify), 16px 0 0 -2px var(--address); }
.rail .grp{ font-family:var(--wire); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint); margin:16px 0 4px; }
.rail .grp:first-child{ margin-top:0; }
.rail nav a{ display:block; font-family:var(--wire); font-size:.8rem; color:var(--dim);
  text-decoration:none; padding:6px 0; border-left:2px solid transparent; padding-left:12px; margin-left:-12px; }
.rail nav a:hover{ color:var(--paper); }
.rail nav a.on{ color:var(--paper); border-left-color:var(--signal); }
.rail .foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--wire); font-size:.72rem; color:var(--faint); }

.main{ min-width:0; }
.wrap{ max-width:980px; margin:0 auto; padding:0 40px; }

/* ── type helpers ── */
.eyebrow{ font-family:var(--wire); font-size:.76rem; letter-spacing:.04em; color:var(--dim); }
.eyebrow .tag{ color:var(--signal); }
h1,h2,h3{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.08; }
.lede{ color:var(--dim); font-size:1.12rem; max-width:60ch; }
.mono{ font-family:var(--wire); }
.verify{ color:var(--verify); }
.amber{ color:var(--signal); }
.blue{ color:var(--address); }
.kicker{ font-family:var(--wire); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:0 0 16px; }

/* ── hero ── */
.hero{ padding:74px 0 42px; border-bottom:1px solid var(--line); }
.hero .eyebrow{ margin-bottom:22px; display:block; }
.hero h1{ font-size:clamp(2.2rem,4.8vw,3.4rem); margin:0 0 18px; max-width:18ch; }
.hero h1 .am{ color:var(--signal); }
.hero .lede{ font-size:1.16rem; margin:0 0 26px; }

/* ── buttons ── */
.cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.btn{ font-family:var(--wire); font-size:.86rem; font-weight:500; text-decoration:none;
  padding:12px 20px; border-radius:8px; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px;
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease; }
.btn-signal{ background:var(--signal); color:#20140a; font-weight:600;
  box-shadow:0 12px 30px -14px rgba(242,169,59,.8); }
.btn-signal:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(242,169,59,.95); }
.btn-ghost{ border-color:var(--line); color:var(--paper); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:var(--dim); transform:translateY(-2px); }

/* ── content bands ── */
section.band{ padding:56px 0; border-bottom:1px solid var(--line); }
section.band h2{ font-size:1.8rem; margin:0 0 14px; }
section.band h3{ font-size:1.15rem; margin:38px 0 10px; }
section.band h3 .n{ color:var(--signal); font-family:var(--wire); font-size:.9rem; margin-right:10px; }
section.band p{ color:var(--dim); max-width:66ch; }
section.band p b, section.band li b{ color:var(--paper); font-weight:600; }
.pull{ border-left:3px solid var(--signal); padding:.2rem 1.1rem; color:var(--paper);
  font-size:1.06rem; max-width:60ch; margin:24px 0 0; }

ul.plain{ margin:18px 0 0; padding-left:20px; color:var(--dim); max-width:70ch; }
ul.plain li{ margin:10px 0; }
ul.plain b{ color:var(--paper); font-weight:600; }

/* ── callout ── */
.callout{ border:1px solid var(--line); border-left:3px solid var(--signal); border-radius:10px;
  background:var(--panel); padding:14px 18px; margin:22px 0; max-width:72ch; }
.callout.blue{ border-left-color:var(--address); }
.callout.mint{ border-left-color:var(--verify); }
.callout .t{ font-family:var(--wire); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px; }
.callout p{ margin:6px 0 0; color:var(--dim); }
.callout p:first-of-type{ margin-top:0; }
.callout p b{ color:var(--paper); }
.callout ul{ margin:8px 0 0; padding-left:20px; color:var(--dim); }
.callout li{ margin:6px 0; }
.callout li b{ color:var(--paper); }

/* ── code ── */
pre.code{ background:#0b1220; border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  overflow-x:auto; font-family:var(--wire); font-size:.82rem; line-height:1.7; color:var(--paper); margin:20px 0; }
pre.code .c{ color:var(--faint); }
pre.code .s{ color:var(--verify); }
pre.code .b{ color:var(--signal); }
pre.code .a{ color:var(--address); }
pre.out{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--verify);
  border-radius:12px; padding:14px 18px; overflow-x:auto; font-family:var(--wire); font-size:.8rem;
  line-height:1.7; color:var(--dim); margin:14px 0 6px; }
pre.out .ok{ color:var(--verify); }
.outlabel{ font-family:var(--wire); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); margin:18px 0 0; }
code.inline{ font-family:var(--wire); font-size:.86em; color:var(--verify);
  background:rgba(67,214,166,.07); border:1px solid rgba(67,214,166,.15); border-radius:5px; padding:1px 5px; }

/* ── docs / card grid ── */
.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
.docs a{ display:block; text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:20px 18px;
  background:var(--panel); transition:border-color .2s ease, transform .16s ease; }
.docs a:hover{ border-color:var(--dim); transform:translateY(-3px); }
.docs a .h{ font-family:var(--wire); font-size:.72rem; color:var(--signal); }
.docs a h3{ font-size:1.02rem; margin:8px 0 6px; }
.docs a p{ margin:0; font-size:.88rem; color:var(--dim); }

/* ── the three-act strip (the spine) ── */
.arc{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:28px; border:1px solid var(--line);
  border-radius:12px; overflow:hidden; }
.arc .act{ padding:22px 20px; border-left:1px solid var(--line); background:var(--panel); }
.arc .act:first-child{ border-left:0; }
.arc .act .n{ font-family:var(--wire); font-size:.72rem; letter-spacing:.06em; color:var(--hue,var(--signal)); }
.arc .act h3{ font-size:1.12rem; margin:6px 0 6px; }
.arc .act p{ margin:0; font-size:.9rem; color:var(--dim); }
.arc .act a{ font-family:var(--wire); font-size:.78rem; color:var(--hue,var(--signal)); text-decoration:none; display:inline-block; margin-top:10px; }

footer{ padding:34px 0 60px; }
footer .wrap{ font-family:var(--wire); font-size:.78rem; color:var(--faint); display:flex; gap:14px; flex-wrap:wrap; }
footer a{ color:var(--dim); text-decoration:none; }

@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  .rail{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .docs{ grid-template-columns:1fr; }
  .arc{ grid-template-columns:1fr; }
  .arc .act{ border-left:0; border-top:1px solid var(--line); }
  .arc .act:first-child{ border-top:0; }
}