@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 0 12px;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-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.panel__header-row h3{margin:0}.panel__header p{color:var(--muted);margin:0 0 20px}.controls{flex-direction:column;gap:18px;display:flex}.reset-btn{border:1px solid var(--panel-border);color:var(--ink);cursor:pointer;background:#f7f9ff;border-radius:12px;padding:10px 16px;font-weight:600;transition:all .2s}.reset-btn:hover{box-shadow:var(--shadow-soft);border-color:#c7d2fe}.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}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}.preview{position:relative}.preview__canvas{background:#f4f6ff;border-radius:24px;place-items:center;padding:28px;display:grid;position:relative;overflow:hidden}.preview__image{width:220px;height:220px;box-shadow:var(--shadow);background:#fff;border-radius:22%}.preview__url{grid-template-columns:minmax(0,1fr) auto 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}.copy-status{color:var(--muted);font-size:12px}.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{color:var(--ink);background:#f1f3fb;border:1px solid #0000;border-radius:999px;padding:6px 10px;font-size:12px;text-decoration:none}.chip:hover{border-color:#c7d2fe}.preview__grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:12px;margin-top:18px;display:grid}.thumb{color:var(--muted);justify-items:center;gap:8px;font-size:12px;display:grid}.thumb img{width:48px;height:48px;box-shadow:var(--shadow-soft);border-radius:12px}.preview__snippet{gap:8px;margin-top:18px;display:grid}.preview__snippet p{margin:0;font-weight:600}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:980px){.hero,.studio,.preview__url{grid-template-columns:1fr}.preview__url button{width:100%}}