:root{--bg:#f5f7fb;--surface:#fff;--surface2:#f0f3f8;--ink:#101828;--muted:#667085;--line:#e4e7ec;--primary:#635bff;--shadow:0 18px 50px rgba(16,24,40,.08)}@media(prefers-color-scheme:dark){:root{--bg:#080b12;--surface:#10151e;--surface2:#151c27;--ink:#f4f6fb;--muted:#98a2b3;--line:#273140;--shadow:0 20px 60px rgba(0,0,0,.3)}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.app-nav{background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}a{text-decoration:none;color:inherit}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand b{font-weight:900}.brand-mark{width:34px;height:34px;border-radius:11px;background:conic-gradient(#635bff,#00c2ff,#ff4ecd,#ffb547,#635bff);box-shadow:0 8px 22px #635bff30}.hero{padding:90px 0 65px;background:radial-gradient(700px 380px at 10% 0,#635bff18,transparent),radial-gradient(700px 400px at 90% 10%,#00c2ff12,transparent)}.pill,.kicker{font-size:11px;letter-spacing:.14em;font-weight:900;color:var(--primary)}.hero h1{font-size:clamp(44px,7vw,86px);line-height:.94;letter-spacing:-.075em;font-weight:950;max-width:920px;margin:20px 0}.hero h1 span{background:linear-gradient(100deg,#635bff,#00b8d9,#ff4ecd);-webkit-background-clip:text;color:transparent}.hero p{max-width:800px;color:var(--muted);font-size:18px}.btn-primary{--bs-btn-bg:#635bff;--bs-btn-border-color:#635bff;--bs-btn-hover-bg:#544de2}.btn-soft{background:var(--surface2);border:1px solid var(--line);color:var(--ink)}.section{padding:65px 0}.alt{background:color-mix(in srgb,var(--surface2) 65%,transparent)}.section h2{font-weight:900;letter-spacing:-.045em}.section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:18px}.status{font-size:12px;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;background:#12b76a;border-radius:50%;margin-right:6px}.studio-shell{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;min-height:650px}.side-panel,.inspector{padding:18px;background:var(--surface2)}.side-panel{border-right:1px solid var(--line)}.inspector{border-left:1px solid var(--line)}.side-panel label,.inspector label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin:13px 0 6px}.count-box{width:70px}.canvas-panel{min-width:0}.canvas-toolbar,.canvas-footer{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.canvas-toolbar span{display:block;font-size:11px;color:var(--muted)}.canvas-footer{border-top:1px solid var(--line);border-bottom:0}.canvas-footer .form-control{max-width:180px}.canvas-footer span{font-size:11px;color:var(--muted)}.palette-grid{padding:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:540px;overflow:auto}.swatch{height:165px;border-radius:13px;position:relative;cursor:pointer;overflow:hidden;transition:.2s;box-shadow:inset 0 0 0 1px #ffffff20}.swatch:hover{transform:translateY(-3px)}.swatch.active{outline:3px solid var(--primary);outline-offset:2px}.swatch-meta{position:absolute;left:7px;right:7px;bottom:7px;padding:8px;border-radius:9px;background:#05070aa8;color:#fff;backdrop-filter:blur(12px);font:11px ui-monospace,monospace}.swatch-actions{position:absolute;top:7px;right:7px;display:flex;gap:5px}.icon-btn{border:0;border-radius:8px;background:#05070a9c;color:#fff;width:29px;height:29px}.inspect-preview{height:100px;border-radius:13px;margin:12px 0}.contrast-box{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px}.contrast-box small,.contrast-box span{display:block;color:var(--muted)}.contrast-box b{font-size:24px}.inspector-empty{color:var(--muted);text-align:center;padding-top:80px}.dropzone{display:flex;min-height:220px;border:1.5px dashed var(--line);border-radius:18px;background:var(--surface);align-items:center;justify-content:center;flex-direction:column;cursor:pointer;transition:.2s}.dropzone:hover,.dropzone.drag{border-color:var(--primary);transform:translateY(-2px)}.dropzone span,.lead-muted{color:var(--muted)}.drop-icon{font-size:42px}.image-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.image-chip{height:110px;border-radius:12px;display:flex;align-items:end;padding:8px;color:#fff;font:11px ui-monospace,monospace;text-shadow:0 1px 4px #000}.pro-card{padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.card-top{display:flex;justify-content:space-between;align-items:center}.dev-preview{height:210px;border-radius:14px;margin:15px 0}.shadow-demo{display:flex;align-items:center;justify-content:center;background:var(--surface2);font-weight:900}.codebox{width:100%;height:130px;border:0;border-radius:12px;background:#090d14;color:#dbe5f5;padding:13px;font:12px/1.5 ui-monospace,monospace}.ad-slot{height:80px;border:1px dashed var(--line);border-radius:14px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:10px;letter-spacing:.14em}.accordion-item,.accordion-button{background:var(--surface);color:var(--ink);border-color:var(--line)}footer{padding:28px;text-align:center;border-top:1px solid var(--line);color:var(--muted);font-weight:650}.toast-msg{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:9999;background:#111827;color:#fff;padding:10px 16px;border-radius:99px;font-weight:800;box-shadow:0 15px 40px #0004}.modal-content{background:var(--surface);color:var(--ink)}.saved-card{border:1px solid var(--line);border-radius:13px;padding:12px;margin-bottom:10px}.saved-colors{display:flex;height:45px;border-radius:9px;overflow:hidden;margin:8px 0}.saved-colors i{flex:1}@media(max-width:1050px){.studio-shell{grid-template-columns:200px minmax(0,1fr)}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}@media(max-width:720px){.studio-shell{display:block}.side-panel{border-right:0;border-bottom:1px solid var(--line)}.palette-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.swatch{height:130px}.hero{padding-top:65px}.section{padding:48px 0}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}