@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#10141f;--muted:#5a6475;--panel:#fff;--panel-border:#e2e6ef;--accent:#111827;--accent-soft:#e9eef9;--shadow:0 24px 45px #11182724;--shadow-soft:0 16px 40px #11182714;--glow:0 0 40px #4f46e559}*,:before,:after{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(circle at 10% 15%,#f4edff 0%,#0000 45%),radial-gradient(circle at 90% 15%,#e5f3ff 0%,#0000 40%),linear-gradient(145deg,#f7f8fb 0%,#eef2fb 50%,#fef6f0 100%);min-height:100vh;margin:0;font-family:Space Grotesk,Segoe UI,sans-serif}body:before,body:after{content:"";z-index:0;opacity:.6;filter:blur(10px);border-radius:999px;position:fixed}body:before{background:radial-gradient(circle at top,#6366f166,#0000 70%);width:320px;height:320px;top:-120px;right:15%}body:after{background:radial-gradient(circle,#f472b659,#0000 70%);width:280px;height:280px;bottom:-100px;left:10%}.page{z-index:1;flex-direction:column;gap:36px;max-width:1200px;margin:0 auto;padding:20px 0;display:flex;position:relative}.hero{align-items:end;gap:32px;animation:.7s ease-out rise}.hero__text h1{letter-spacing:-.02em;margin:0;font-family:Bricolage Grotesque,Space Grotesk,sans-serif;font-size:clamp(24px,3vw,36px)}.eyebrow{text-transform:uppercase;letter-spacing:.35em;color:var(--muted);margin:0 0 16px;font-size:12px;font-weight:600}.subtitle{color:var(--muted);max-width:520px;margin:0;font-size:16px}.hero__card{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);border-radius:20px;padding:20px 24px;animation:.9s ease-out floatIn}.hero__card h2{margin:0 0 12px;font-family:Bricolage Grotesque,Space Grotesk,sans-serif;font-size:20px}.hero__card ul{color:var(--muted);gap:8px;margin:0;padding-left:18px;display:grid}.studio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;display:grid}.panel{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow-soft);border-radius:24px;padding:24px}.panel__header h3{margin:0 0 6px;font-family:Bricolage Grotesque,Space Grotesk,sans-serif;font-size:22px}.panel__header p{color:var(--muted);margin:0 0 20px}.controls{flex-direction:column;gap:18px;display:flex}.control-group{gap:16px;display:grid}.control-group.is-hidden{display:none}.control{gap:8px;display:grid}.control.is-disabled{opacity:.55;pointer-events:none}label{font-size:14px;font-weight:600}input,select,button{font-family:inherit}input[type=text],select{border:1px solid var(--panel-border);background:#f8f9ff;border-radius:12px;padding:10px 12px;font-size:14px}.icon-dropdown{position:relative}.icon-trigger{border:1px solid var(--panel-border);cursor:pointer;background:#f8f9ff;border-radius:12px;align-items:center;gap:10px;width:100%;padding:10px 12px;display:flex}.icon-trigger__preview{border:1px solid var(--panel-border);background:#eef2ff;border-radius:8px;place-items:center;width:28px;height:28px;display:grid}.icon-trigger__preview [data-icon-trigger-preview]{place-items:center;width:100%;height:100%;display:grid}.icon-trigger__preview svg{width:16px;height:16px}.icon-trigger__label{text-align:left;flex:1;font-size:14px}.icon-trigger__caret{color:var(--muted);font-size:12px}.icon-menu{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow-soft);z-index:10;border-radius:14px;gap:10px;padding:10px;display:grid;position:absolute;top:calc(100% + 8px);left:0;right:0}.icon-menu.is-hidden{display:none}.icon-options{--icon-row:46px;max-height:240px;padding-right:4px;position:relative;overflow:auto}.icon-options__spacer{height:0}.icon-options__list{flex-direction:column;gap:6px;display:flex;position:absolute;top:0;left:0;right:0}.icon-option{cursor:pointer;text-align:left;box-sizing:border-box;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;height:40px;padding:8px 10px;display:flex}.icon-option:hover{background:#f1f5ff;border-color:#c7d2fe}.icon-option.is-selected{background:#e0e7ff;border-color:#a5b4fc}.icon-option.is-hidden{display:none}.icon-option__preview{border:1px solid var(--panel-border);background:#eef2ff;border-radius:8px;place-items:center;width:24px;height:24px;display:grid}.icon-option__preview [data-icon-preview]{place-items:center;width:100%;height:100%;display:grid}.icon-option__preview svg{width:16px;height:16px}.icon-option__name{color:var(--ink);font-size:13px}input[type=text]:focus,select:focus{border-color:#0000;outline:2px solid #6366f166}.helper{color:var(--muted);font-size:12px}.segmented{background:var(--accent-soft);border-radius:999px;gap:4px;padding:4px;display:inline-flex}.segmented__btn{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:999px;padding:8px 16px;font-weight:600;transition:all .2s}.segmented__btn.is-active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-soft)}.color{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;display:grid}.color input[type=color]{border:1px solid var(--panel-border);background:#fff;border-radius:12px;width:42px;height:42px;padding:4px}.range{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;display:grid}.range input[type=range]{accent-color:#4f46e5}.range span{color:var(--muted);text-align:right;min-width:54px;font-size:13px}.preset-row{flex-wrap:wrap;gap:8px;display:flex}.preset-chip{color:var(--ink);cursor:pointer;background:#f8f9ff;border:1px solid #0f172a1f;border-radius:999px;align-items:center;gap:8px;padding:6px 10px 6px 8px;font-size:12px;font-weight:600;transition:all .2s;display:inline-flex}.preset-chip:hover{box-shadow:var(--shadow-soft);border-color:#c7d2fe}.preset-swatch{border:0;border-radius:999px;width:16px;height:16px;box-shadow:inset 0 0 0 1px #0f172a1f}.preset-swatch--rainbow{background:conic-gradient(#ef4444,#f59e0b,#facc15,#22c55e,#38bdf8,#6366f1,#a855f7,#ef4444)}.preset-chip--random{padding:6px 12px}.preset-chip--random:hover{box-shadow:var(--shadow-soft)}.preview{position:relative}.preview__canvas{background:#f4f6ff;border-radius:24px;place-items:center;padding:28px;display:grid;position:relative;overflow:hidden}.preview__canvas.is-loading:before{content:"";background:linear-gradient(110deg,#eef1f8 30%,#f8f9ff 50%,#eef1f8 70%) 0 0/200% 100%;animation:1.25s infinite preview-shimmer;position:absolute;inset:0}.preview__canvas.is-loading .preview__image{opacity:0}@keyframes preview-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.preview__image{width:220px;height:220px;box-shadow:var(--shadow);background:0 0;border-radius:22%;overflow:hidden}.preview__url{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:18px;display:grid}.preview__url input{background:#f4f6ff}.preview__url button{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:12px;padding:10px 16px;font-weight:600}.preview__sizes{gap:10px;margin-top:18px;display:grid}.preview__sizes p{margin:0;font-weight:600}.chip-row{flex-wrap:wrap;gap:8px;display:flex}.chip-group{background:#f1f3fb;border:1px solid #e2e8f0;border-radius:999px;align-items:center;gap:0;display:inline-flex;overflow:hidden}.chip-group:hover{border-color:#c7d2fe}.chip{color:var(--ink);background:0 0;border:0;border-radius:999px;padding:6px 10px;font-size:12px;text-decoration:none}.chip:hover{color:#1e1b4b}.chip--download{color:#4338ca;background:#eef2ff;border-left:1px dashed #c7d2fe;align-items:center;gap:6px;padding:5px 9px 5px 10px;font-size:11px;display:inline-flex}.chip--download:hover{color:#312e81;background:#e0e7ff}.chip__icon{font-size:12px;line-height:1}.preview__snippet{gap:8px;margin-top:18px;display:grid}.preview__snippet p{margin:0;font-weight:600}.snippet-list{gap:14px;display:grid}.snippet-group{gap:10px;display:grid}.snippet-group__title{color:#475569;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:12px;font-weight:600}.snippet-row{color:#e2e8f0;background:#0f172a;border-radius:14px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;font-size:12px;display:grid;overflow:hidden}.snippet-row code{white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;display:block;overflow-x:auto}.snippet-row code::-webkit-scrollbar{display:none}.snippet-copy{color:#e2e8f0;cursor:pointer;background:0 0;border:1px solid #e2e8f04d;border-radius:10px;padding:8px 12px;font-weight:600}.snippet-copy:hover{border-color:#e2e8f099}pre{color:#e2e8f0;background:#0f172a;border-radius:16px;margin:0;padding:14px 16px;font-size:12px;overflow-x:auto}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes floatIn{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:1200px){.page{padding:20px 16px}}@media (max-width:980px){.hero,.studio,.preview__url{grid-template-columns:1fr}.preview__url button{width:100%}}