/* ============ tokens ============ */
:root{
  --board:#131019;
  --chip:#0d0a12;
  --node:#1c1724;
  --edge:#2c2536;
  --chip-border:#3a3246;
  --neutral-trace:#7a6f86;
  --pin:#5a5066;
  --dots:#241e2d;
  --text:#f1ecf8;
  --sub:#a79fb8;
  --silk:#8a8199;
  --work:#e0a44a;
  --play:#6aa9ff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 0) 0 0 / 24px 24px,
    var(--board);
  color:var(--text);
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit}
.silk{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  text-transform:uppercase;letter-spacing:.16em;color:var(--silk);
  margin:0;font-weight:500;
}
.silk.work{color:var(--work)}
.silk.play{color:var(--play)}

/* ============ shared: mobile-first, stage hidden until >=1000px ============ */
.stage{display:none}

/* ============ MOBILE (<1000px) ============ */
.mobile{
  display:flex;flex-direction:column;gap:28px;
  max-width:430px;margin:0 auto;padding:34px 20px 46px;
}
.m-header{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.12em;color:var(--silk)}
.m-header .r2{color:var(--sub)}
.m-chip{
  background:var(--chip);border:2px solid var(--chip-border);border-radius:12px;
  padding:20px 18px;text-align:center;position:relative;
}
.m-chip .pins-l,.m-chip .pins-r{position:absolute;top:26px;display:flex;flex-direction:column;gap:14px}
.m-chip .pins-l{left:-8px}.m-chip .pins-r{right:-8px}
.m-chip .pin{width:8px;height:5px;background:var(--pin)}
.m-chip .silk{font-size:11px;margin-bottom:8px}
.m-chip h1{font-family:"Chakra Petch",'Trebuchet MS',sans-serif;font-weight:700;font-size:30px;margin:0 0 6px;letter-spacing:.01em}
.m-chip .chip-role{color:var(--sub);font-size:12.5px;margin:0 0 12px}
.m-chip .chip-open{
  display:inline-block;text-decoration:none;color:var(--work);
  font-size:11px;letter-spacing:.1em;border:1px solid rgba(224,164,74,.4);
  border-radius:8px;padding:7px 12px;
}

.m-tree{display:flex;flex-direction:column}
.m-tree .m-tt{margin-bottom:14px}
.m-tree .m-tt .silk{font-size:11px;margin-bottom:4px}
.m-tree .m-tt h2{font-family:"Chakra Petch",'Trebuchet MS',sans-serif;font-weight:700;font-size:19px;margin:0}
.m-rows{position:relative;padding-left:0}
.m-trunk{position:absolute;left:13px;width:3px;border-radius:2px;top:0;bottom:0}
.m-tree.a .m-trunk{background:var(--work)}
.m-tree.b .m-trunk{background:var(--play)}
.m-row{display:flex;align-items:center;gap:0;position:relative;margin-bottom:12px}
.m-row:last-child{margin-bottom:0}
.m-conn{flex:none;width:36px;height:20px;display:block}
.m-node{
  flex:1;min-width:0;min-height:60px;display:flex;align-items:center;gap:10px;
  text-decoration:none;background:var(--node);border-radius:8px;padding:10px 13px;
}
.m-tree.a .m-node{border:1.5px solid rgba(224,164,74,.55)}
.m-tree.b .m-node{border:1.5px solid rgba(106,169,255,.5)}
.m-node .m-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-node .m-title{font-family:"Chakra Petch",'Trebuchet MS',sans-serif;font-weight:700;font-size:15px;line-height:1.15}
.m-node .m-sub{color:var(--sub);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-node .m-ref{flex:none;font-size:10px;letter-spacing:.1em;color:var(--silk)}
.m-tree.a .m-node .m-ref{color:rgba(224,164,74,.85)}
.m-tree.b .m-node .m-ref{color:rgba(106,169,255,.85)}
.m-node.flagship{background:var(--play);border-color:var(--play)}
.m-node.flagship .m-title{color:#131019}
.m-node.flagship .m-sub{color:#1d2433}
.m-node.flagship .m-ref{color:#131019}

.m-pads{display:flex;flex-direction:column;gap:12px}
.m-footer{text-align:center;color:var(--sub);font-size:11px;letter-spacing:.12em}

/* pads (shared look) */
.pad{
  display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;background:var(--node);border:1.5px solid var(--neutral-trace);
  border-radius:999px;color:var(--sub);
  font-size:12px;letter-spacing:.06em;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  transition:border-color .16s ease,color .16s ease,transform .16s ease;
}
.pad:hover,.pad:focus-visible{border-color:var(--text);color:var(--text);outline:none}
.pad.kofi{border-color:rgba(224,164,74,.6);color:var(--work)}
.pad.kofi:hover{border-color:var(--work)}
.pad svg{width:15px;height:15px;flex:none}
.m-pads .pad{min-height:48px}

/* ============ DESKTOP STAGE (>=1000px) ============ */
@media (min-width:1000px){
  .mobile{display:none}
  body{padding:26px 22px}
  .stage{
    display:block;position:relative;width:100%;max-width:1440px;margin:0 auto;
    aspect-ratio:1440 / 1200;container-type:inline-size;
  }
  .traces{position:absolute;inset:0;width:100%;height:100%}
  .ov{position:absolute}

  .header{
    left:5.556%;top:3.667%;width:88.889%;
    display:flex;justify-content:space-between;align-items:center;
    font-size:clamp(11px,.92cqw,14px);letter-spacing:.16em;color:var(--silk);
  }
  .header span:last-child{color:var(--sub)}

  .tree-title{top:9.5%;text-align:center}
  .tree-title .silk{font-size:clamp(11px,.95cqw,14px);margin-bottom:6px}
  .tree-title h2{
    font-family:"Chakra Petch",'Trebuchet MS',sans-serif;font-weight:700;
    font-size:clamp(15px,1.7cqw,26px);margin:0;letter-spacing:.01em;
  }
  .tt-a{left:5.556%;width:41.667%}
  .tt-b{left:52.778%;width:41.667%}

  .chip-card{
    left:38.889%;top:74.167%;width:22.222%;height:12.5%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-align:center;padding:0 6px;
  }
  .chip-card .silk{font-size:clamp(11px,.82cqw,12px)}
  .chip-card h1{
    font-family:"Chakra Petch",'Trebuchet MS',sans-serif;font-weight:700;
    font-size:clamp(18px,2.5cqw,36px);margin:2px 0;letter-spacing:.01em;
  }
  .chip-card .chip-role{font-size:clamp(11px,.9cqw,14px);color:var(--sub);margin:0}
  .chip-card .chip-open{
    font-size:clamp(11px,.82cqw,12px);letter-spacing:.1em;color:var(--work);
    text-decoration:none;margin-top:4px;
  }
  .chip-card .chip-open:hover{text-decoration:underline}

  .footer{left:0;width:100%;top:96.333%;text-align:center;color:var(--sub);
    font-size:clamp(11px,.9cqw,13px);letter-spacing:.14em}

  /* nodes injected by JS */
  .node{
    position:absolute;width:17.361%;height:6.333%;
    display:flex;flex-direction:column;justify-content:center;gap:2px;
    padding:0 clamp(10px,1cqw,16px);text-decoration:none;
    background:var(--node);border-radius:6px;
    transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
  }
  .node.na{border:1.5px solid var(--work)}
  .node.nb{border:1.5px solid var(--play)}
  .node .n-title{
    font-family:"Chakra Petch",'Trebuchet MS',sans-serif;font-weight:700;
    font-size:clamp(11px,1.18cqw,17px);line-height:1.1;color:var(--text);
  }
  .node .n-sub{
    font-size:clamp(11px,.86cqw,13px);color:var(--sub);line-height:1.15;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .node.na:hover,.node.na:focus-visible{box-shadow:0 0 0 1px var(--work),0 0 22px -4px rgba(224,164,74,.55);transform:translateY(-1px);outline:none}
  .node.nb:hover,.node.nb:focus-visible{box-shadow:0 0 0 1px var(--play),0 0 22px -4px rgba(106,169,255,.55);transform:translateY(-1px);outline:none}
  .node.flagship{background:var(--play);border-color:var(--play)}
  .node.flagship .n-title{color:#131019}
  .node.flagship .n-sub{color:#1d2433}

  .desig{
    position:absolute;font-size:clamp(11px,.82cqw,12px);letter-spacing:.14em;
    color:var(--silk);text-transform:uppercase;white-space:nowrap;
  }
  .desig.da{color:rgba(224,164,74,.9)}
  .desig.db{color:rgba(106,169,255,.85)}
  .desig.flagship{color:var(--play)}

  /* pads injected by JS */
  .stage .pad{
    position:absolute;width:12.5%;height:4%;font-size:clamp(11px,.92cqw,13px);
  }
}

/* ============ email popover ============ */
.pop-backdrop{
  position:fixed;inset:0;background:rgba(8,6,12,.72);
  display:flex;align-items:center;justify-content:center;padding:22px;z-index:80;
}
.pop-backdrop[hidden]{display:none}
.pop{
  position:relative;max-width:340px;width:100%;
  background:var(--node);border:1px solid var(--chip-border);border-radius:16px;padding:22px 20px 20px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9);
}
.pop .silk{font-size:11px;margin-bottom:12px}
.pop-body{font-family:"IBM Plex Mono",monospace;font-size:13px;line-height:1.55;color:var(--text);margin:0 0 16px}
.pop-body b{color:var(--work)}
.pop-cta{
  display:block;text-align:center;text-decoration:none;
  background:var(--work);color:#161009;font-weight:600;
  font-family:"Chakra Petch",sans-serif;font-size:14px;letter-spacing:.02em;
  border-radius:11px;padding:12px;
}
.pop-cta:hover{filter:brightness(1.05)}
.pop-close{
  position:absolute;top:12px;right:12px;width:28px;height:28px;
  background:transparent;border:1px solid var(--chip-border);border-radius:8px;
  color:var(--sub);cursor:pointer;font-size:12px;line-height:1;
}
.pop-close:hover{color:var(--text);border-color:var(--neutral-trace)}

/* focus rings */
a:focus-visible,button:focus-visible{outline:2px solid var(--work);outline-offset:2px}
.node.nb:focus-visible,.m-tree.b a:focus-visible{outline-color:var(--play)}

.blink{color:var(--work);animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}