/* Drift's optional neon style, layered over the classic sheets without editing them.
   Classic is the default. Every skin rule is scoped with html.neon, so the Neon / Classic tab (neon.js)
   switches the whole look live; only the tab itself is styled for both looks.
   Look: glitch art, acid graphics and "new ugly" sloppiness. Dark ground, fluorescent ink,
   misregistered print outlines, hand-cut sticker corners, RGB-split type, scanlines and grain.
   Motion stops under prefers-reduced-motion, the discovery "Pause motion" button and the FX switch. */

:root{
  --n-bg:#07050d;--n-bg2:#0e0a19;--n-panel:#0f0b1bf2;--n-line:#2c2442;
  --n-ink:#f5f2ff;--n-dim:#bdb8d6;--n-faint:#8a84a6;
  --n-acid:#c8ff00;--n-pink:#ff2fb9;--n-cyan:#00f0ff;--n-yellow:#fff200;--n-violet:#a259ff;--n-orange:#ff7a1a;
  --n-display:"Avenir Next Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Impact,sans-serif;
  --n-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --n-marker:"Marker Felt","Chalkboard SE","Comic Sans MS",cursive;
  --n-split:-1.5px 0 color-mix(in srgb,var(--n-pink) 90%,transparent),1.5px 0 color-mix(in srgb,var(--n-cyan) 90%,transparent);
}
html.neon{--paper:var(--n-bg);--ink:var(--n-ink);--accent:var(--n-pink);color-scheme:dark}
/* Wide-gamut screens can show colors outside sRGB: this is what makes them read as fluorescent. */
@media (color-gamut:p3){:root{
  --n-acid:color(display-p3 .8 1 0);--n-pink:color(display-p3 1 .12 .74);
  --n-cyan:color(display-p3 0 .96 1);--n-yellow:color(display-p3 1 .97 0);
}}

/* ---------- Ground: grid, glow, scanlines, grain ---------- */
html.neon body{background:var(--n-bg);color:var(--n-ink);accent-color:var(--n-acid);scrollbar-color:var(--n-pink) transparent}
html.neon ::selection{background:var(--n-pink);color:#000}
html.neon button:focus-visible,html.neon a:focus-visible,html.neon input:focus-visible,html.neon textarea:focus-visible,html.neon .node:focus-visible,html.neon summary:focus-visible,html.neon select:focus-visible{outline:2px solid var(--n-acid);outline-offset:3px}
html.neon #canvas{background-color:var(--n-bg);
  background-image:linear-gradient(#ff2fb914 1px,transparent 1px),linear-gradient(90deg,#ff2fb914 1px,transparent 1px),
    linear-gradient(#00f0ff0d 1px,transparent 1px),linear-gradient(90deg,#00f0ff0d 1px,transparent 1px);
  background-size:224px 224px,224px 224px,28px 28px,28px 28px}
html.neon #canvas:before{background:radial-gradient(ellipse 60% 50% at 8% 0%,#ff2fb924,transparent 70%),radial-gradient(ellipse 55% 45% at 100% 100%,#00f0ff1f,transparent 70%),radial-gradient(ellipse at center,transparent 50%,#000a)}
html.neon body::before{content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(180deg,#0000 0 2px,#00000029 2px 3px)}
html.neon body::after{content:"";position:fixed;inset:-60px;z-index:9001;pointer-events:none;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:n-grain .9s steps(1) infinite}

/* ---------- Site links and header ---------- */
html.neon .site-links{background:#05030a;border-bottom:1px solid var(--n-line);color:var(--n-dim);font-family:var(--n-mono)}
html.neon .site-links a{color:var(--n-dim)}
html.neon .site-links a:hover{color:var(--n-acid)}
html.neon .site-links .echohive-link{font-family:var(--n-display);font-weight:800;font-size:21px;letter-spacing:-.3px;color:#fff;text-shadow:var(--n-split)}
html.neon .site-links .service-link{--service-wash:#0b0814;--service-stroke:currentColor;
  border-radius:3px 10px 4px 9px;border-width:1.5px;font:700 11px/1 var(--n-mono);text-transform:uppercase;letter-spacing:.6px;
  box-shadow:3px 3px 0 #000;animation:n-service 9s steps(1) infinite}
html.neon .site-links .service-amplified{--service-ink:var(--n-cyan);--service-accent:var(--n-cyan);rotate:-1.5deg;animation-delay:-1s}
html.neon .site-links .service-lab{--service-ink:var(--n-yellow);--service-accent:var(--n-yellow);rotate:1deg;animation-delay:2s}
html.neon .site-links .service-consulting{--service-ink:var(--n-pink);--service-accent:var(--n-pink);rotate:-.8deg;animation-delay:5s}
html.neon .site-links .service-link:hover,html.neon .site-links .service-link:focus-visible{background:var(--service-accent);color:#000;border-color:var(--service-accent)}
html.neon .site-links .download-app{background:var(--n-acid);color:#000;border:1.5px solid #000;border-radius:2px 9px 3px 8px;font:800 12px/1 var(--n-mono);text-transform:uppercase;letter-spacing:.4px;box-shadow:4px 4px 0 var(--n-pink)}
html.neon .site-links .download-app:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--n-cyan)}
html.neon .site-more>div{background:var(--n-panel);border:1.5px solid var(--n-cyan);border-radius:3px;box-shadow:5px 5px 0 var(--n-pink)}
html.neon .topbar{background:linear-gradient(var(--n-bg) 62%,transparent)}
html.neon .brand{font-family:var(--n-display);font-weight:800;letter-spacing:-1px;color:#fff;text-shadow:var(--n-split)}
html.neon .brand-mark{color:var(--n-acid);text-shadow:0 0 14px var(--n-acid);display:inline-block;animation:n-spin-step 4s steps(8) infinite}
html.neon .brand-caption,html.neon .fixed-guide,html.neon .sidebar-toggle,html.neon .current-subject{color:var(--n-dim);font-family:var(--n-mono)}
html.neon .fixed-guide span{color:var(--n-faint)}
html.neon .current-subject{font-family:var(--n-display);font-weight:700;letter-spacing:.2px;color:#fff}
html.neon .preview-note{color:var(--n-faint);font-family:var(--n-mono);letter-spacing:.2px}
html.neon .preview-note::before{content:"\25CF  ";color:var(--n-pink);animation:n-blink 1.1s steps(1) infinite}

/* ---------- Cards ---------- */
html.neon .node{--neon:var(--n-cyan);--neon-2:var(--n-pink);--tilt:-.6deg}
@supports (color:oklch(from red l c h)){
  html.neon .node{--neon:oklch(from var(--branch-stroke,#84957a) .88 .2 h);--neon-2:oklch(from var(--branch-stroke,#84957a) .7 .26 calc(h + 150))}
}
html.neon .node:nth-child(4n+1){--tilt:.7deg}
html.neon .node:nth-child(4n+2){--tilt:-.9deg}
html.neon .node:nth-child(4n+3){--tilt:.4deg}
html.neon .node{
  background:linear-gradient(170deg,color-mix(in oklab,var(--neon) 13%,#0c0916) 0,#0a0713 55%);
  border:1.5px solid var(--neon);border-top:4px solid var(--neon);
  border-radius:3px 15px 4px 12px / 12px 3px 14px 4px;
  color:var(--n-ink);
  box-shadow:7px 7px 0 -2px var(--neon-2),0 0 0 1px #000,0 0 28px -8px var(--neon);
}
/* A second outline printed slightly off register; it "boils" like hand-drawn animation. */
html.neon .node::before{content:"";position:absolute;inset:-3px;z-index:-1;pointer-events:none;
  border:1.5px solid var(--neon-2);border-radius:13px 3px 11px 4px / 3px 12px 4px 14px;opacity:.85;
  transform:translate(4px,-4px) rotate(var(--tilt));animation:n-boil .48s steps(1) infinite}
html.neon .node:hover{border-color:var(--neon);box-shadow:9px 9px 0 -2px var(--neon-2),0 0 0 1px #000,0 0 40px -6px var(--neon)}
html.neon .node.selected{border-color:var(--neon);box-shadow:8px 8px 0 -2px var(--neon-2),0 0 0 1px #000,0 0 0 5px color-mix(in srgb,var(--neon) 22%,transparent),0 0 52px -4px var(--neon)}
html.neon .node.branch-hub{box-shadow:7px 7px 0 -2px var(--neon-2),0 0 0 1px #000,0 0 0 6px color-mix(in srgb,var(--neon) 14%,transparent),0 0 30px -8px var(--neon)}
html.neon .node-symbol{color:var(--neon);opacity:1;filter:drop-shadow(0 0 5px var(--neon))}
html.neon .node-category{font:800 9px/1.15 var(--n-mono);letter-spacing:.6px;text-transform:uppercase;color:#05030a;background:var(--neon);opacity:1;
  padding:4px 6px 3px;border-radius:1px;box-shadow:2px 2px 0 #000;rotate:calc(var(--tilt) * -2.2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.neon .branch-address{font:700 9px/1 var(--n-mono);color:var(--neon);background:#000;border:1px dashed var(--neon);border-radius:0}
html.neon .node-grip{color:var(--n-faint)}
/* Titles stay crisp at rest: white fill, one hard offset print in the branch's second neon, and a faint glow.
   The RGB split only appears in short bursts (the starting card's flicker and the glitch). */
html.neon .node{--n-title:2px 2px 0 color-mix(in srgb,var(--neon-2) 88%,#000),0 0 14px color-mix(in srgb,var(--neon) 30%,transparent)}
html.neon .node h2{font-family:var(--n-display);font-weight:700;font-size:28px;line-height:1.08;letter-spacing:.25px;color:#fff;text-shadow:var(--n-title)}
html.neon .node-summary{color:#ddd9ef;opacity:1}
html.neon .node-actions{border-top:1px dashed color-mix(in srgb,var(--neon) 45%,transparent)}
html.neon .node-actions button{font:700 10px/1 var(--n-mono);text-transform:uppercase;letter-spacing:.7px;color:var(--n-dim);opacity:1;border-radius:2px}
html.neon .node-actions button:first-child{color:var(--neon)}
html.neon .node-actions button:hover{background:var(--neon);color:#05030a}
html.neon .node-actions button.is-unfolding{background:color-mix(in srgb,var(--neon) 22%,#000);color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon);animation:n-unfold .6s steps(2) infinite}
html.neon .node-actions button.is-unfolding .icon{animation:n-spin-step 1s steps(8) infinite}
html.neon .node-foot{font-family:var(--n-mono);color:var(--n-faint);opacity:1}
html.neon .foot-dot{background:var(--neon);box-shadow:0 0 6px var(--neon)}
html.neon .branch-size,html.neon button.branch-size{color:var(--neon);opacity:1;background:none;font-family:var(--n-mono)}
html.neon .sources-chip,html.neon .research-button.sources-feature{background:#000;color:var(--n-ink);border:1px solid var(--neon);border-radius:2px;font-family:var(--n-mono)}
html.neon .sources-chip:hover,html.neon .research-button.sources-feature:hover{background:var(--neon);color:#000}
html.neon .research-button.sources-feature .full-app-badge{background:var(--n-pink);color:#000;border-radius:1px}
html.neon .research-button{color:var(--neon);border-top-color:color-mix(in srgb,var(--neon) 35%,transparent)}
html.neon .node-detail,html.neon .node-chat{border-top:1px dashed color-mix(in srgb,var(--neon) 45%,transparent)}
html.neon .detail-heading{color:var(--neon);font-family:var(--n-mono)}
html.neon .scroll-area{color:#e4e0f4;scrollbar-color:var(--neon) transparent}
html.neon .sources a{color:var(--n-cyan)}
html.neon .message.user{background:color-mix(in srgb,var(--neon) 16%,#000);color:#fff}
html.neon .message-label{color:var(--neon);font-family:var(--n-mono)}
html.neon .chat-form textarea{background:#000;color:#fff;border:1px solid var(--neon);border-radius:2px}
html.neon .outside-branch{opacity:.2;filter:saturate(.4)}

/* The starting card is the loudest thing on the map. */
html.neon .root-node{--neon:var(--n-acid);--neon-2:var(--n-pink);
  border:3px solid var(--n-acid);border-radius:4px 22px 5px 18px / 18px 4px 20px 5px;
  background:linear-gradient(160deg,#1b2400 0,#0a0713 60%);
  box-shadow:10px 10px 0 -2px var(--n-pink),0 0 0 2px #000,0 0 60px -10px var(--n-acid)}
html.neon .root-node::before{border-color:var(--n-cyan)}
html.neon .root-node{--n-title:3px 3px 0 var(--n-pink),0 0 18px color-mix(in srgb,var(--n-acid) 28%,transparent)}
html.neon .root-node h2{font-weight:800;font-size:38px;text-transform:uppercase;letter-spacing:.4px;line-height:1;--n-rest:var(--n-title);animation:n-split 2.6s steps(1) infinite}
html.neon .root-node .node-symbol{background:var(--n-pink);color:#000;box-shadow:0 0 0 3px #000,0 0 18px var(--n-pink);filter:none}
html.neon .root-node .node-category{background:var(--n-acid);color:#000}
html.neon .root-node .branch-address{background:var(--n-pink);color:#000;border:0}
html.neon .root-node.selected{border-color:var(--n-acid)}

/* Monochrome view: everything in one terminal green. */
html.neon .plain-graph .node{--neon:var(--n-acid)!important;--neon-2:#2b6b00!important}
html.neon .plain-graph .root-node{--neon-2:var(--n-acid)!important}
html.neon .plain-graph #connections .edge{stroke:var(--n-acid)!important}
html.neon .plain-graph #connections .edge-halo{stroke:var(--n-acid)!important}
html.neon .plain-graph #connections circle{fill:var(--n-acid)!important}
html.neon .view-swatch{background:conic-gradient(var(--n-pink) 0 33%,var(--n-cyan) 33% 66%,var(--n-acid) 66%);border-color:#000}
html.neon .plain-graph .view-swatch{background:var(--n-acid)}

/* Loading: a scan bar instead of a breath; slots look like hazard-taped placeholders. */
html.neon .node.busy:after{inset:-3px;border:0;border-radius:inherit;
  background:linear-gradient(180deg,transparent 0 46%,color-mix(in srgb,var(--neon) 55%,transparent) 50%,transparent 54%) 0 0/100% 260% no-repeat;
  animation:n-scan 1.4s steps(14) infinite}
html.neon .node.slot-node{background:repeating-linear-gradient(-45deg,#0b0814 0 14px,color-mix(in srgb,var(--neon) 9%,#0b0814) 14px 28px);
  border:1.5px dashed var(--neon);box-shadow:none}
html.neon .node.slot-node::before{display:none}
html.neon .slot-node:after{background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--neon) 30%,transparent) 50%,transparent 65%) 150% 0/250% 100% no-repeat}
html.neon .slot-line{background:color-mix(in srgb,var(--neon) 30%,transparent);border-radius:0}
html.neon .slot-node .node-foot::after{content:"_";color:var(--neon);animation:n-blink .8s steps(1) infinite}
html.neon .text-skeleton{background:linear-gradient(color-mix(in srgb,var(--neon) 40%,#000) 0 5px,transparent 5px 14px,color-mix(in srgb,var(--neon) 28%,#000) 14px 19px,transparent 19px 28px,color-mix(in srgb,var(--neon) 18%,#000) 28px 33px,transparent 33px);border-radius:0}
html.neon .streaming-text:not(:has(.text-skeleton)):after{width:8px;height:13px;background:var(--neon);opacity:1;animation:n-blink .7s steps(1) infinite}

/* ---------- Connections (colors are assigned per branch by neon.js) ---------- */
html.neon #connections .edge{stroke:var(--edge,var(--n-cyan))!important;opacity:.95;stroke-linecap:round;stroke-dasharray:10 7;animation:n-flow 1.1s linear infinite}
html.neon #connections .edge-deep{stroke-dasharray:3 8}
html.neon #connections .edge-halo{fill:none;stroke:var(--edge,var(--n-cyan))!important;opacity:.16;stroke-linecap:round;pointer-events:none}
html.neon #connections circle{fill:var(--edge,var(--n-cyan))!important}

/* ---------- Discovery ---------- */
html.neon .discovery-center{background:radial-gradient(ellipse,#07050df5 52%,#07050d00 74%)}
html.neon .discovery-center>.eyebrow{font:700 11px/1 var(--n-mono);letter-spacing:2px;color:var(--n-acid)}
html.neon .discovery-center>.eyebrow::before{content:"> "}
html.neon .discovery-center>.eyebrow::after{content:"";display:inline-block;width:.6em;height:1em;margin-left:4px;vertical-align:-2px;background:var(--n-acid);animation:n-blink 1s steps(1) infinite}
html.neon #empty-state h1{font-family:var(--n-display);font-weight:800;text-transform:uppercase;letter-spacing:-1px;line-height:.92;color:#fff;text-shadow:var(--n-split);animation:n-split 3.2s steps(1) infinite}
html.neon #empty-state h1 em{display:inline-block;font-family:var(--n-marker);font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;color:var(--n-acid);
  rotate:-4deg;translate:0 -.06em;padding:0 .12em;text-shadow:3px 3px 0 var(--n-pink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15c40-9 80-10 120-6s90 5 130-3c14-3 30-2 42 1M14 20c60-6 140-7 270-4' fill='none' stroke='%23ff2fb9' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/100% .28em no-repeat}
html.neon #empty-state .discovery-center>p{font-family:var(--n-mono);color:var(--n-dim)}
html.neon #discovery-form{background:#000;border:2px solid var(--n-acid);border-radius:3px 12px 4px 10px;box-shadow:6px 6px 0 var(--n-pink),0 0 34px -10px var(--n-acid)}
html.neon #discovery-form:focus-within{border-color:var(--n-cyan);box-shadow:6px 6px 0 var(--n-pink),0 0 40px -6px var(--n-cyan)}
html.neon #discovery-subject{color:#fff;font-family:var(--n-mono);caret-color:var(--n-pink)}
html.neon #discovery-subject::placeholder{color:var(--n-faint)}
html.neon #discovery-form>button{background:var(--n-pink);color:#000;border-radius:2px 8px 3px 7px;box-shadow:2px 2px 0 #fff}
html.neon #discovery-form>button:hover{background:var(--n-acid)}
html.neon .privacy-row,html.neon .privacy-ack,html.neon .topic-meta,html.neon #topic-counter,html.neon #discovery-count{color:var(--n-dim);font-family:var(--n-mono)}
html.neon .privacy-link,html.neon .privacy-ack a{color:var(--n-cyan)}
html.neon .privacy-hint{color:var(--n-orange);font-family:var(--n-mono)}
html.neon #discovery-filters button{background:#0b0814;color:var(--n-dim);border:1.5px solid var(--n-line);border-radius:2px 7px 2px 6px;font-family:var(--n-mono);text-transform:uppercase;letter-spacing:.5px}
html.neon #discovery-filters button:hover{border-color:var(--n-cyan);color:var(--n-cyan)}
html.neon #discovery-filters button[aria-pressed=true]{background:var(--n-yellow);border-color:#000;color:#000;box-shadow:3px 3px 0 var(--n-pink);rotate:-2deg}
html.neon .discovery-bottom button{color:var(--n-dim);font-family:var(--n-mono);text-transform:uppercase;letter-spacing:.6px}
html.neon .discovery-bottom button:hover{color:var(--n-acid)}
html.neon .discovery-bottom button:first-child{background:#0b0814;border:1.5px solid var(--n-acid);color:var(--n-acid);border-radius:2px 9px 3px 8px;box-shadow:3px 3px 0 var(--n-pink)}
html.neon .discovery-bottom button:first-child:hover{background:var(--n-acid);color:#000}
html.neon #discovery-motion{color:var(--n-faint)}

/* Ideas become hand-cut neon stickers that jitter in stop motion. */
html.neon .idea-blob{--n-hue:oklch(.87 .2 var(--hue));--n-hue2:oklch(.7 .26 calc(var(--hue) + 150));
  background:color-mix(in oklab,var(--n-hue) 10%,#09060f);border:1.5px solid var(--n-hue);color:#fff;
  border-radius:4px 16px 5px 13px / 14px 4px 16px 6px;box-shadow:5px 5px 0 -1px var(--n-hue2),0 0 22px -8px var(--n-hue);
  animation:n-sticker 1.6s steps(1) infinite;animation-delay:var(--delay)}
html.neon .idea-blob:nth-child(3n){border-radius:14px 4px 12px 3px / 4px 15px 5px 12px}
html.neon .idea-blob:nth-child(3n+1){border-radius:3px 3px 18px 4px / 4px 12px 3px 16px}
html.neon .idea-blob span{color:var(--n-hue);font:800 8px/1.2 var(--n-mono);letter-spacing:1px}
html.neon .idea-blob strong{font-family:var(--n-display);font-weight:700;letter-spacing:.1px;color:#fff}
html.neon .idea-blob:hover,html.neon .idea-blob:focus-visible{background:var(--n-hue);border-color:#000;color:#000;box-shadow:6px 6px 0 #000,0 0 30px var(--n-hue);animation-play-state:paused}
html.neon .idea-blob:hover span,html.neon .idea-blob:hover strong,html.neon .idea-blob:focus-visible span,html.neon .idea-blob:focus-visible strong{color:#000}

/* Hazard tape added by neon.js; decorative, hidden from assistive tech, and always behind the ideas. */
html.neon #idea-field{z-index:1}
html.neon .discovery-bottom{z-index:2}
html.neon .n-tape{position:absolute;left:-12%;right:-12%;z-index:0;pointer-events:none;overflow:hidden;white-space:nowrap;
  font:900 12px/1 var(--n-mono);letter-spacing:2px;text-transform:uppercase;padding:7px 0;border-block:2px solid #000}
html.neon .n-tape>span{display:inline-block;padding-left:0;animation:n-marquee 46s linear infinite}
html.neon .n-tape.one{top:62%;background:var(--n-yellow);color:#000;rotate:-3.2deg;box-shadow:0 4px 0 #000}
html.neon .n-tape.two{top:30%;background:var(--n-pink);color:#000;rotate:2.2deg;opacity:.92}
html.neon .n-tape.two>span{animation-direction:reverse;animation-duration:58s}

/* ---------- Map chrome ---------- */
html.neon .canvas-heading .eyebrow,html.neon .eyebrow{color:var(--n-pink);font-family:var(--n-mono)}
html.neon .canvas-heading p{font-family:var(--n-display);font-weight:700;color:var(--n-dim)}
html.neon .canvas-tools,html.neon .zoom-tools,html.neon .branch-navigation button{background:var(--n-panel);border:1.5px solid var(--n-line);border-radius:3px 10px 3px 9px;box-shadow:4px 4px 0 #000}
html.neon .canvas-tools button,html.neon .zoom-tools button,html.neon #zoom-label{color:var(--n-dim);font-family:var(--n-mono)}
html.neon .canvas-tools button:hover,html.neon .zoom-tools button:hover{background:var(--n-acid);color:#000}
html.neon .tool-divider{background:var(--n-line)}
html.neon .layout-switch{background:#000}
html.neon .layout-switch button[aria-pressed=true]{background:var(--n-cyan);color:#000;box-shadow:none}
html.neon .branch-navigation button{color:var(--n-ink);font-family:var(--n-mono)}
html.neon .branch-trail button{border-left:3px solid var(--n-cyan)}
@supports (color:oklch(from red l c h)){html.neon .branch-trail button{border-left-color:oklch(from var(--trail-color,#635d4a) .88 .2 h)}}
html.neon .origin-button strong{color:var(--n-acid)}
html.neon .connection-status,html.neon .bottom-bar .connection-status{color:var(--n-dim);font-family:var(--n-mono);background:#07050dd9}
html.neon .status-dot{background:var(--n-acid);box-shadow:0 0 8px var(--n-acid);animation:n-blink 1.6s steps(1) infinite}
html.neon .offline .status-dot{background:var(--n-orange);box-shadow:0 0 8px var(--n-orange)}
html.neon .privacy-footer-link{color:var(--n-cyan)}
html.neon #neon-fx{pointer-events:auto;flex:none;display:grid;place-items:center;height:34px;min-width:58px;padding:0 9px;
  font:800 10px/1 var(--n-mono);letter-spacing:.8px;color:var(--n-faint);background:#0b0814;
  border:1.5px solid var(--n-line);border-radius:2px 9px 2px 8px;box-shadow:3px 3px 0 #000}
html.neon #neon-fx[aria-pressed=true]{color:var(--n-pink);border-color:var(--n-pink)}
html.neon #neon-fx:hover{background:var(--n-pink);color:#000}

/* Jobs, toast, sidebar, dialogs */
html.neon .job{background:#000d;border:1.5px solid var(--n-acid);border-radius:2px 10px 2px 9px;color:var(--n-ink);box-shadow:5px 5px 0 var(--n-pink);font-family:var(--n-mono)}
html.neon .job strong{color:var(--n-acid);text-transform:uppercase;letter-spacing:.4px}
html.neon .job-message{color:var(--n-dim)}
html.neon .job button{color:var(--n-dim)}
html.neon .orbit-loader{border:2px solid #000;border-top-color:var(--n-pink);border-right-color:var(--n-acid);border-radius:2px;animation:spin .9s steps(6) infinite}
html.neon .toast{background:var(--n-pink);color:#000;font:700 12px/1.5 var(--n-mono);border:2px solid #000;border-radius:2px 12px 3px 10px;box-shadow:6px 6px 0 var(--n-acid);rotate:-1deg}
html.neon .exploration-sidebar{background:#07050dfa;border-right:1.5px solid var(--n-pink);color:var(--n-ink)}
html.neon .sidebar-heading .eyebrow{color:var(--n-acid)}
html.neon .sidebar-heading button,html.neon .exploration-menu summary{color:var(--n-dim)}
html.neon .sidebar-foot{font:11px/1.6 var(--n-mono);color:var(--n-faint)}
html.neon .public-help{color:var(--n-dim)}
html.neon .public-help strong{color:#fff}
html.neon .new-exploration{background:var(--n-acid);color:#000;border:1.5px solid #000;border-radius:2px 10px 3px 9px;box-shadow:4px 4px 0 var(--n-pink);font-family:var(--n-mono);font-weight:700}
html.neon #exploration-search{background:#000;color:#fff;border:1px solid var(--n-line)}
html.neon .saved-exploration{color:var(--n-dim);font-family:var(--n-mono)}
html.neon .exploration-row:hover,html.neon .exploration-row:has([aria-current=page]){background:#ffffff0d}
html.neon .saved-exploration[aria-current=page]{color:#fff}
html.neon .saved-exploration[aria-current=page]:before{background:var(--n-acid)}
html.neon .exploration-menu-options{background:var(--n-panel);border:1px solid var(--n-cyan)}
html.neon .exploration-menu-options button{color:var(--n-ink)}
html.neon .manage-confirmation,html.neon .delete-confirmation{background:#000;border:1.5px solid var(--n-orange);color:var(--n-ink)}
html.neon .dialog,html.neon .download-dialog{background:#0b0814;color:var(--n-ink);border:2px solid var(--n-cyan);border-radius:4px 22px 5px 18px;box-shadow:12px 12px 0 var(--n-pink),0 0 80px -20px var(--n-cyan)}
html.neon .dialog::backdrop,html.neon .download-dialog::backdrop{background:#000c repeating-linear-gradient(180deg,#0000 0 2px,#ffffff08 2px 3px)}
html.neon .dialog h2,html.neon .download-dialog h2{font-family:var(--n-display);font-weight:800;color:#fff;text-shadow:var(--n-split)}
html.neon .dialog>p,html.neon .help-row p,html.neon .download-benefit p,html.neon .download-dialog>p,html.neon #privacy-dialog p{color:#dcd8ee}
html.neon .dialog strong,html.neon .download-benefit strong,html.neon .help-row strong{color:#fff}
html.neon .dialog a,html.neon #privacy-dialog a,html.neon .download-dialog .download-fine a{color:var(--n-cyan)}
html.neon .dialog-close,html.neon .download-dialog .dialog-close{color:var(--n-pink);background:#000;border:1.5px solid var(--n-pink);border-radius:2px 8px 2px 7px}
html.neon .dialog-close:hover,html.neon .download-dialog .dialog-close:hover{background:var(--n-pink);color:#000}
html.neon .download-mark{color:var(--n-acid);text-shadow:0 0 16px var(--n-acid)}
html.neon .download-benefit{background:#000;border:1.5px dashed var(--n-acid);border-radius:3px 12px 4px 10px}
html.neon .download-benefit strong{font-family:var(--n-display);font-weight:800;color:#fff}
html.neon .download-benefit b{color:var(--n-acid)}
html.neon .help-foot{border-top:1px dashed var(--n-line);color:var(--n-faint)}
html.neon .help-row>.icon,html.neon .download-benefit .benefit-icon{color:var(--n-acid)}
html.neon .download-actions a{background:var(--n-acid);color:#000;border:1.5px solid #000;border-radius:2px 10px 3px 9px;box-shadow:4px 4px 0 var(--n-pink);font-family:var(--n-mono);font-weight:800}
html.neon .download-actions button{color:var(--n-dim)}
html.neon .download-dialog .download-fine{color:var(--n-faint)}

/* ---------- Phones: the dock and header keep their layout, only their surfaces change ---------- */
@media(max-width:600px){
  html.neon #neon-fx{height:var(--row,44px);min-width:44px;padding:0 6px;margin:0 auto 0 6px;font-size:9px;letter-spacing:0;box-shadow:none}
  html.neon .sidebar-toggle{margin-right:0}
  html.neon body:not(.discovering) .canvas-heading{max-width:calc(100% - 216px)}
  html.neon .site-links .service-link{font:700 11.5px/1 var(--n-display);text-transform:none;letter-spacing:0;padding:7px 4px;white-space:nowrap}
  html.neon body:not(.discovering) .topbar{background:var(--n-bg);border-bottom:1px solid var(--n-line)}
  html.neon body:not(.discovering) .bottom-bar{background:#07050df7;border-top:1.5px solid var(--n-pink);box-shadow:0 -10px 28px #ff2fb914}
  html.neon body:not(.discovering) .canvas-tools,html.neon body:not(.discovering) .zoom-tools{background:#0b0814;border-color:var(--n-line);border-radius:999px;box-shadow:none}
  html.neon body:not(.discovering) .branch-navigation button{background:#0b0814;border-radius:12px;box-shadow:none}
  html.neon body:not(.discovering) .preview-note,html.neon body:not(.discovering) .canvas-heading p{color:var(--n-dim)}
  html.neon body:not(.discovering) .job-message,html.neon body:not(.discovering) #zoom-label,html.neon body:not(.discovering) .bottom-bar .connection-status{color:var(--n-dim)}
  html.neon body:not(.discovering) .job{box-shadow:3px 3px 0 var(--n-pink)}
  html.neon body:not(.discovering) .status-stack:has(.job+.job)::after{background:var(--n-acid);color:#000;border-color:#000}
  html.neon body:not(.discovering) .toast{rotate:0deg}
  html.neon .node h2{font-size:26px}
  html.neon .root-node h2{font-size:32px}
  html.neon .n-tape{display:none}
}

/* ---------- Classic: everything the skin added steps aside ---------- */
html:not(.neon) .n-tape,html:not(.neon) #neon-fx,html:not(.neon) #connections .edge-halo{display:none!important}

/* ---------- The Neon / Classic tab (added by neon.js); styled for both looks ---------- */
#skin-tab{position:fixed;right:0;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:3px;padding:4px 3px;
  background:#fffdf8f2;border:1px solid #2b28221f;border-right:0;border-radius:10px 0 0 10px;box-shadow:-4px 4px 18px #2b28221a}
#skin-tab button{writing-mode:vertical-rl;rotate:180deg;min-width:28px;padding:10px 4px;border:0;border-radius:7px;cursor:pointer;
  font:600 11px/1 system-ui,sans-serif;letter-spacing:.6px;color:#6b665a;background:none}
#skin-tab button[aria-pressed=true]{background:#2b28221a;color:#2b2822;font-weight:700}
#skin-tab button:focus-visible{outline:2px solid #2b2822;outline-offset:1px}
/* In Classic, Neon is a little lit sign that flickers now and then (three dips in about a second, every ten). */
#skin-tab [data-skin=neon]{--sign-on:0 0 3px #ff2fb9,0 0 10px #ff2fb9,0 0 18px #ff2fb980;--sign-tube:inset 0 0 0 1px #ff2fb980,0 0 16px -3px #ff2fb9aa;
  background:#0d0a16;color:#ff6fd2;font-weight:700;letter-spacing:1px;text-shadow:var(--sign-on);
  box-shadow:var(--sign-tube);animation:n-sign 10s steps(1) 2s infinite}
#skin-tab [data-skin=neon]:hover{color:#fff;--sign-on:0 0 3px #ff2fb9,0 0 12px #ff2fb9,0 0 26px #ff2fb9}
@keyframes n-sign{
  0%,14%,100%{color:#ff6fd2;text-shadow:var(--sign-on);box-shadow:var(--sign-tube)}
  0.8%,4.5%,9%{color:#5c2a50;text-shadow:none;box-shadow:inset 0 0 0 1px #ff2fb933}
  2%,5.5%{color:#ff6fd2;text-shadow:var(--sign-on);box-shadow:var(--sign-tube)}
  10.5%{color:#fff;text-shadow:0 0 4px #ff2fb9,0 0 14px #ff2fb9,0 0 30px #ff2fb9;box-shadow:inset 0 0 0 1px #ff2fb9,0 0 22px -2px #ff2fb9}}
html.neon #skin-tab [data-skin=neon]{animation:none;text-shadow:none;letter-spacing:1px}
html.neon #skin-tab{background:#07050df2;border:1.5px solid var(--n-pink);border-right:0;border-radius:3px 0 0 12px;box-shadow:-4px 4px 0 #000,0 0 26px -8px var(--n-pink)}
html.neon #skin-tab button{font:800 10px/1 var(--n-mono);letter-spacing:1px;text-transform:uppercase;color:var(--n-faint);border-radius:2px}
html.neon #skin-tab button[aria-pressed=true]{background:var(--n-acid);color:#000;box-shadow:2px 2px 0 var(--n-pink)}
html.neon #skin-tab button:hover:not([aria-pressed=true]){background:#ffffff0f;color:var(--n-cyan)}
html:not(.neon) #skin-tab [data-skin=classic]:hover:not([aria-pressed=true]){background:#2b28220f;color:#2b2822}
html.neon #skin-tab button:focus-visible{outline-color:var(--n-acid)}
/* Phones: above the map's dock, or across the empty right side of the discovery header. */
@media(max-width:600px){
  #skin-tab{top:auto;bottom:140px;translate:none}
  #skin-tab button{padding:8px 3px;min-width:24px}
  body.discovering #skin-tab{top:104px;bottom:auto;flex-direction:row}
  body.discovering #skin-tab button{writing-mode:horizontal-tb;rotate:none;padding:9px 10px;min-height:34px}
}
@media print{#skin-tab{display:none}}

/* ---------- Motion ---------- */
@keyframes n-grain{0%{transform:translate(0,0)}20%{transform:translate(-23px,14px)}40%{transform:translate(17px,-31px)}60%{transform:translate(-9px,27px)}80%{transform:translate(29px,6px)}}
@keyframes n-boil{
  0%{transform:translate(4px,-4px) rotate(var(--tilt))}
  33%{transform:translate(3px,-5px) rotate(calc(var(--tilt) + .5deg))}
  66%{transform:translate(5px,-3px) rotate(calc(var(--tilt) - .45deg))}}
@keyframes n-sticker{
  0%{transform:translate(0,0) rotate(-1.4deg)}25%{transform:translate(1px,-1px) rotate(-.6deg)}
  50%{transform:translate(-1px,1px) rotate(-1.9deg)}75%{transform:translate(1px,1px) rotate(-1deg)}}
@keyframes n-split{
  0%,100%{text-shadow:var(--n-rest,var(--n-split))}
  4%{text-shadow:-4px 1px var(--n-pink),3px -1px var(--n-cyan)}
  8%{text-shadow:2px 0 var(--n-pink),-3px 0 var(--n-cyan)}
  12%{text-shadow:var(--n-rest,var(--n-split))}}
@keyframes n-service{0%,6%,35%,100%{background:#0b0814;color:var(--service-ink);border-color:var(--service-ink)}12%,28%{background:var(--service-accent);color:#000;border-color:#000}}
@keyframes n-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes n-spin-step{to{transform:rotate(360deg)}}
@keyframes n-scan{from{background-position:0 100%}to{background-position:0 0}}
@keyframes n-flow{to{stroke-dashoffset:-34}}
@keyframes n-unfold{0%{transform:translate(0,0)}50%{transform:translate(1px,-1px)}}
@keyframes n-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* A burst lasts a third of a second, at most once every couple of seconds, and never flashes the screen. */
html.neon .n-glitch{animation:n-glitch .34s steps(1) 1!important}
@keyframes n-glitch{
  0%{clip-path:inset(0 0 62% 0);translate:-6px 0;filter:hue-rotate(80deg)}
  20%{clip-path:inset(38% 0 22% 0);translate:7px 0;filter:none}
  40%{clip-path:inset(70% 0 4% 0);translate:-3px 0;filter:hue-rotate(-60deg)}
  60%{clip-path:inset(12% 0 50% 0);translate:4px 0;filter:none}
  80%{clip-path:none;translate:-2px 0}
  100%{clip-path:none;translate:0 0;filter:none}}

/* Calm: the FX switch, the discovery Pause button, or the system preference stop every effect.
   Only the skin's own effects are listed, so the app's loaders and dialog entrances keep working. */
html.neon.n-calm body::after,html.neon.n-calm .node::before,html.neon.n-calm .idea-blob,html.neon.n-calm #empty-state h1,html.neon.n-calm .root-node h2,
html.neon.n-calm .brand-mark,html.neon.n-calm #connections .edge,html.neon.n-calm .site-links .service-link,html.neon.n-calm .n-tape>span,
html.neon.n-calm .preview-note::before,html.neon.n-calm .status-dot,html.neon.n-calm .discovery-center>.eyebrow::after,
html.neon .motion-paused .idea-blob{animation-play-state:paused!important}
html.neon.n-calm .n-glitch{animation:none!important}
@media (prefers-reduced-motion:reduce){
  #skin-tab [data-skin=neon]{animation:none}
  html.neon body::after,html.neon .node::before,html.neon .idea-blob,html.neon #empty-state h1,html.neon .root-node h2,html.neon .brand-mark,
  html.neon #connections .edge,html.neon .site-links .service-link,html.neon .n-tape>span,html.neon .n-glitch,html.neon .preview-note::before,html.neon .status-dot,
  html.neon .discovery-center>.eyebrow::after,html.neon .slot-node .node-foot::after,html.neon .node-actions button.is-unfolding,
  html.neon .node-actions button.is-unfolding .icon,html.neon .streaming-text:not(:has(.text-skeleton)):after{animation:none!important}
  html.neon .node.busy:after{animation:none;background:none;border:1.5px solid var(--neon)}
}