:root{color-scheme:dark;--bg:#020307;--p:#0a0e1a;--l:#1a2340;--ink:#e8eeff;--d:#8fa0c8;--a:#00e5ff;--b:#8b5cff;--r:#ff3d57}
body[data-p=blog]{--a:#ff9f43;--b:#ff3d57}body[data-p=videos]{--a:#ff3d57;--b:#ff7a00}body[data-p=tools],body[data-p=tool]{--a:#2ee59d;--b:#00b4ff}
body[data-p=about]{--a:#c084fc;--b:#f472b6}body[data-p=contact]{--a:#38bdf8;--b:#34d399}body[data-p=login]{--a:#facc15;--b:#fb923c}body[data-p=admin]{--a:#a3e635;--b:#22d3ee}body[data-p=search]{--a:#f472b6;--b:#8b5cff}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:radial-gradient(circle at 80% -10%,#150f3d 0,transparent 45%),var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,sans-serif;line-height:1.6;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body.lock{overflow:hidden}a{color:var(--a);text-decoration:none}img{max-width:100%;height:auto}
#fall{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.nav,.w,footer{position:relative;z-index:1}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;background:rgba(2,3,7,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--l)}
.logo{font-weight:800;font-size:17px;margin-right:auto;background:linear-gradient(90deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.nav nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.nav nav a:not(.btn){color:var(--ink);padding:7px 11px;border-radius:8px;font-size:14px}.nav nav a:not(.btn):hover{background:var(--p)}
.burger{display:none;background:var(--p);border:1px solid var(--l);color:var(--ink);border-radius:8px;padding:6px 12px;font-size:18px}
.sb{background:var(--p);border:1px solid var(--l);color:var(--ink);padding:8px 14px;border-radius:20px;cursor:pointer;font-size:13px}.sb:hover{border-color:var(--a)}.sb kbd{color:var(--d);font-size:11px;margin-left:6px}
@media(max-width:760px){.burger{display:block}.nav nav{display:none;width:100%;flex-direction:column;align-items:stretch}body.open .nav nav{display:flex}.sb kbd{display:none}}
.w{max-width:1050px;margin:0 auto;padding:24px 18px;animation:drop .7s cubic-bezier(.2,.9,.3,1.15)}@keyframes drop{from{opacity:0;transform:translateY(-60px)}}
.btn{display:inline-block;border:0;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;background:linear-gradient(90deg,var(--a),var(--b));color:#04101a;font-size:14px;font-family:inherit}.btn.o{background:transparent;border:1px solid var(--l);color:var(--ink)}.btn.r{background:var(--r);color:#fff}.btn:disabled{opacity:.4;cursor:not-allowed}
.hero{text-align:center;padding:60px 10px 40px}.bot{font-size:70px;animation:f 3s ease-in-out infinite}@keyframes f{50%{transform:translateY(-12px)}}
.hero h1{font-size:clamp(30px,6vw,58px);margin:8px 0;line-height:1.1}.hero h1 span,.g{background:linear-gradient(90deg,var(--a),var(--b),var(--r));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--d);max-width:56ch;margin:10px auto 22px}
.banner{border:1px solid var(--l);border-radius:16px;padding:22px;background:linear-gradient(120deg,#0a2240,#25104f);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:10px 0 26px}.banner h2,.banner p{margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.c{display:block;color:inherit;background:var(--p);border:1px solid var(--l);border-radius:14px;padding:16px;transition:.2s}.c:hover{border-color:var(--a);transform:translateY(-3px);box-shadow:0 0 28px color-mix(in srgb,var(--a) 35%,transparent)}
.c img.t{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:10px}.c h3{margin:4px 0}.m{color:var(--d);font-size:13px}
h1{text-shadow:0 0 30px color-mix(in srgb,var(--a) 40%,transparent)}
input,textarea,select{background:var(--bg);color:var(--ink);border:1px solid var(--l);border-radius:8px;padding:10px;width:100%;margin:5px 0 12px;font:inherit}
label{font-size:12px;color:var(--d);text-transform:uppercase;letter-spacing:.06em;display:block}.hp{position:absolute;left:-9999px}
.art{background:var(--p);border:1px solid var(--l);border-radius:16px;padding:24px;line-height:1.8}.art img{border-radius:10px}.content img{margin:12px 0}
.crumb{font-size:13px;color:var(--d);margin-bottom:12px}
.vid{position:relative;aspect-ratio:16/9;margin:14px 0;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:48px;color:#fff;text-shadow:0 0 20px #000}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:20px}.share a{padding:7px 13px;border:1px solid var(--l);border-radius:20px;color:var(--ink);font-size:13px}.share a:hover{border-color:var(--a)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:20px}.pager a{padding:7px 13px;border:1px solid var(--l);border-radius:8px;color:var(--ink)}.pager a.on{background:var(--a);color:#000}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}.ov[hidden]{display:none}
.box{background:var(--p);border:1px solid var(--a);border-radius:18px;padding:26px;max-width:440px;text-align:center}.big{font-size:50px}
#ais{align-items:flex-start;animation:drop .3s}#ais .box{width:min(620px,100%);text-align:left;margin-top:8vh;max-width:none}#ais .c{padding:10px 14px;margin-bottom:8px}
.ad{margin:18px 0;text-align:center;overflow:hidden}
.soc a{display:inline-block;margin:3px;padding:7px 13px;border:1px solid var(--l);border-radius:20px;color:var(--ink);font-size:13px}.soc a:hover{border-color:var(--a)}
footer{text-align:center;padding:30px 18px;color:var(--d);font-size:13px;border-top:1px solid var(--l);margin-top:30px}
.good{color:#2ee59d}.bad{color:var(--r)}canvas{max-width:100%;border-radius:8px}
.atabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.atabs a{padding:8px 14px;border:1px solid var(--l);border-radius:10px;color:var(--ink)}.atabs a:hover{border-color:var(--a)}
.stat{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}.stat div{flex:1;min-width:130px;background:var(--p);border:1px solid var(--l);border-radius:12px;padding:14px;color:var(--d)}.stat b{font-size:26px;display:block;color:var(--a)}
.bars{display:flex;gap:10px;align-items:flex-end;height:140px}.bars div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;font-size:11px;color:var(--d)}.bars i{display:block;background:linear-gradient(0deg,var(--a),var(--b));border-radius:6px 6px 0 0;min-height:3px}
.bar{height:6px;border-radius:4px;background:linear-gradient(90deg,var(--a),var(--b));margin-top:5px}.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse}td{padding:9px;border-bottom:1px solid var(--l);font-size:14px}
.tb{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.tb button{background:var(--bg);color:var(--ink);border:1px solid var(--l);border-radius:6px;padding:6px 10px;cursor:pointer}
#ed{min-height:280px;background:var(--bg);border:1px solid var(--l);border-radius:8px;padding:14px;line-height:1.7}#ed img{max-width:100%}.seo{background:var(--bg);border:1px solid var(--l);border-radius:8px;padding:12px;font-size:13px;line-height:1.9;margin-top:12px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* article images / editor */
figure.img{margin:16px auto;max-width:100%}figure.img img{width:100%;display:block;border-radius:10px;margin:0}
figure.img figcaption{font-size:13px;color:var(--d);text-align:center;padding-top:6px;line-height:1.4}
.al-left{float:left;margin:6px 20px 12px 0!important}.al-right{float:right;margin:6px 0 12px 20px!important}.al-center{float:none;display:block;margin-left:auto;margin-right:auto}
.content::after,#ed::after{content:"";display:block;clear:both}
.content blockquote,#ed blockquote{border-left:3px solid var(--a);margin:14px 0;padding:6px 16px;color:var(--d)}
.content h2,.content h3,.content h4{margin:22px 0 8px}.content p{margin:0 0 14px}
@media(max-width:600px){figure.al-left,figure.al-right{float:none;margin:14px auto!important;width:100%!important}}
.bigt{font-size:26px;font-weight:700;padding:14px}
.etb{position:sticky;top:calc(env(safe-area-inset-top,0px) + 56px);z-index:6;background:var(--p);padding:8px;border:1px solid var(--l);border-radius:10px;margin-bottom:8px}
.etb select{width:auto;margin:0;padding:6px 8px}.tb button.pri{border-color:var(--a)}.tb button.on{background:var(--a);color:#000}
#ed .sel{outline:3px solid var(--a);outline-offset:2px}#ed .yt{cursor:pointer}#ed:focus{outline:1px solid var(--a)}
#src{width:100%;min-height:340px;font-family:monospace;font-size:13px}
.ip{margin-top:12px;background:var(--bg);border:1px solid var(--a);border-radius:12px;padding:14px}
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:12px}
.mg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent}.mg img:hover{border-color:var(--a)}