/* ============ CONNECTING THE DOTS BACKGROUND ============ */
  #cd-bg{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden}
  #cd-bg canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .cd-node{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;padding:0;border-radius:50%;
    border:1px solid rgba(255,255,255,.12);background:rgba(8,12,28,.65);color:rgba(200,212,240,.5);
    display:grid;place-items:center;font-size:15px;cursor:pointer;opacity:.5;
    transition:color .35s,border-color .35s,box-shadow .35s,opacity .35s,transform .25s}
  .cd-node:hover,.cd-node:focus-visible{opacity:1;color:#fff;outline:none;transform:scale(1.12);box-shadow:0 0 0 5px rgba(80,130,255,.14)}
  .cd-node.visited{opacity:.95;color:#f2cf6b;border-color:rgba(242,207,107,.45)}
  .cd-node.current{opacity:1;color:#fff;border-color:#f2cf6b;box-shadow:0 0 22px rgba(242,207,107,.55)}
  .cd-node.candidate{opacity:1;color:#a9c0ff;border-color:rgba(120,160,255,.65);animation:cdPulse 1.8s ease-in-out infinite}
  .cd-node.trait{width:50px;height:50px;margin:-25px 0 0 -25px;font-size:19px;color:#1a1200;border:none;opacity:1;
    background:radial-gradient(circle at 35% 30%,#fff3c4,#e6b23a 60%,#a8770f);box-shadow:0 0 30px rgba(242,190,60,.55)}
  .cd-node.trait.born{animation:cdBorn 1s cubic-bezier(.2,1.6,.4,1)}
  @keyframes cdPulse{0%,100%{box-shadow:0 0 0 0 rgba(110,150,255,.45)}50%{box-shadow:0 0 0 9px rgba(110,150,255,0)}}
  @keyframes cdBorn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
  .cd-cap{position:absolute;max-width:230px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.4;
    background:rgba(4,6,16,.78);border:1px solid rgba(160,180,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    pointer-events:none;opacity:0;transition:opacity .3s;z-index:3}
  .cd-cap.show{opacity:1}
  .cd-cap b{display:block;color:#fff;font-weight:600;margin-bottom:2px}
  .cd-cap small{color:#f2cf6b;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
  .cd-cap em{display:block;color:#9fb3e6;font-style:normal;margin-top:4px;font-size:11px}
  .cd-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:12px;letter-spacing:.06em;
    color:rgba(220,228,255,.6);padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.1);pointer-events:none;transition:opacity .6s}
  .cd-toast{position:absolute;left:50%;top:18%;transform:translate(-50%,10px);text-align:center;pointer-events:none;opacity:0;
    transition:opacity .6s,transform .6s;z-index:4;max-width:80vw}
  .cd-toast.show{opacity:1;transform:translate(-50%,0)}
  .cd-toast small{color:#9fb8ff;letter-spacing:.2em;text-transform:uppercase;font-size:11px}
  .cd-toast div{font-size:clamp(20px,3.4vw,32px);color:#f6d77a;font-weight:600;text-shadow:0 0 24px rgba(242,190,60,.5)}
  .cd-toast p{margin:6px 0 0;color:#c8d2ee;font-size:13px}
  @media (prefers-reduced-motion:reduce){.cd-node.candidate{animation:none}}


  /* ============ FULL-SCREEN TOGGLE ============ */
  :where(body>*:not(#cd-bg):not(#cd-toggle):not(script)){transition:opacity .7s ease,transform .7s cubic-bezier(.6,0,.2,1),filter .7s ease}
  body.cd-full>*:not(#cd-bg):not(#cd-toggle):not(script){opacity:0!important;transform:translateY(-40px) scale(.97);filter:blur(6px);pointer-events:none!important}
  html.cd-full-root{overflow:hidden}
  #cd-toggle{position:fixed;right:calc(14px + env(safe-area-inset-right));top:calc(14px + env(safe-area-inset-top));min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;z-index:2147483000;display:flex;align-items:center;gap:8px;padding:6px;border:1px solid rgba(255,255,255,.14);
    border-radius:99px;background:rgba(6,9,20,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#cfd8f2;cursor:pointer;font:inherit}
  #cd-toggle .trk{width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:background .3s}
  #cd-toggle .trk:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#cfd8f2;transition:transform .35s cubic-bezier(.4,1.4,.5,1),background .3s}
  #cd-toggle[aria-checked="true"] .trk{background:rgba(242,190,60,.55)}
  #cd-toggle[aria-checked="true"] .trk:after{transform:translateX(16px);background:#fff3c4}
  #cd-toggle i{width:16px;text-align:center;font-size:13px;padding-right:4px}
  #cd-toggle:focus-visible{outline:2px solid #f2cf6b;outline-offset:2px}
  @media (prefers-reduced-motion:reduce){body>*:not(#cd-bg){transition:opacity .2s!important}}


  /* ============ LAYERING WITH YOUR SITE ============ */
  html,body{background:#000}
  :where(body>*:not(#cd-bg):not(#cd-toggle):not(script)){position:relative;z-index:1} /* zero specificity: your theme wins */
  /* Add class="cd-pass" to any big wrapper/section so taps fall through to the dots.
     Links, buttons, inputs and .cd-solid elements inside it stay clickable. */
  .cd-pass{pointer-events:none}
  .cd-pass a,.cd-pass button,.cd-pass input,.cd-pass select,.cd-pass textarea,.cd-pass label,.cd-pass .cd-solid{pointer-events:auto}

  /* ============ FULL-SCREEN QUOTE ============ */
  .cd-quote{position:absolute;left:50%;top:50%;width:min(680px,84vw);transform:translate(-50%,-46%);text-align:center;pointer-events:none;z-index:2;
    opacity:0;filter:blur(8px);transition:opacity 1s ease .35s,transform 1.2s cubic-bezier(.2,.8,.2,1) .35s,filter 1s ease .35s}
  .cd-quote p{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(17px,2.3vw,27px);line-height:1.5;color:#eef1fa;text-shadow:0 0 30px rgba(0,0,0,.9)}
  .cd-quote p:before,.cd-quote p:after{color:#f2cf6b}
  .cd-quote p:before{content:"\201C"}.cd-quote p:after{content:"\201D"}
  .cd-quote footer{margin-top:18px;font-size:clamp(11px,1.1vw,13px);letter-spacing:.14em;text-transform:uppercase;color:#9fb3e6}
  .cd-quote footer b{color:#f2cf6b;font-weight:600}
  body.cd-full .cd-quote{opacity:1;filter:none;transform:translate(-50%,-50%)}
  body.cd-full .cd-toast{display:none}
  @media (prefers-reduced-motion:reduce){.cd-quote{transition:opacity .4s}}


  /* ============ SPOTLIGHT STARS ============ */
  .cd-node{--sp:0;isolation:isolate;opacity:max(.5,var(--sp))}
  .cd-node i{position:relative;z-index:1;filter:drop-shadow(0 0 calc(var(--sp) * 9px) rgba(255,232,160,var(--sp)))}
  .cd-node::before{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(255,240,190,.6) 0,rgba(242,190,60,.25) 32%,rgba(90,130,255,.08) 55%,rgba(0,0,0,0) 70%);
    opacity:var(--sp);transform:scale(calc(.55 + var(--sp) * .65))}

  /* ============ DIM WITH CONTENT / BRIGHTEN IN FULL SCREEN ============ */
  /* Change --cd-dim to taste: 0.3 = faint, 0.5 = default, 0.7 = bright */
  :root{--cd-dim:.5}
  #cd-bg{transition:opacity 1s ease,filter 1s ease}
  body:not(.cd-full) #cd-bg{opacity:var(--cd-dim);filter:saturate(.85)}
  body.cd-full #cd-bg{opacity:1;filter:saturate(1.15) brightness(1.1)}
  /* tapped dot still reads clearly while dimmed */
  body:not(.cd-full) .cd-node.current{box-shadow:0 0 30px rgba(242,207,107,.9)}
  @media (prefers-reduced-motion:reduce){#cd-bg{transition:opacity .3s}}