:root{
  --pink:#f0adb8; --hot:#f4a1b0; --blush:#fbe3e8; --mist:#fff6f8; --ink:#141012; --muted:#6d5a60;
  --panel:rgba(255,255,255,.55); --edge:rgba(20,16,18,.9); --glow:rgba(240,173,184,.6);
  --hi:linear-gradient(180deg,#f9b3c2,#e8718c);
  --tab:rgba(226,100,130,.3);
  --rail:#e8718c; --cyan:#65f8ff; --mag:#ff65d8; --rule:rgba(20,16,18,.28);
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --font:"Chakra Petch","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:500;color:var(--ink);min-height:100vh;
  background:radial-gradient(ellipse at 20% 0%,#ffeef2 0,#fbe3e8 45%,#f6d3db 100%) fixed;overflow-x:hidden}
a{color:inherit}
.web{position:fixed;inset:0;z-index:-2;opacity:.55;
  background:
   repeating-conic-gradient(from 0deg at 50% 115%,transparent 0 6deg,rgba(240,173,184,.38) 6deg 6.4deg),
   repeating-radial-gradient(circle at 50% 115%,transparent 0 70px,rgba(240,173,184,.32) 70px 71px)}
.orb{position:fixed;width:46vmax;height:46vmax;right:-14vmax;top:-12vmax;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(255,255,255,.9),var(--glow) 55%,transparent 70%);filter:blur(10px)}
/* static scanlines, kept faint so text stays crisp */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(20,16,18,.035) 0 1px,transparent 1px 3px)}

/* ---------- bevel: cut-corner panels with a thin ink edge ---------- */
.bevel{--c:14px;--bg:var(--panel);position:relative;background:var(--bg);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
/* straight edges: masked ring */
.bevel::after{content:"";position:absolute;inset:0;padding:1.5px;background:var(--edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* cut corners: diagonal lines */
.bevel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   linear-gradient(135deg,transparent calc(50% - 1.1px),var(--edge) calc(50% - 1.1px) calc(50% + 1.1px),transparent calc(50% + 1.1px)) top left/var(--c) var(--c) no-repeat,
   linear-gradient(135deg,transparent calc(50% - 1.1px),var(--edge) calc(50% - 1.1px) calc(50% + 1.1px),transparent calc(50% + 1.1px)) bottom right/var(--c) var(--c) no-repeat}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 28px;background:rgba(244,196,208,.72);backdrop-filter:blur(14px);border-bottom:1.5px solid var(--edge)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;letter-spacing:.2em;font-size:14px}
.head{display:block;width:46px;height:46px;transition:transform .3s}
.head img{display:block;width:100%;height:100%;object-fit:contain}
.brand:hover .head,.brand:focus-visible .head{transform:rotate(-8deg) scale(1.08)}
.tabs{display:flex;gap:10px}
.tabs a{--c:10px;--bg:var(--tab);display:flex;align-items:center;gap:9px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:10px 22px}
.tabs a:active{transform:translate(2px,2px)}
.tabs a i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);background:radial-gradient(circle,#fff 30%,transparent 32%),var(--blush)}
.tabs a:hover{--bg:rgba(226,100,130,.5)}
.tabs a.on{--bg:var(--hi)}
.tabs a.on i{background:radial-gradient(circle,var(--ink) 35%,transparent 38%),#fff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

main{position:relative;max-width:1240px;margin:0 auto;padding:40px 28px 60px 72px}
/* signal rail */
main::before{content:"";position:absolute;left:30px;top:40px;bottom:60px;width:2px;background:var(--rail)}
.page{display:none}
.page.on{display:block}
.mark{position:relative;margin:0 0 16px;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.mark::before{content:"";position:absolute;left:-49px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--rail);border:2px solid var(--ink)}
.mark::after{content:"";position:absolute;left:-37px;top:50%;width:26px;height:2px;margin-top:-1px;background:var(--rail)}

h1,h2,h3{text-transform:uppercase;letter-spacing:.04em}
h1{font-size:clamp(32px,4.6vw,56px);line-height:1.04;margin:0 0 18px;font-weight:700}
h2{margin:0 0 8px;font-size:22px;font-weight:700}
.eyebrow{margin:0 0 12px;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mega{font-size:clamp(44px,7.6vw,112px);line-height:.96;letter-spacing:-.015em;margin:0 0 24px;
  text-shadow:-2px 0 rgba(101,248,255,.55),2px 0 rgba(255,101,216,.4)}
.big{font-size:clamp(30px,3.6vw,48px);line-height:1.02;margin:0}
.mega2{font-size:clamp(40px,6.4vw,92px);line-height:.96;letter-spacing:-.01em;margin:0}
.lead{font-size:18px;line-height:1.6;color:#3a2e32;max-width:52ch;font-weight:500}
.lead.small{font-size:16px;margin:0}
.page-head{margin-bottom:26px}.page-head h1{font-size:clamp(30px,4vw,48px);margin-bottom:6px}

/* ---------- buttons ---------- */
.btn{--c:11px;--bg:rgba(255,255,255,.6);display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;border:0;
  font:600 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:14px 24px;color:var(--ink)}
.btn:hover{--bg:var(--ink);color:var(--mist)}
.btn:active{transform:translate(2px,2px)}
.btn.solid{--bg:var(--hi)}
.btn.big{padding:16px 32px;font-size:16px}
.pad{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-size:11px;font-weight:700;letter-spacing:0}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.6fr .6fr;align-items:center;gap:30px;padding:20px 0 40px}
.hero-orb{position:relative;display:grid;place-items:center;height:400px}
/* registration marks: small static interference at the corners */
.hero-orb::after{content:"";position:absolute;inset:34px;pointer-events:none;
  background:
   linear-gradient(var(--cyan),var(--cyan)) top left/12px 3px no-repeat,
   linear-gradient(var(--cyan),var(--cyan)) top left/3px 12px no-repeat,
   linear-gradient(var(--mag),var(--mag)) bottom right/12px 3px no-repeat,
   linear-gradient(var(--mag),var(--mag)) bottom right/3px 12px no-repeat}
.hero-orb::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,rgba(255,255,255,.55) 18%,var(--glow) 62%,rgba(240,173,184,.15) 100%);
  border:1.5px solid rgba(20,16,18,.35);box-shadow:0 0 70px 6px var(--glow),inset -14px -18px 40px rgba(240,140,160,.4)}
.ring{position:absolute;border-radius:50%;border:1.5px solid rgba(20,16,18,.45);border-left-color:transparent;border-bottom-color:transparent}
.r1{width:370px;height:370px}
.r2{width:410px;height:410px;border-color:rgba(240,140,160,.7);border-right-color:transparent;border-top-color:transparent}
.hero-orb img{position:relative;width:400px;height:400px;object-fit:contain;filter:drop-shadow(0 16px 24px rgba(240,140,160,.55));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}

/* facts row */
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 56px;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.facts>div{padding:16px 18px;border-left:1px solid var(--rule)}
.facts>div:first-child{border-left:0;padding-left:0}
.facts dt{font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.facts dd{margin:0;font-size:clamp(22px,2.6vw,32px);font-weight:700;text-transform:uppercase;letter-spacing:.03em}

/* unequal split + numbered track */
.split{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;margin-bottom:56px}
.intro .big{max-width:11ch}
.track{list-style:none;margin:0;padding:0;position:relative}
.track::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;background:var(--rail)}
.track li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:22px;padding:0 0 30px}
.track li:last-child{padding-bottom:0}
.track .n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--ink);background:var(--hi);font:600 13px var(--mono)}
.track h2{font-size:24px;margin:2px 0 6px}
.track p{margin:0;line-height:1.65;color:#3a2e32;font:400 14px/1.7 var(--mono)}

/* closing statement */
.statement{--c:26px;--bg:var(--hi);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:44px 40px}
.statement .btn{--bg:var(--mist)}
.statement .btn:hover{--bg:var(--ink)}

.cards{display:grid;gap:18px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr);margin-top:18px}
.cards .glass{padding:26px 26px 30px}
.cards p{margin:0;line-height:1.6;color:#3a2e32}
.num{display:block;font-size:12px;letter-spacing:.2em;color:var(--muted);margin-bottom:14px}

/* ---------- plugins: dashboard-style menu + grid ---------- */
.shell{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:start}
.menu{--c:18px;padding:0 0 16px;position:sticky;top:78px}
.menu-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:18px 20px 12px}
.menu-head h1{font-size:30px;margin:0}
.count{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.list{display:grid;gap:8px;padding:6px 14px 14px}
.chip{--c:9px;--bg:rgba(255,255,255,.45);display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;cursor:pointer;
  font:600 15px var(--font);letter-spacing:.08em;text-align:left;padding:11px 16px;color:var(--ink)}
.chip:hover{--bg:rgba(255,255,255,.85)}
.chip.on{--bg:var(--hi)}
.chip small{font:500 11px var(--mono);letter-spacing:.08em;opacity:.75}
.chip:active{transform:translate(2px,2px)}
.chip.on small::after{content:" ›"}
.foot-btns{display:flex;gap:8px;padding:0 14px 14px}
.foot-btns .chip{justify-content:center;font-size:12px;padding:9px 6px}
.search{--c:9px;display:block;width:calc(100% - 28px);margin:0 14px;font:600 14px var(--font);letter-spacing:.06em;padding:11px 16px;border:1.5px solid var(--edge);border-radius:6px;background:rgba(255,255,255,.7)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.card{--c:14px;display:block;padding:0;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.card:hover{--bg:rgba(255,255,255,.92)}
.card:active{transform:translate(2px,2px)}
.card:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.prev{aspect-ratio:4/3;border-bottom:1.5px solid var(--edge);overflow:hidden}
.prev svg{display:block;width:100%;height:100%}
.meta{padding:14px 16px 18px}
.meta .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.meta h3{margin:0;font-size:16px}
.meta small{color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font:500 11px var(--mono)}
.tag{--c:6px;font:600 10px var(--mono);letter-spacing:.12em;padding:4px 10px}
.tag.free{--bg:#fff}.tag.paid{--bg:var(--ink);color:var(--mist)}
.empty{text-align:center;color:var(--muted);padding:40px}

/* ---------- socials ---------- */
.discord{--c:22px;display:grid;grid-template-columns:1.4fr .6fr;gap:20px;padding:38px;overflow:hidden;
  --bg:linear-gradient(135deg,rgba(255,255,255,.7),rgba(240,173,184,.5))}
.discord h2{font-size:clamp(24px,3.2vw,38px);margin-bottom:16px}
.perks{padding:0;margin:0 0 26px;list-style:none;display:grid;gap:10px}
.perks li{padding-left:28px;position:relative;line-height:1.5}
.perks li::before{content:"";position:absolute;left:0;top:.4em;width:12px;height:12px;border:2px solid var(--ink);background:var(--rail)}
.d-art{display:grid;place-items:center}
.d-art img{width:230px;height:230px;object-fit:contain;filter:drop-shadow(0 14px 22px var(--glow));animation:bob 4s ease-in-out infinite}
.social{display:flex;align-items:center;gap:18px;text-decoration:none;padding:22px 26px}
.social:hover{--bg:rgba(255,255,255,.92)}
.social .o{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:radial-gradient(circle,var(--ink) 20%,transparent 24%),radial-gradient(circle at 35% 30%,#fff,var(--pink))}
.social div{flex:1}
.social h2{margin-bottom:4px}
.arrow{font:600 13px var(--mono);letter-spacing:.12em;text-transform:uppercase}

.foot{border-top:1px solid var(--edge);background:rgba(244,196,208,.5);padding:34px 28px 40px 72px}
.dir{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:50px;max-width:1240px;margin:0 auto}
.dir h3{margin:0 0 12px;font:500 11px var(--mono);letter-spacing:.2em;color:var(--muted)}
.dir a{display:block;width:max-content;margin-bottom:8px;text-decoration:none;font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.dir a:hover{background:var(--ink);color:var(--mist)}
.dir p{margin:0;font:400 12px/1.7 var(--mono);color:#4a3a40;max-width:46ch}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(80,40,50,.38);backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.sheet{--c:22px;--bg:rgba(255,248,250,.95);display:grid;grid-template-columns:1.1fr 1fr;max-width:860px;width:100%;overflow:hidden}
.sheet .prev{border-bottom:0;border-right:1.5px solid var(--edge);aspect-ratio:4/3;align-self:stretch}
.m-body{padding:34px 30px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.m-body p{line-height:1.6;margin:0 0 6px}

@media (max-width:1050px){
  .hero{grid-template-columns:1.5fr .6fr}
  .hero-orb{height:280px}
  .hero-orb::before{width:200px;height:200px}.r1{width:236px;height:236px}.r2{width:262px;height:262px}
  .hero-orb img{width:260px;height:260px}.hero-orb::after{inset:20px}
  .split{gap:30px}
}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .menu{position:static}
  .list{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
}
@media (max-width:700px){
  main{padding:28px 16px 40px 40px}
  main::before{left:14px;top:28px;bottom:40px}
  .mark::before{left:-33px}.mark::after{left:-21px;width:14px}
  .top{padding:8px 12px}.brand .word{display:none}
  .tabs{gap:6px}.tabs a{padding:9px 12px;letter-spacing:.08em;font-size:12px}.tabs a i{display:none}
  .hero,.discord,.sheet,.split{grid-template-columns:1fr}
  .hero-orb{height:240px}
  .hero-orb::before{width:170px;height:170px}.r1{width:200px;height:200px}.r2{width:224px;height:224px}
  .hero-orb img{width:220px;height:220px}.hero-orb::after{inset:12px}
  .facts{grid-template-columns:1fr 1fr}
  .facts>div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .facts>div:nth-child(-n+2){border-top:0}
  .facts>div:nth-child(even){border-left:1px solid var(--rule);padding-left:18px}
  .cards.two{grid-template-columns:1fr}
  .statement{padding:30px 24px}
  .foot{padding:28px 16px 32px 40px}
  .dir{grid-template-columns:1fr 1fr;gap:28px}.dir .note{grid-column:1/-1}
  .sheet .prev{border-right:0;border-bottom:1.5px solid var(--edge)}
  .d-art{display:none}.discord{padding:26px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* media previews (screenshot / screen recording of a real plugin) */
.prev.media{background:linear-gradient(180deg,#2f9bea,#52d2f0);display:grid;place-items:center}
.prev.media img,.prev.media video{display:block;width:100%;height:100%;object-fit:contain}
.m-note{font:500 11px/1.6 var(--mono);letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.m-note:empty{display:none}

/* what's new feed */
.news{margin:72px 0 0}
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.feed li{border-bottom:1px solid var(--rule)}
.feed .item{display:grid;grid-template-columns:1fr;gap:22px;width:100%;padding:24px 0;margin:0;border:0;background:none;text-align:left;font:inherit;color:inherit}
.feed .item.has-thumb{grid-template-columns:230px 1fr;cursor:pointer;align-items:center}
.feed .thumb{border:1.5px solid var(--edge);aspect-ratio:4/3;transition:transform .2s}
.feed .item:hover .thumb{transform:translate(-2px,-2px)}
.feed .item:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.feed .meta-line{display:flex;align-items:center;gap:12px;margin-bottom:10px;font:500 11px var(--mono);letter-spacing:.2em;color:var(--muted)}
.feed .tag.new{--bg:var(--hi);color:var(--ink)}
.feed h3{font-size:clamp(22px,2.4vw,30px);margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em}
.feed p{margin:0;font:400 14px/1.7 var(--mono);color:#3a2e32;max-width:60ch}
.feed .go{display:inline-block;margin-top:14px;font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;transition:transform .2s}
.feed .item:hover .go{transform:translateX(6px)}
@media(max-width:900px){.news{margin-top:48px}.feed .item.has-thumb{grid-template-columns:1fr}}
.sheet{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.sheet>*{min-width:0}
.prev.media{min-width:0}
@media(max-width:900px){.sheet{grid-template-columns:minmax(0,1fr)}}
.sheet .prev{width:100%;aspect-ratio:auto;min-height:280px}
@media(max-width:900px){.sheet .prev{aspect-ratio:4/3;min-height:0}}