*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#06060a;
  --surface:#0d0d14;
  --surface2:#13131f;
  --border:#1e1e30;
  --border2:#2a2a40;
  --text:#e2e8f0;
  --text2:#cbd5e1;
  --muted:#64748b;
  --primary:#6366f1;
  --primary-dim:#4f46e5;
  --accent:#22d3ee;
  --success:#10b981;
  --danger:#ef4444;
  --code-bg:#0f0f1a;
  --max:740px;
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
  --mono:'SF Mono','Cascadia Code','Fira Code','JetBrains Mono',Consolas,monospace;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text2);
  line-height:1.75;
  font-size:17px;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--primary);color:#fff}

/* --- Header --- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(6,6,10,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.site-header.hidden{transform:translateY(-100%)}
.header-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
}
.header-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.05rem;color:var(--text);
  text-decoration:none;
}
.header-brand svg{width:28px;height:28px;flex-shrink:0}
.header-nav{display:flex;align-items:center;gap:20px}
.header-nav a{
  font-size:.88rem;color:var(--muted);font-weight:500;
  transition:color .2s;
}
.header-nav a:hover{color:var(--text)}
.gh-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border);
  font-size:.85rem;color:var(--text2);font-weight:500;
  transition:border-color .2s,background .2s;
}
.gh-link:hover{border-color:var(--primary);background:rgba(99,102,241,.08);color:var(--text)}
.gh-link svg{width:16px;height:16px}

/* --- Hero --- */
.hero{
  padding:140px 24px 60px;
  max-width:var(--max);margin:0 auto;
  text-align:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:99px;
  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);
  font-size:.8rem;color:var(--primary);font-weight:600;
  margin-bottom:24px;letter-spacing:.02em;
}
.hero-badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--success);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{
  font-size:clamp(2rem,5vw,3rem);
  font-weight:800;line-height:1.15;
  color:var(--text);margin-bottom:20px;
  letter-spacing:-.02em;
}
.hero h1 .gradient{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero .lead{
  font-size:1.15rem;color:var(--muted);
  max-width:560px;margin:0 auto 32px;line-height:1.7;
}
.hero-meta{
  display:flex;align-items:center;justify-content:center;gap:20px;
  font-size:.85rem;color:var(--muted);
}
.hero-meta span{display:flex;align-items:center;gap:5px}

/* --- Article --- */
.article{
  max-width:var(--max);margin:0 auto;
  padding:0 24px 80px;
}
.article h2{
  font-size:1.55rem;font-weight:700;color:var(--text);
  margin:56px 0 20px;letter-spacing:-.01em;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.article h3{
  font-size:1.15rem;font-weight:600;color:var(--text);
  margin:36px 0 14px;
}
.article p{margin-bottom:18px;color:var(--text2)}
.article ul,.article ol{margin:0 0 20px 20px;color:var(--text2)}
.article li{margin-bottom:8px}
.article li strong{color:var(--text)}
.article strong{color:var(--text)}
.article blockquote{
  margin:28px 0;padding:18px 24px;
  border-left:3px solid var(--primary);
  background:var(--surface);
  border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;color:var(--text);
  font-size:1.05rem;
}

/* --- Code Blocks --- */
.article pre{
  margin:20px 0 24px;padding:20px 24px;
  background:var(--code-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow-x:auto;
  font-size:.88rem;line-height:1.65;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
}
.article code{
  font-family:var(--mono);
  font-size:.88em;
}
.article p code,.article li code{
  background:var(--surface2);
  padding:2px 7px;border-radius:5px;
  border:1px solid var(--border);
  font-size:.85em;color:var(--accent);
}
.article pre code{
  color:var(--text2);
  background:none;padding:0;border:none;
}

/* --- Danger Box --- */
.danger-box{
  margin:28px 0;padding:18px 24px;
  border-left:3px solid var(--danger);
  background:rgba(239,68,68,.05);
  border-radius:0 var(--radius) var(--radius) 0;
}
.danger-box strong{color:var(--danger)}

/* --- Architecture Diagram --- */
.arch-diagram{
  margin:32px 0;padding:28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.arch-flow{
  display:flex;align-items:center;justify-content:center;
  gap:8px;flex-wrap:wrap;
  font-size:.88rem;font-weight:600;
}
.arch-step{
  padding:10px 18px;border-radius:8px;
  background:var(--surface2);border:1px solid var(--border2);
  color:var(--text);text-align:center;
  min-width:120px;
}
.arch-step.highlight{
  background:rgba(99,102,241,.12);
  border-color:var(--primary);
  color:var(--primary);
}
.arch-step.secure{
  background:rgba(16,185,129,.1);
  border-color:var(--success);
  color:var(--success);
}
.arch-arrow{color:var(--muted);font-size:1.2rem;flex-shrink:0}

/* --- Paywall Barrier --- */
.paywall-zone{position:relative}
.paywall-fade{
  height:180px;
  background:linear-gradient(to bottom,transparent,var(--bg));
  pointer-events:none;
  margin-top:-180px;
  position:relative;z-index:2;
}
.paywall-barrier{
  position:relative;z-index:3;
  text-align:center;
  padding:56px 24px 64px;
  margin:0 -24px;
}
.paywall-barrier::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(34,211,238,.04));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.paywall-lock{
  width:56px;height:56px;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(99,102,241,.1);
  border:2px solid rgba(99,102,241,.3);
  position:relative;
}
.paywall-lock svg{width:24px;height:24px;color:var(--primary)}
.paywall-lock::after{
  content:'';position:absolute;inset:-6px;
  border-radius:50%;
  border:1px solid rgba(99,102,241,.15);
  animation:lock-pulse 3s ease-in-out infinite;
}
@keyframes lock-pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:0}}
.paywall-barrier h2{
  font-size:1.3rem;font-weight:700;color:var(--text);
  margin-bottom:10px;border:none;padding:0;
  position:relative;
}
.paywall-barrier .paywall-desc{
  color:var(--muted);font-size:.95rem;
  max-width:420px;margin:0 auto 28px;
}
.paywall-price{
  font-size:2.2rem;font-weight:800;color:var(--text);
  margin-bottom:6px;position:relative;
}
.paywall-price-note{
  font-size:.82rem;color:var(--muted);
  margin-bottom:28px;
}
#paypal-button-container{
  max-width:320px;margin:0 auto;
  position:relative;
}
.paywall-trust{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:24px;font-size:.78rem;color:var(--muted);
}
.paywall-trust span{display:flex;align-items:center;gap:4px}
.paywall-trust svg{width:14px;height:14px;opacity:.6}

/* --- Premium Content (after unlock) --- */
#premium-content{display:none}
#premium-content.visible{display:block;animation:fadeUp .6s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.unlock-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:99px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3);
  color:var(--success);font-size:.82rem;font-weight:600;
  margin-bottom:24px;
}
.three-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin:28px 0;
}
.pillar{
  padding:24px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);
}
.pillar-num{
  font-size:.75rem;font-weight:700;color:var(--primary);
  letter-spacing:.1em;margin-bottom:10px;
}
.pillar h4{font-size:1rem;color:var(--text);margin-bottom:8px}
.pillar p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}
.conclusion-box{
  margin:32px 0;padding:24px 28px;
  background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(34,211,238,.05));
  border:1px solid rgba(99,102,241,.2);
  border-radius:var(--radius);
}
.conclusion-box p{color:var(--text);margin-bottom:10px}
.conclusion-box p:last-child{margin-bottom:0;color:var(--muted)}
.checklist{
  display:flex;flex-direction:column;gap:8px;
  margin:16px 0 24px;padding:20px 24px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);
}
.checklist label{
  display:flex;align-items:center;gap:10px;
  font-size:.9rem;color:var(--text2);
  cursor:default;
}
.checklist input[type="checkbox"]{
  accent-color:var(--success);
  width:16px;height:16px;
}

/* --- Sandbox Notice --- */
.sandbox-notice{
  margin:20px 0;padding:14px 18px;
  background:rgba(234,179,8,.06);
  border:1px solid rgba(234,179,8,.2);
  border-radius:var(--radius);
  font-size:.85rem;color:#eab308;
  text-align:center;
}

/* --- Footer --- */
.site-footer{
  border-top:1px solid var(--border);
  padding:32px 24px;
  text-align:center;
  font-size:.82rem;color:var(--muted);
}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}

/* --- Responsive --- */
@media(max-width:768px){
  .hero{padding:120px 20px 48px}
  .hero h1{font-size:1.75rem}
  .hero .lead{font-size:1rem}
  .hero-meta{flex-wrap:wrap;gap:12px}
  .article{padding:0 20px 60px}
  .article h2{font-size:1.3rem;margin-top:44px}
  .article pre{padding:16px;font-size:.82rem}
  .arch-flow{flex-direction:column}
  .arch-arrow{transform:rotate(90deg)}
  .three-pillars{grid-template-columns:1fr}
  .paywall-price{font-size:1.8rem}
  .header-nav .nav-link-text{display:none}
}
@media(max-width:480px){
  .hero h1{font-size:1.5rem}
  .paywall-barrier{padding:40px 16px 48px}
  .paywall-trust{flex-direction:column;gap:8px}
}