:root{--bg:#0b1020;--panel:#11182b;--panel2:#0e1526;--line:#263655;--text:#eef4ff;--muted:#8ea0bd;--acc:#4cc9f0;--acc2:#9b8cff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(900px 420px at 20% -100px,rgba(76,201,240,.13),transparent 65%),radial-gradient(760px 400px at 85% 0,rgba(155,140,255,.12),transparent 60%),var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
.topbar{width:min(1180px,calc(100% - 32px));margin:auto;min-height:78px;border-bottom:1px solid #23314d;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px}.brand>span:last-child{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:18px}.brand small{font-size:8px;letter-spacing:.18em;color:#8090aa;margin-top:4px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#06101b;font-size:11px;font-weight:950;box-shadow:0 10px 28px rgba(76,201,240,.18)}.top-note{font-size:10px;color:#8393ad}
main{width:min(1180px,calc(100% - 32px));margin:auto}.hero{text-align:center;padding:68px 0 36px}.eyebrow,.section-kicker{font-size:10px;font-weight:900;letter-spacing:.17em;color:var(--acc)}.hero h1{font-size:clamp(42px,7vw,76px);line-height:1.02;letter-spacing:-4px;margin:13px 0 17px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc2),#ff7ec7);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{max-width:730px;margin:auto;color:var(--muted);font-size:15px;line-height:1.75}.hero p strong{color:#dce6f5}
.name-box{max-width:700px;margin:26px auto 0;padding:12px;border:1px solid #2b3c60;background:#11192b;border-radius:16px;text-align:left}.name-box label{display:block;font-size:9px;font-weight:900;letter-spacing:.12em;color:#8190aa;margin:0 0 7px 3px}.name-box>div{display:grid;grid-template-columns:1fr auto;gap:8px}.name-box input{height:49px;background:#0d1423;border:1px solid #2d4067;border-radius:10px;color:#fff;padding:0 13px;font-size:16px;font-weight:750;outline:0}.name-box input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(76,201,240,.09)}.name-box button{border:0;border-radius:10px;padding:0 18px;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#07111e;font-weight:900}
.category-tabs{max-width:820px;margin:18px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.category-tabs button{border:1px solid #2a3958;background:#101727;color:#d7e1ef;border-radius:13px;padding:12px}.category-tabs button.active{border-color:#5bc7e6;background:linear-gradient(180deg,#15243a,#111929);box-shadow:0 0 0 1px rgba(76,201,240,.09) inset}.category-tabs strong,.category-tabs span{display:block}.category-tabs strong{font-size:13px}.category-tabs span{font-size:9px;color:#8090aa;margin-top:3px}
.workspace{padding:20px 0 8px}.workspace-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.workspace-head h2{font-size:31px;letter-spacing:-1.2px;margin:4px 0 3px}.workspace-head p{margin:0;color:var(--muted);font-size:11px}.count-badge{font-size:10px;color:#9fb0ca;border:1px solid #2d3c5a;border-radius:999px;padding:7px 10px;white-space:nowrap}
.tool-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px}.controls{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}.template-nav{display:grid;grid-template-columns:42px 1fr 42px;gap:7px;align-items:end}.template-nav button{height:44px;border:1px solid #344564;background:#0e1626;color:#dce6f4;border-radius:9px;font-weight:900}.template-nav label{display:flex;flex-direction:column;gap:5px;color:#8698b2;font-size:9px;font-weight:850}.template-nav input{height:44px;border:1px solid #344564;background:#0d1422;color:#fff;border-radius:9px;padding:0 10px;outline:0}.random-btn{width:100%;margin-top:8px;height:42px;border:0;border-radius:9px;background:linear-gradient(90deg,#244365,#3c315f);color:#dfe9f7;font-size:10px;font-weight:900}
.template-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}.template-meta div{padding:10px;border:1px solid #2a3854;background:#0f1726;border-radius:9px}.template-meta span,.template-meta strong{display:block}.template-meta span{font-size:8px;color:#72839d;text-transform:uppercase;letter-spacing:.07em}.template-meta strong{font-size:10px;color:#e1e8f3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.export-box{display:grid;gap:7px;margin-top:12px}.export-box button{min-height:42px;border:1px solid #354661;background:#111a2a;color:#d8e2ef;border-radius:9px;font-size:10px;font-weight:900}.export-box .primary{border:0;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#06101b}.hint{color:#7888a0;font-size:9px;line-height:1.5;margin:9px 2px 0}
.preview-shell{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0c1220;box-shadow:0 20px 55px rgba(0,0,0,.35)}.preview-top{height:48px;padding:0 13px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#7e8ea8;font-size:9px;letter-spacing:.11em;font-weight:900}canvas{display:block;width:100%;height:auto;background:#06080e}
.browse-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:22px 0 10px}.browse-head h3{margin:0;font-size:16px}.browse-head p{margin:3px 0 0;color:#7f8fa8;font-size:10px}.browse-head>div:last-child{display:flex;gap:7px}.browse-head button{border:1px solid #32425f;background:#101727;color:#d9e3f0;border-radius:9px;padding:8px 10px;font-size:9px;font-weight:850}
.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.template-card{border:1px solid #283753;background:#0f1625;border-radius:12px;padding:8px;text-align:left;color:#dce4ef}.template-card.active{border-color:var(--acc);box-shadow:0 0 0 1px rgba(76,201,240,.12) inset}.thumb{height:92px;border-radius:8px;position:relative;overflow:hidden;margin-bottom:7px}.thumb:before,.thumb:after{content:"";position:absolute;border-radius:999px}.thumb:before{width:70px;height:70px;left:14%;top:12%;border:3px solid rgba(255,255,255,.55)}.thumb:after{width:42px;height:7px;right:14%;bottom:20%;background:rgba(255,255,255,.6)}.template-card strong,.template-card span{display:block}.template-card strong{font-size:10px}.template-card span{font-size:8px;color:#7f8ea5;margin-top:2px}
.engine-note{margin:26px 0;padding:17px 18px;border-left:3px solid var(--acc2);background:linear-gradient(90deg,rgba(155,140,255,.08),rgba(16,23,39,.65));border-radius:0 12px 12px 0}.engine-note strong{font-size:12px}.engine-note p{margin:4px 0 0;color:#8c9cb4;font-size:10px;line-height:1.65}
.network{margin:26px 0;padding:17px;border:1px solid #263552;background:#101727;border-radius:14px}.network>span{display:block;font-size:9px;letter-spacing:.12em;color:#75849c;text-transform:uppercase;font-weight:900;margin-bottom:9px}.network>div{display:flex;flex-wrap:wrap;gap:7px}.network a{font-size:10px;font-weight:800;color:#cbd6e6;border:1px solid #31415f;border-radius:999px;padding:8px 10px}.network a:hover{border-color:var(--acc);color:#fff}
footer{width:min(1180px,calc(100% - 32px));margin:auto;border-top:1px solid #23314b;padding:22px 0 34px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#6e7d93;font-size:9px}.toast{position:fixed;right:18px;bottom:18px;background:#17223a;border:1px solid #34496d;color:#fff;border-radius:10px;padding:11px 14px;font-size:10px;font-weight:850;box-shadow:0 14px 35px #0007}
[hidden]{display:none!important}
@media(max-width:880px){.tool-grid{grid-template-columns:1fr}.template-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:620px){.top-note{display:none}.hero{padding-top:48px}.hero h1{letter-spacing:-2.5px}.category-tabs{grid-template-columns:1fr}.workspace-head{align-items:flex-start}.count-badge{display:none}.template-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:430px){.topbar,main,footer{width:calc(100% - 22px)}.name-box>div{grid-template-columns:1fr}.name-box button{height:45px}.template-grid{grid-template-columns:1fr 1fr}.thumb{height:78px}}