*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#2b2250;background:#fffdfb;line-height:1.6;overflow-x:hidden}
:root{--p:#7c5cff;--k:#ff5d8f;--c:#19c3e6;--bg:#f6f3ff;--mut:#6a6490;--ln:#e6e0f7}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}.narrow{max-width:820px}.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:99}
a{color:var(--p)}:focus-visible{outline:3px solid var(--p);outline-offset:2px}.muted{color:var(--mut)}h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.15;margin:.2em 0}h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .4em}
.hd{position:sticky;top:0;background:rgba(255,253,251,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln);z-index:30}.hdin{display:flex;align-items:center;justify-content:space-between;height:68px}.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.25rem;color:#2b2250;text-decoration:none}.brand b{background:linear-gradient(90deg,var(--k),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;align-items:center;gap:18px}nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}nav ul a{display:block;padding:8px 12px;border-radius:10px;color:#2b2250;text-decoration:none;font-size:.95rem}nav ul a:hover,nav a[aria-current]{background:var(--bg);color:var(--p)}.mbtn{display:none;background:none;border:1px solid var(--ln);border-radius:10px;padding:8px;cursor:pointer;color:inherit}.ic,.sic,.fic{width:22px;height:22px}
.btn{font:inherit;font-size:.9rem;border:1px solid var(--ln);background:#fff;color:#2b2250;border-radius:12px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block;transition:.15s}.btn:hover{border-color:var(--p);transform:translateY(-1px)}.btn.pri{background:linear-gradient(135deg,var(--p),var(--k));color:#fff;border:0}.btn.big{padding:12px 24px;font-size:1rem}.btn[aria-pressed=true]{background:var(--bg);border-color:var(--p)}
.hero{background:radial-gradient(900px 400px at 10% 0,#ffe3ee,transparent),radial-gradient(800px 400px at 95% 20%,#d9f4fb,transparent),var(--bg);padding:56px 0 64px}.herogrid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center}.eyebrow{color:var(--p);font-weight:600;margin:0}.lead{font-size:1.1rem;color:var(--mut)}
.sbox{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ln);border-radius:16px;padding:6px 14px;box-shadow:0 10px 30px rgba(124,92,255,.12);max-width:620px}.sbox:focus-within{border-color:var(--p)}.sbox input{flex:1;border:0;outline:0;font:inherit;font-size:1.05rem;padding:12px 0;background:none;min-width:0}.qc{border:0;background:none;font-size:1.5rem;cursor:pointer}.chips{margin:14px 0 20px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--mut);font-size:.9rem}.chip{border:1px solid var(--ln);background:#fff;border-radius:999px;padding:4px 12px;cursor:pointer;font:inherit;font-size:.85rem}.chip:hover{background:var(--p);color:#fff}
.heroart{position:relative;height:320px}.fl{position:absolute;width:86px;height:86px;border-radius:24px;background:hsl(var(--h) 90% 94%);color:#000;display:grid;place-items:center;box-shadow:0 12px 24px rgba(43,34,80,.1)}.fl svg{width:42px;height:42px}.f0{left:6%;top:6%}.f1{left:46%;top:0}.f2{right:4%;top:20%}.f3{left:20%;top:44%}.f4{left:58%;top:50%}.f5{left:34%;bottom:0}
.sec{padding:56px 0}.alt{background:var(--bg)}.phead{background:linear-gradient(135deg,#ffe3ee,var(--bg) 50%,#d9f4fb);padding:44px 0}.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:20px 0}
.ccard{display:block;text-decoration:none;color:#2b2250;background:hsl(var(--h) 100% 97%);border:1px solid hsl(var(--h) 60% 90%);border-radius:20px;padding:20px;transition:.2s}.ccard:hover{transform:translateY(-3px);box-shadow:0 14px 30px hsl(var(--h) 60% 80%/.5)}.ccard h3{margin:10px 0 4px}.ccard p{margin:0 0 10px;font-size:.9rem;color:var(--mut)}.cnt{font-size:.85rem;color:hsl(var(--h) 55% 38%)}.cico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:hsl(var(--h) 85% 90%);color:#000}.cico svg{width:26px;height:26px}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}.tools label{display:flex;flex-direction:column;font-size:.8rem;color:var(--mut);gap:2px}select,input[type=color]{font:inherit;padding:8px;border:1px solid var(--ln);border-radius:10px;background:#fff}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.grid.s{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.grid.l{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.card{position:relative;background:#fff;border:1px solid var(--ln);border-radius:16px;min-height:150px;display:flex;flex-direction:column;transition:.15s}.card:hover{border-color:var(--p);box-shadow:0 10px 24px rgba(124,92,255,.15)}.card .open{flex:1;background:none;border:0;cursor:pointer;padding:14px 8px 4px;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;gap:8px}.card .open svg{width:40px;height:40px;color:#000}.card .nm{font-size:.78rem;text-align:center;word-break:break-word}.card small{display:block;text-align:center;font-size:.68rem;color:var(--mut)}.ca{display:flex;justify-content:center;gap:4px;padding:6px}.ca button{border:0;background:var(--bg);border-radius:8px;width:32px;height:32px;cursor:pointer;color:#000;display:grid;place-items:center}.ca button svg{width:16px;height:16px}.ca button[aria-pressed=true]{background:var(--k);color:#fff}
.more{text-align:center;margin:24px 0}.empty{text-align:center;padding:40px}
dialog{border:0;border-radius:24px;padding:0;width:min(720px,94vw);max-height:92vh;box-shadow:0 30px 80px rgba(43,34,80,.35)}dialog::backdrop{background:rgba(43,34,80,.45)}.dh{display:flex;justify-content:space-between;padding:18px 22px 0}.dh h2{margin:0;font-size:1.4rem}.x{border:0;background:var(--bg);width:38px;height:38px;border-radius:50%;font-size:1.4rem;cursor:pointer}.dbody{padding:12px 22px 22px}.prev{display:grid;place-items:center;height:200px;border-radius:18px;background:var(--bg)}.ctl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0;align-items:end}.ctl label{display:flex;flex-direction:column;font-size:.8rem;gap:2px}.acts{display:flex;flex-wrap:wrap;gap:8px}.code,.cb pre{background:#241c4a;color:#e8e3ff;border-radius:14px;padding:14px;overflow-x:auto;font-size:.8rem;white-space:pre-wrap;word-break:break-all}.cb{position:relative}.cb pre{margin:12px 0}.cpy{position:absolute;right:8px;top:8px;padding:4px 10px;font-size:.75rem}.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.rel button{border:1px solid var(--ln);background:#fff;border-radius:12px;padding:10px;cursor:pointer;color:#000}.rel svg{width:28px;height:28px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.bt{display:block;text-decoration:none;color:#2b2250;padding:24px;border-radius:24px;background:hsl(var(--h) 100% 96%);border:1px solid hsl(var(--h) 60% 88%)}.bt.b0{grid-column:span 2;grid-row:span 2}.bt.b3{grid-column:span 2}.bti{display:block;width:60px;height:60px;color:#000}.bti svg{width:60px;height:60px}.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}.note{background:#fff;border:1px solid var(--ln);border-left:6px solid var(--p);border-radius:16px;padding:16px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:20px}.feat{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--ln)}.fic{width:40px;height:40px;padding:8px;border-radius:12px;background:hsl(var(--h) 90% 93%);color:#000}.tick{list-style:none;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.tick li{background:var(--bg);padding:14px 16px 14px 44px;border-radius:14px;position:relative}.tick li:before{content:"\2713";position:absolute;left:16px;color:var(--p);font-weight:700}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}.gcard{display:block;background:#fff;border:1px solid var(--ln);border-radius:20px;padding:18px;text-decoration:none;color:#2b2250}.gcard:hover{border-color:var(--p)}.gcard p{font-size:.9rem;color:var(--mut)}.gv,.gvis{display:grid;place-items:center;height:90px;border-radius:14px;background:linear-gradient(135deg,#ffe3ee,#e4dcff,#d9f4fb);color:#000}.gv svg,.gvis svg{width:44px;height:44px}.gvis{height:140px;margin:14px 0}
.fqc{margin:28px 0 8px;color:var(--p)}.fq{border:1px solid var(--ln);border-radius:14px;margin:8px 0;background:#fff}.fq h4{margin:0}.fq button{width:100%;text-align:left;font:inherit;font-weight:500;background:none;border:0;padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;color:inherit}.fa{padding:0 16px 14px;color:var(--mut)}.fa p{margin:0}
.ft{background:#241c4a;color:#d9d3f5;padding:40px 0 20px;margin-top:0}.ft a{color:#d9d3f5;display:block;text-decoration:none;padding:3px 0}.ft .brand{display:flex;color:#fff}.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}.ft h3{font-size:1rem;color:#fff}.disc{font-size:.85rem;border-top:1px solid #3b3270;padding-top:16px}.copy{font-size:.8rem}.prose h2{margin-top:1.4em}.crumb{font-size:.85rem;color:var(--mut)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:#2b2250;color:#fff;padding:10px 18px;border-radius:12px;opacity:0;transition:.25s;z-index:100;pointer-events:none}#toast.on{opacity:1;transform:translate(-50%,0)}
.mini{display:flex;gap:6px;margin:10px 0 6px;flex-wrap:wrap}.mini span{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.75);display:grid;place-items:center;color:#000}.mini svg{width:18px;height:18px}.inc{display:block;font-size:.78rem;color:var(--mut);margin-bottom:8px}.tgs{margin:8px 0}.tg{display:inline-block;background:rgba(255,255,255,.8);border-radius:999px;padding:2px 12px;font-size:.78rem;margin:2px 4px 2px 0}.bt p{font-size:.95rem}.bt h4{margin:14px 0 4px}.devgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:start}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.tab{font:inherit;font-size:.85rem;border:1px solid var(--ln);background:#fff;border-radius:999px;padding:6px 16px;cursor:pointer}.tab[aria-selected=true]{background:#241c4a;color:#fff;border-color:#241c4a}.one{grid-template-columns:1fr}.note ul{padding-left:18px;margin:0}@media(max-width:900px){.devgrid{grid-template-columns:1fr}}
@media(max-width:900px){.herogrid,.two{grid-template-columns:1fr}.heroart{display:none}.bento{grid-template-columns:1fr 1fr}.bt.b0,.bt.b3{grid-column:span 2}.fg{grid-template-columns:1fr 1fr}.mbtn{display:block}nav{display:none;position:absolute;left:0;right:0;top:68px;background:#fffdfb;flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid var(--ln)}nav.open{display:flex}nav ul{flex-direction:column}}
@media(max-width:480px){.grid{grid-template-columns:repeat(2,1fr)}.grid.s{grid-template-columns:repeat(3,1fr)}.bento{grid-template-columns:1fr}.bt.b0,.bt.b3{grid-column:auto}.fg{grid-template-columns:1fr}}
.bento{grid-template-columns:repeat(2,1fr)}.bt,.bt.b0,.bt.b3{grid-column:auto;grid-row:auto;display:flex;flex-direction:column}.bt .cnt{margin-top:auto;padding-top:8px}@media(max-width:700px){.bento{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}