:root{--night:#0a0518;--night-2:#150a33;--pink:#ff6ad5;--cyan:#66ecff;--lilac:#b793ff;--gold:#ffd86b;
--ink:#fbedff;--muted:#c5b3e6;--glass:rgba(255,255,255,.055);--glass-line:rgba(255,255,255,.14);
--holo:linear-gradient(110deg,#ff6ad5 0%,#b793ff 38%,#66ecff 68%,#ffd86b 100%);--radius:20px;--maxw:1080px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:"Quicksand",system-ui,sans-serif;font-weight:600;background:var(--night);overflow-x:hidden;line-height:1.65}
.sky,.aurora{position:fixed;inset:0;z-index:-2;pointer-events:none}
.sky{background:radial-gradient(1.6px 1.6px at 12% 22%,#fff,transparent),radial-gradient(1.8px 1.8px at 47% 14%,#d7f6ff,transparent),radial-gradient(2px 2px at 78% 28%,#ffe9fb,transparent),radial-gradient(1.3px 1.3px at 88% 72%,#fff,transparent),radial-gradient(1.6px 1.6px at 38% 92%,#d7f6ff,transparent),linear-gradient(180deg,#0a0518,#160a36 45%,#1d0b3a 70%,#0a0518);background-repeat:no-repeat}
.aurora{z-index:-1;background:radial-gradient(40% 50% at 18% 22%,rgba(255,106,213,.28),transparent 70%),radial-gradient(45% 55% at 82% 30%,rgba(102,236,255,.22),transparent 70%),radial-gradient(50% 50% at 50% 88%,rgba(183,147,255,.26),transparent 70%);filter:blur(10px);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.aurora{animation:none}}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
nav{display:flex;align-items:center;gap:22px;padding:22px;max-width:var(--maxw);margin:0 auto}
nav .brand{font-family:"Unbounded",sans-serif;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:9px;letter-spacing:-.01em}
nav .brand img{width:26px;height:26px;border-radius:7px;display:block}
nav a{color:var(--muted);text-decoration:none;font-size:15px}nav a:hover{color:var(--ink)}nav .sp{flex:1}
.kicker{font-family:"Caveat",cursive;font-size:26px;color:var(--gold);margin:0}
h1{font-family:"Unbounded",sans-serif;font-weight:700;font-size:clamp(34px,6vw,60px);line-height:1.04;margin:.1em 0 .2em;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:18px;max-width:62ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:34px 0}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius);padding:20px;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.card .emoji{font-size:30px}
.card h3{font-family:"Unbounded",sans-serif;font-size:21px;margin:10px 0 4px}
.card .tag{font-family:"Caveat",cursive;font-size:19px;margin:0 0 8px}
.card p{color:var(--muted);font-size:14px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.chip{font-size:12.5px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid var(--glass-line);border-radius:999px;padding:5px 11px}
article{max-width:760px;margin:0 auto;padding:8px 0 40px}
article h2{font-family:"Unbounded",sans-serif;font-size:26px;margin:1.6em 0 .4em;color:var(--ink)}
article h3{font-family:"Unbounded",sans-serif;font-size:20px;margin:1.2em 0 .3em;color:var(--ink)}
article p{font-size:17px;color:#e7d9ff}article a{color:var(--cyan)}
article ul,article ol{color:#e7d9ff}article li{margin:.3em 0}
article code{color:var(--gold);font-family:ui-monospace,monospace;font-size:.92em}
.meta-row{color:var(--muted);font-size:14px;margin:.4em 0 1.4em}
.callout{background:rgba(0,0,0,.22);border:1px solid var(--glass-line);border-left:3px solid var(--cyan);border-radius:12px;padding:14px 16px;margin:1.4em 0;color:var(--muted);font-size:15px}
.callout b{color:var(--ink)}
.cta{display:inline-block;margin-top:8px;background:var(--holo);color:var(--night);font-family:"Unbounded",sans-serif;font-weight:600;text-decoration:none;border-radius:14px;padding:13px 22px;box-shadow:0 8px 26px rgba(183,147,255,.3)}
.relposts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0 0}
.relposts a{display:block;text-decoration:none;color:var(--ink);background:var(--glass);border:1px solid var(--glass-line);border-radius:14px;padding:14px 16px;font-size:15px}
.relposts a:hover{border-color:rgba(255,255,255,.3)}
footer{border-top:1px solid var(--glass-line);margin-top:50px;padding:28px 22px;color:var(--muted);text-align:center;font-size:14px}
footer a{color:var(--muted)}
.backlink{color:var(--muted);text-decoration:none;font-size:14px}.backlink:hover{color:var(--ink)}

/* ---- floating brand + side drawer nav (shared; replaces the old top bar) ---- */
body{padding-top:72px}                 /* clear the fixed brand/menu button */
.brand-fixed{position:fixed;top:22px;left:26px;z-index:60;display:inline-flex;align-items:center;gap:10px;font-family:"Unbounded",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;transition:opacity .45s ease,transform .45s ease}
.brand-fixed img{width:30px;height:30px;border-radius:9px;display:block;box-shadow:0 4px 18px rgba(183,147,255,.45)}
body.scrolled .brand-fixed{opacity:0;transform:translateY(-16px);pointer-events:none}
.menu-btn{position:fixed;top:20px;right:24px;z-index:62;width:52px;height:52px;border-radius:16px;border:1px solid var(--glass-line);background:rgba(20,10,48,.55);backdrop-filter:blur(12px);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.menu-btn:hover{transform:translateY(-2px);border-color:rgba(255,106,213,.55);box-shadow:0 14px 38px rgba(255,106,213,.3)}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s ease,opacity .2s ease}
.menu-btn span+span{margin-top:5px}
body.drawer-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.drawer-open .menu-btn span:nth-child(2){opacity:0}
body.drawer-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scrim{position:fixed;inset:0;z-index:58;background:rgba(6,3,16,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease}
body.drawer-open .scrim{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;z-index:60;height:100%;width:min(320px,86vw);background:linear-gradient(180deg,rgba(30,14,66,.97),rgba(12,6,30,.98));border-left:1px solid var(--glass-line);box-shadow:-30px 0 80px rgba(0,0,0,.5);transform:translateX(106%);transition:transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:96px 26px 28px;gap:2px}
body.drawer-open .drawer{transform:none}
.drawer .dl-kicker{font-family:"Caveat",cursive;font-size:22px;color:var(--gold);transform:rotate(-2deg);margin:0 0 10px 4px}
.drawer a.dnav{font-family:"Unbounded",sans-serif;font-weight:600;font-size:20px;color:var(--ink);text-decoration:none;padding:13px 6px;border-bottom:1px solid rgba(255,255,255,.07);transition:color .15s ease,padding-left .18s ease;display:flex;justify-content:space-between;align-items:center}
.drawer a.dnav:hover{color:var(--pink);padding-left:14px}
.drawer a.dnav .em{opacity:.7;font-size:17px}
.drawer .drawer-cta{margin-top:auto}
.drawer .drawer-cta a{display:block;text-align:center;font-family:"Unbounded",sans-serif;font-weight:600;font-size:16px;color:#1a0526;background:var(--holo);padding:14px;border-radius:14px;text-decoration:none;box-shadow:0 10px 30px rgba(255,106,213,.35)}
.drawer .drawer-foot{margin-top:16px;font-size:12.5px;color:var(--muted);text-align:center}
.drawer .drawer-foot a{color:var(--muted);text-decoration:none}
.drawer .drawer-foot a:hover{color:var(--ink)}
@media (max-width:520px){.brand-fixed{top:18px;left:18px;font-size:17px}.menu-btn{top:16px;right:16px}}

/* --- in-app-webview / mobile OOM hardening (X, Instagram = memory-constrained WKWebViews) ---
   A fixed full-viewport filter:blur aurora + backdrop-filter panels blow past the in-app
   WebContent process budget -> the page flashes then goes white. Drop them on phones and
   paint one cheap body background instead. Content is untouched, just flatter. */
@media (max-width: 900px), (pointer: coarse) {
  .sky, .aurora, .twinkle, .sparkle { display: none !important; }
  body { background:
    radial-gradient(65% 42% at 50% 0%, rgba(183,147,255,.20), transparent 72%),
    linear-gradient(180deg, #0a0518, #160a36 55%, #100826 100%) !important; }
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}