*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0a0a0a;
  --bg-panel:#F6F1E7;
  --bg-card:#EFE8D8;
  --ink:#F6F1E7;
  --ink-soft:#C4BBA8;
  --ink-muted:#7A756C;
  --line:rgba(255,255,255,0.08);
  --coral:#FF5B3A;
  --teal:#0E5C57;
  --teal-bright:#2ED8B6;
  --gold:#F2C94C;
  --purple:#A78BFA;
  --blue:#60A5FA;
  --rose:#FB7185;
  --font-display:'Lato',sans-serif;
  --font-body:'Lato',sans-serif;
  --font-mono:'Lato',sans-serif;
  /* panel (cream) ink */
  --panel-ink:#141414;
  --panel-ink-soft:#3A3A3A;
  --panel-ink-muted:#7A756C;
  --panel-line:#D9CFB8;
}
html{scroll-behavior:smooth;}
body{
  background: #0a0a0a;
  color:var(--ink);
  font-family:var(--font-body);
  overflow:hidden;
  height:100vh;
  width:100vw;
  cursor:none;
}
@media (hover: none) { body { cursor: auto; } .cursor-dot, #trail-canvas { display: none !important; } }
/* Deep-space layers behind the constellation canvas:
   1) starfield SVG  2) very subtle nebula glows */
body::before {
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    url("assets/starfield.svg") center/cover no-repeat,
    radial-gradient(ellipse 1200px 800px at 18% 12%, rgba(48, 64, 120, 0.18), transparent 65%),
    radial-gradient(ellipse 900px 700px at 82% 78%, rgba(110, 50, 130, 0.14), transparent 65%),
    radial-gradient(ellipse 700px 500px at 50% 50%, rgba(14, 92, 87, 0.08), transparent 65%),
    #0a0a0a;
}
/* Pin shared top-nav for blog (overlay over canvas) */
.blog-topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 130; }
.blog-topnav .nav-inner { max-width: none; padding: 14px 32px; }
@media (max-width: 900px) {
  .blog-topnav .nav-inner { padding: 14px 18px; }
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--coral);color:#fff;}

/* ═══ GRAIN OVERLAY ═══ */
body::after{
  content:"";position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:0.5;
}

/* ═══ TOP BAR ═══ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 36px;
  background:linear-gradient(180deg,rgba(9,26,24,0.95) 0%,rgba(9,26,24,0) 100%);
  pointer-events:none;
}
.topbar>*{pointer-events:auto;}
.topbar-brand{
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  letter-spacing:0.3px;
  display:flex;align-items:center;gap:10px;
}
.topbar-brand .topbar-mark{
  width:28px;height:28px;
  background-image:url("assets/sf-bm-logo-mark.png");
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:brightness(1.6);
  flex-shrink:0;
}
.topbar-brand .topbar-word{display:flex;flex-direction:column;gap:1px;}
.topbar-brand .amp{color:var(--coral);font-style:italic;}
.topbar-brand small{
  font-family:var(--font-body);
  font-size:9px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ink-muted);
  font-weight:500;
}
.topbar-nav{display:flex;gap:28px;list-style:none;}
.topbar-nav a{
  font-size:12px;font-weight:500;
  letter-spacing:0.5px;color:var(--ink-soft);
  transition:color .25s;
}
.topbar-nav a:hover,.topbar-nav a.active{color:var(--ink);}
.topbar-back{
  font-size:12px;font-weight:500;
  color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;
  transition:color .25s;
}
.topbar-back:hover{color:var(--ink);}
.topbar-toggle{
  display:none;
  width:36px;height:36px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;cursor:pointer;
}
.topbar-toggle span{
  display:block;width:16px;height:1.5px;
  background:var(--ink);position:relative;
  transition:background .3s ease;
}
.topbar-toggle span::before,.topbar-toggle span::after{
  content:"";position:absolute;left:0;
  width:100%;height:1.5px;background:var(--ink);
  transition:transform .3s ease,top .3s ease;
}
.topbar-toggle span::before{top:-5px;}
.topbar-toggle span::after{top:5px;}
.topbar-toggle.is-open span{background:transparent;}
.topbar-toggle.is-open span::before{top:0;transform:rotate(45deg);}
.topbar-toggle.is-open span::after{top:0;transform:rotate(-45deg);}

/* ═══ CANVAS ═══ */
#constellation-canvas{
  position:fixed;inset:0;z-index:0;
}

/* ═══ HEADER OVERLAY ═══ */
.hero-overlay{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  z-index:10;
  pointer-events:none;
  transition:opacity .6s ease,transform .6s ease;
  width: 90vw;
}
.hero-overlay.hidden{opacity:0;transform:translate(-50%,-45%);pointer-events:none;}
.hero-overlay h1{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,62px);
  font-weight:300;
  line-height:1.1;
  letter-spacing:-0.5px;
  margin-bottom:14px;
}
.hero-overlay h1 em{font-style:normal;color:var(--coral);}
.hero-overlay p{
  font-size:16px;color:var(--ink-soft);
  max-width:44ch;margin:0 auto 28px;
  line-height:1.6;
}
.hero-overlay .enter-btn{
  pointer-events:auto;
  font-family:var(--font-display);
  font-size:13px;font-weight:400;
  letter-spacing:1.8px;text-transform:uppercase;
  padding:14px 36px;
  background:transparent;
  border:1px solid var(--coral);
  color:var(--coral);
  border-radius:999px;
  cursor:pointer;
  transition:all .3s ease;
}
.hero-overlay .enter-btn:hover{
  background:var(--coral);color:#fff;
  box-shadow:0 0 40px rgba(255,91,58,0.3);
}

/* ═══ COMING SOON OVERLAY ═══ */
.coming-soon{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  opacity:0;
  transition:opacity .8s ease;
}
.coming-soon.visible{opacity:1;pointer-events:auto;}

/* nebula radial pulse behind text */
.coming-soon::before{
  content:"";
  position:absolute;left:50%;top:50%;
  width:900px;height:900px;max-width:140vw;max-height:140vw;
  transform:translate(-50%,-50%) scale(.6);
  background:
    radial-gradient(circle at center,
      rgba(255,91,58,0.18) 0%,
      rgba(255,91,58,0.08) 22%,
      rgba(96,165,250,0.06) 42%,
      rgba(167,139,250,0.04) 60%,
      transparent 72%);
  filter:blur(20px);
  opacity:0;
  transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.coming-soon.visible::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  animation:cs-pulse 7s ease-in-out infinite 1s;
}
@keyframes cs-pulse{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
}

.cs-inner{
  position:relative;
  text-align:center;
  padding:60px 40px;
  max-width:680px;
}

/* orbit rings around title — sized to circle the whole composition */
.cs-orbit{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:780px;height:780px;
  max-width:92vw;max-height:92vw;
  pointer-events:none;
  opacity:0;
  transition:opacity 1s ease .4s;
}
.coming-soon.visible .cs-orbit{opacity:1;}
.cs-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:1px solid rgba(255,91,58,0.18);
}
.cs-ring--2{
  inset:10%;
  border-color:rgba(96,165,250,0.14);
  border-style:dashed;
}
.cs-ring--3{
  inset:20%;
  border-color:rgba(255,255,255,0.05);
}
.coming-soon.visible .cs-ring{animation:cs-spin 60s linear infinite;}
.coming-soon.visible .cs-ring--2{animation:cs-spin 90s linear infinite reverse;}
.coming-soon.visible .cs-ring--3{animation:cs-spin 40s linear infinite;}
@keyframes cs-spin{to{transform:rotate(360deg);}}

/* orbiting dots */
.cs-orbit-dot{
  position:absolute;left:50%;top:0;
  width:6px;height:6px;border-radius:50%;
  background:var(--coral);
  margin-left:-3px;margin-top:-3px;
  box-shadow:0 0 12px rgba(255,91,58,0.9),0 0 28px rgba(255,91,58,0.5);
  transform-origin:3px 390px;
}
.cs-orbit-dot--2{
  background:#60A5FA;
  box-shadow:0 0 10px rgba(96,165,250,0.9),0 0 24px rgba(96,165,250,0.4);
  transform-origin:3px 312px;
  left:50%;top:10%;
}
.cs-orbit-dot--3{
  width:4px;height:4px;margin-left:-2px;margin-top:-2px;
  background:#FFD27A;
  box-shadow:0 0 8px rgba(255,210,122,0.9);
  transform-origin:2px 234px;
  left:50%;top:20%;
}
.coming-soon.visible .cs-orbit-dot{animation:cs-orbit 14s linear infinite;}
.coming-soon.visible .cs-orbit-dot--2{animation:cs-orbit 22s linear infinite reverse;}
.coming-soon.visible .cs-orbit-dot--3{animation:cs-orbit 9s linear infinite;}
@keyframes cs-orbit{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* eyebrow */
.cs-eyebrow{
  font-family:var(--font-display);
  font-size:11px;font-weight:600;
  letter-spacing:6px;text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:22px;
  opacity:0;transform:translateY(8px);
  transition:opacity .8s ease .3s, transform .8s ease .3s;
}
.cs-eyebrow .cs-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--coral);vertical-align:middle;
  margin:0 12px 2px;
  box-shadow:0 0 10px rgba(255,91,58,0.9);
  animation:cs-blink 1.8s ease-in-out infinite;
}
@keyframes cs-blink{
  0%,100%{opacity:.3;transform:scale(.8);}
  50%{opacity:1;transform:scale(1.2);}
}
.coming-soon.visible .cs-eyebrow{opacity:1;transform:translateY(0);}

/* title with letter-by-letter reveal */
.cs-title{
  font-family:var(--font-display);
  font-size:clamp(48px,9vw,108px);
  font-weight:200;
  letter-spacing:-1.5px;
  line-height:1;
  color:var(--ink);
  display:flex;justify-content:center;flex-wrap:wrap;
  margin-bottom:26px;
  position:relative;
}
.cs-title .cs-word{display:inline-flex;}
.cs-title .cs-word + .cs-word{margin-left:.32em;}
.cs-title .cs-char{
  display:inline-block;
  opacity:0;
  transform:translateY(24px);
  filter:blur(8px);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1),
    filter .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(.5s + var(--i,0) * .06s);
}
.coming-soon.visible .cs-char{
  opacity:1;transform:translateY(0);filter:blur(0);
}
.cs-title .cs-char--accent{
  color:var(--coral);font-style:italic;font-weight:300;
  text-shadow:0 0 24px rgba(255,91,58,0.5),0 0 60px rgba(255,91,58,0.25);
}

/* shimmer sweep across title */
.cs-title::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,
    transparent 0%, transparent 40%,
    rgba(246,241,231,0.18) 50%,
    transparent 60%, transparent 100%);
  background-size:240% 100%;
  background-position:-120% 0;
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:0;
}
.coming-soon.visible .cs-title::after{
  opacity:1;
  animation:cs-shimmer 4.5s ease-in-out infinite 2s;
}
@keyframes cs-shimmer{
  0%{background-position:-120% 0;}
  60%,100%{background-position:220% 0;}
}

/* hairline beneath title */
.cs-line{
  width:0;height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,91,58,0.7) 50%,
    transparent);
  margin:0 auto 26px;
  transition:width 1.6s cubic-bezier(.2,.7,.2,1) 1.4s;
}
.coming-soon.visible .cs-line{width:320px;max-width:60%;}

.cs-sub{
  font-size:15px;line-height:1.7;
  color:var(--ink-soft);
  max-width:46ch;margin:0 auto 36px;
  opacity:0;transform:translateY(8px);
  transition:opacity .8s ease 1.6s, transform .8s ease 1.6s;
}
.coming-soon.visible .cs-sub{opacity:1;transform:translateY(0);}

.cs-meta{
  display:flex;justify-content:center;gap:28px;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;
  color:var(--ink-muted);
  margin-bottom:36px;
  opacity:0;
  transition:opacity .8s ease 1.9s;
}
.coming-soon.visible .cs-meta{opacity:1;}
.cs-meta .cs-meta-item{display:flex;align-items:center;gap:8px;}
.cs-meta .cs-meta-num{color:var(--coral);font-weight:600;}

.cs-back{
  pointer-events:auto;
  font-family:var(--font-display);
  font-size:12px;font-weight:400;
  letter-spacing:2px;text-transform:uppercase;
  padding:13px 32px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  color:var(--ink-soft);
  border-radius:999px;
  cursor:pointer;
  transition:all .35s ease;
  opacity:0;transform:translateY(8px);
  transition:opacity .8s ease 2.1s, transform .8s ease 2.1s,
             border-color .35s ease, color .35s ease,
             background .35s ease, box-shadow .35s ease;
}
.coming-soon.visible .cs-back{opacity:1;transform:translateY(0);}
.cs-back:hover{
  border-color:var(--coral);
  color:var(--coral);
  box-shadow:0 0 30px rgba(255,91,58,0.15);
}
.cs-back .cs-arrow{
  display:inline-block;margin-right:8px;
  transition:transform .35s ease;
}
.cs-back:hover .cs-arrow{transform:translateX(-4px);}

/* ═══ FILTER BAR ═══ */
.filter-bar{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%);
  z-index:80;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:rgba(9,26,24,0.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-radius:999px;
  opacity:0;transition:opacity .5s ease;
}
.filter-bar.visible{opacity:1;}
.filter-pill{
  font-family:var(--font-body);
  font-size:11px;font-weight:600;
  letter-spacing:0.5px;
  padding:7px 16px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--ink-soft);
  background:transparent;
  cursor:pointer;
  transition:all .25s ease;
  white-space:nowrap;
}
.filter-pill:hover{color:var(--ink);border-color:rgba(255,255,255,0.12);}
.filter-pill.active{color:#fff;border-color:transparent;}
.filter-pill.active[data-cat="all"]{background:rgba(255,255,255,0.12);color:var(--ink);}
.filter-pill.active[data-cat="connections"]{background:var(--coral);color:#fff;}
.filter-pill.active[data-cat="loads"]{background:var(--gold);color:#000;}
.filter-pill.active[data-cat="analysis"]{background:var(--purple);color:#fff;}
.filter-pill.active[data-cat="history"]{background:var(--blue);color:#fff;}
.filter-pill.active[data-cat="software"]{background:var(--teal-bright);color:#000;}
.filter-pill.active[data-cat="design"]{background:var(--rose);color:#fff;}

/* ═══ SEARCH ═══ */
.search-box{
  position:fixed;top:90px;right:24px;z-index:101;
  opacity:0;transition:opacity .5s ease;
}
.search-box.visible{opacity:1;}
.search-box input{
  font-family:var(--font-body);
  font-size:13px;font-weight:400;
  padding:9px 18px 9px 36px;
  width:220px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  color:var(--ink);
  outline:none;
  transition:all .3s ease;
}
.search-box input::placeholder{color:var(--ink-muted);}
.search-box input:focus{
  border-color:rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.07);
  width:280px;
}
.search-box .search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;
  stroke:var(--ink-muted);fill:none;stroke-width:2;
}

/* ═══ NODE TOOLTIPS ═══ */
.node-tooltip{
  position:fixed;z-index:90;
  background:rgba(9,26,24,0.94);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:18px 22px;
  max-width:300px;
  pointer-events:none;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease;
}
.node-tooltip.visible{opacity:1;transform:translateY(0);}
.node-tooltip .tt-cat{
  font-size:9px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  margin-bottom:6px;
}
.node-tooltip h3{
  font-family:var(--font-display);
  font-size:17px;font-weight:700;
  line-height:1.25;letter-spacing:0;
  margin-bottom:8px;
}
.node-tooltip p{
  font-size:13px;line-height:1.55;
  color:var(--ink-soft);
}
.node-tooltip .tt-depth{
  margin-top:10px;
  display:flex;gap:4px;align-items:center;
}
.node-tooltip .tt-depth .dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,0.15);
}
.node-tooltip .tt-depth .dot.filled{background:var(--coral);}
.node-tooltip .tt-depth span{
  font-size:10px;color:var(--ink-muted);
  margin-left:4px;letter-spacing:0.5px;
}

/* ═══ ARTICLE PANEL ═══ */
.article-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(640px,90vw);
  z-index:200;
  background:var(--bg-panel);
  color:var(--panel-ink);
  border-left:1px solid var(--panel-line);
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  overflow-x:hidden;
}
.article-panel.open{transform:translateX(0);}
.article-panel-backdrop{
  position:fixed;inset:0;z-index:199;
  background:rgba(0,0,0,0.5);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
.article-panel-backdrop.visible{opacity:1;pointer-events:auto;}

.ap-close{
  position:sticky;top:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;
  background:linear-gradient(180deg,var(--bg-panel) 60%,transparent);
  z-index:5;
}
.ap-close-btn{
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(0,0,0,0.05);
  border:1px solid var(--panel-line);
  color:var(--panel-ink-soft);
  display:grid;place-items:center;
  cursor:pointer;font-size:18px;
  transition:all .2s;
}
.ap-close-btn:hover{background:rgba(0,0,0,0.1);color:var(--panel-ink);}
.ap-cat-badge{
  font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;
}

.ap-hero{padding:0 36px 36px;}
.ap-hero h1{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,40px);
  font-weight:300;line-height:1.15;
  letter-spacing:-0.3px;
  color:var(--panel-ink);
  margin-bottom:14px;
}
.ap-hero h1 em{font-style:italic;font-weight:300;color:var(--coral);}
.ap-hero .ap-lead{
  font-size:16px;line-height:1.7;
  color:var(--panel-ink-soft);max-width:52ch;
}
.ap-hero .ap-meta{
  margin-top:16px;
  display:flex;gap:16px;align-items:center;
  font-size:12px;color:var(--panel-ink-muted);
}
.ap-hero .ap-meta strong{color:var(--panel-ink);font-weight:700;}

.ap-body{padding:0 36px 60px;}
.ap-body h2{
  font-family:var(--font-display);
  font-size:22px;font-weight:700;
  letter-spacing:0;
  color:var(--panel-ink);
  margin:40px 0 14px;
}
.ap-body h2:first-child{margin-top:0;}
.ap-body p{
  font-size:15px;line-height:1.8;
  color:var(--panel-ink-soft);margin-bottom:16px;
}
.ap-body p em{color:var(--panel-ink);font-style:italic;}
.ap-body .formula{
  background:#FFFFFF;
  border-left:3px solid var(--coral);
  padding:18px 22px;
  border-radius:0 10px 10px 0;
  margin:20px 0;
  font-family:var(--font-mono);
  font-size:14px;line-height:1.9;
  color:var(--panel-ink);
}
.ap-body .insight{
  background:rgba(14,92,87,0.06);
  border:1px solid rgba(14,92,87,0.18);
  border-radius:12px;
  padding:20px 24px;margin:24px 0;
}
.ap-body .insight .insight-label{
  font-family:var(--font-display);
  font-size:10px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;
  color:var(--teal);margin-bottom:8px;
}
.ap-body .insight p{color:var(--teal);margin:0;}

/* Interactive tool area */
.ap-tool{
  background:#FFFFFF;
  border:1px solid var(--panel-line);
  border-radius:14px;
  overflow:hidden;
  margin:24px 0;
}
.ap-tool-bar{
  display:flex;gap:14px;align-items:center;
  padding:14px 20px;
  background:rgba(0,0,0,0.02);
  border-bottom:1px solid var(--panel-line);
  flex-wrap:wrap;
}
.ap-tool-bar label{
  font-size:12px;font-weight:400;color:var(--panel-ink-soft);
  display:flex;align-items:center;gap:8px;
}
.ap-tool-bar input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100px;height:3px;
  background:var(--panel-line);
  border-radius:2px;outline:none;
}
.ap-tool-bar input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--coral);cursor:pointer;
}
.ap-tool-bar .val{
  font-family:var(--font-mono);font-size:12px;
  font-weight:600;color:var(--coral);min-width:40px;
}
.ap-tool-bar select{
  font-family:var(--font-body);font-size:12px;
  padding:5px 10px;background:#FFFFFF;
  border:1px solid var(--panel-line);
  border-radius:8px;color:var(--panel-ink);cursor:pointer;
}
.ap-tool canvas{width:100%;height:360px;display:block;}
.ap-tool-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--panel-line);
}
.ap-tool-stats>div{
  background:#FFFFFF;
  padding:14px;text-align:center;
}
.ap-tool-stats .s-label{
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--panel-ink-muted);font-weight:700;
}
.ap-tool-stats .s-val{
  font-family:var(--font-mono);font-size:18px;
  font-weight:600;color:var(--panel-ink);margin-top:4px;
}
.ap-tool-stats .s-val .u{font-size:10px;color:var(--panel-ink-muted);font-weight:400;}

.ap-refs{
  padding:28px 36px;
  border-top:1px solid var(--panel-line);
}
.ap-refs h3{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--panel-ink-muted);font-weight:700;margin-bottom:10px;
}
.ap-refs p{font-size:13px;line-height:1.7;color:var(--panel-ink-muted);}

/* ═══ COUNT BADGE ═══ */
.count-badge{
  position:fixed;bottom:28px;right:36px;z-index:80;
  font-family:var(--font-mono);font-size:12px;
  color:var(--ink-muted);letter-spacing:0.5px;
  opacity:0;transition:opacity .5s;
}
.count-badge.visible{opacity:1;}
.count-badge strong{color:var(--ink);font-weight:600;}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
  .article-panel { width: 88vw; max-width: 720px; }
}
@media (max-width: 768px) {
  .search-box { right: 16px; top: 84px; }
  .search-box input { width: 200px; }
  .search-box input:focus { width: 240px; }
  .filter-bar {
    bottom: 14px; left: 12px; right: 12px;
    transform: none; overflow-x: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 24px);
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-pill { flex: 0 0 auto; min-height: 40px; }
  .article-panel { width: 100vw; }
  .ap-close { padding: 16px 20px; }
  .ap-hero { padding: 0 22px 28px; }
  .ap-body { padding: 0 22px 44px; }
  .ap-refs { padding: 24px 22px; }
  .ap-hero .ap-meta { flex-wrap: wrap; gap: 8px 12px; }
  .ap-body .formula { overflow-x: auto; white-space: normal; word-break: break-word; }
  .ap-tool-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-overlay h1 { font-size: clamp(38px, 10vw, 64px); }
  .hero-overlay p { font-size: 14px; }
}
@media (max-width: 480px) {
  .search-box { right: 12px; top: 78px; }
  .search-box input { width: 160px; }
  .search-box input:focus { width: 200px; }
  .filter-bar { padding: 8px; gap: 6px; }
  .filter-pill { padding: 8px 10px; font-size: 11px; min-height: 40px; }
  .ap-hero h1 { font-size: clamp(25px, 8vw, 34px); letter-spacing: 0; }
  .ap-hero .ap-lead,
  .ap-body p { font-size: 14px; line-height: 1.7; }
  .ap-tool-bar { align-items: flex-start; flex-direction: column; }
  .ap-tool-bar input[type="range"] { width: 100%; }
  .ap-tool canvas { height: 280px; }
}