:root{color-scheme:light;--ink: #10141f;--muted: #5a6475;--panel: #ffffff;--panel-border: #e2e6ef;--accent: #111827;--accent-soft: #e9eef9;--shadow: 0 24px 45px rgba(17, 24, 39, .14);--shadow-soft: 0 16px 40px rgba(17, 24, 39, .08);--glow: 0 0 40px rgba(79, 70, 229, .35)}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:var(--ink);min-height:100vh;background:radial-gradient(circle at 10% 15%,#f4edff 0%,transparent 45%),radial-gradient(circle at 90% 15%,#e5f3ff 0%,transparent 40%),linear-gradient(145deg,#f7f8fb,#eef2fb,#fef6f0)}body:before,body:after{content:"";position:fixed;border-radius:999px;z-index:0;opacity:.6;filter:blur(10px)}body:before{width:320px;height:320px;top:-120px;right:15%;background:radial-gradient(circle at top,rgba(99,102,241,.4),transparent 70%)}body:after{width:280px;height:280px;bottom:-100px;left:10%;background:radial-gradient(circle at center,rgba(244,114,182,.35),transparent 70%)}.page{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:20px 0;display:flex;flex-direction:column;gap:36px}.hero{gap:32px;align-items:end;animation:rise .7s ease-out}.hero__text h1{font-family:Bricolage Grotesque,Space Grotesk,sans-serif;font-size:clamp(24px,3vw,36px);margin:0;letter-spacing:-.02em}.eyebrow{text-transform:uppercase;letter-spacing:.35em;font-size:12px;margin:0 0 16px;color:var(--muted);font-weight:600}.eyebrow__link{color:inherit;text-decoration:none}.eyebrow__link:hover{color:var(--ink)}.subtitle{margin:0;font-size:16px;color:var(--muted);max-width:520px}.hero__card{background:var(--panel);border:1px solid var(--panel-border);border-radius:20px;padding:20px 24px;box-shadow:var(--shadow);animation:floatIn .9s ease-out}.hero__card h2{margin:0 0 12px;font-family:Segoe UI,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:20px}.hero__card ul{padding-left:18px;margin:0;display:grid;gap:8px;color:var(--muted)}.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:24px;padding:24px;box-shadow:var(--shadow-soft)}.panel__header h3{margin:0 0 6px;font-family:Segoe UI,Helvetica Neue,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:22px}.panel__header-main{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel__reset{border:1px solid var(--panel-border);background:#f8f9ff;color:var(--ink);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer}.panel__reset:hover{background:#eef2ff;border-color:#c7d2fe}.panel__header p{margin:0 0 20px;color:var(--muted)}.controls{display:flex;flex-direction:column;gap:18px}.control-group{display:grid;gap:16px}.control-group--paired{grid-template-columns:repeat(2,minmax(0,1fr))}.control--full{grid-column:1 / -1}.control-group--paired>[data-radius-anchor]{display:none}.control-group.is-hidden{display:none}.control{display:grid;gap:8px}.control__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.control__value{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}.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-radius:12px;border:1px solid var(--panel-border);padding:10px 12px;font-size:14px;background:#f8f9ff}.icon-dropdown{position:relative}.icon-trigger{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--panel-border);background:#f8f9ff;padding:10px 12px;border-radius:12px;cursor:pointer}.icon-trigger__preview{width:28px;height:28px;border-radius:8px;background:#eef2ff;border:1px solid var(--panel-border);display:grid;place-items:center}.icon-trigger__preview [data-icon-trigger-preview]{width:100%;height:100%;display:grid;place-items:center}.icon-trigger__preview svg{width:16px;height:16px}.icon-trigger__label{flex:1;text-align:left;font-size:14px}.icon-trigger__caret{color:var(--muted);font-size:12px}.icon-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:10px;box-shadow:var(--shadow-soft);z-index:10;display:grid;gap:10px}.icon-menu.is-hidden{display:none}.icon-menu.is-loading .icon-options{opacity:.6;pointer-events:none}.icon-menu.is-loading .icon-options:before{content:"Loading icons...";display:block;font-size:12px;font-weight:600;color:#6366f1;padding:6px 10px 10px}.icon-options{max-height:240px;overflow:auto;padding-right:4px;position:relative;--icon-row: 46px}.icon-options__spacer{height:0}.icon-options__list{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;gap:6px}.icon-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;height:40px}.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{width:24px;height:24px;border-radius:8px;background:#eef2ff;border:1px solid var(--panel-border);display:grid;place-items:center}.icon-option__preview [data-icon-preview]{width:100%;height:100%;display:grid;place-items:center}.icon-option__preview svg{width:16px;height:16px}.icon-option__name{font-size:13px;color:var(--ink)}input[type=text]:focus,select:focus{outline:2px solid rgba(99,102,241,.4);border-color:transparent}.helper{font-size:12px;color:var(--muted)}.segmented{display:inline-flex;background:var(--accent-soft);padding:4px;border-radius:999px;gap:4px}.segmented__btn{border:none;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted);transition:all .2s ease}.segmented__btn.is-active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-soft)}.color{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.color input[type=color]{width:42px;height:42px;border-radius:12px;border:1px solid var(--panel-border);background:#fff;padding:4px;cursor:pointer}.range{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.range input[type=range]{accent-color:#4f46e5;cursor:pointer}.range span{font-size:13px;color:var(--muted);min-width:54px;text-align:right}.preset-row{display:flex;flex-wrap:wrap;gap:8px}.preset-chip{border:1px solid rgba(15,23,42,.12);background:#f8f9ff;color:var(--ink);padding:6px 10px 6px 8px;border-radius:999px;font-weight:600;font-size:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s ease}.preset-chip:hover{border-color:#c7d2fe;box-shadow:var(--shadow-soft)}.preset-swatch{width:16px;height:16px;border-radius:999px;border:0;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{--preview-size: 220px;position:relative;padding:28px;display:grid;place-items:center;background:transparent}.preview__canvas.is-loading:before{content:"";position:absolute;width:var(--preview-size);height:var(--preview-size);left:50%;top:50%;transform:translate(-50%,-50%);border-radius:var(--preview-radius-percent, 22%);background:linear-gradient(110deg,#eef1f8 30%,#f8f9ff,#eef1f8 70%);background-size:200% 100%;animation:preview-shimmer 1.25s infinite}.preview__canvas.is-loading .preview__image{opacity:0}@keyframes preview-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.preview__image{width:var(--preview-size);height:var(--preview-size);border-radius:var(--preview-radius-percent, 22%);filter:drop-shadow(0 24px 45px rgba(17,24,39,.14));background:transparent;overflow:hidden}.preview__image>svg{display:block;width:100%;height:100%;border-radius:inherit}.preview__canvas.is-transparent .preview__image{background-color:#fff;background-image:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.preview__url{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:18px}.preview__url input{background:#f4f6ff}.preview__url button{border:none;background:#111827;color:#fff;padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:600}.preview__sizes{margin-top:18px;display:grid;gap:10px}.preview__sizes p{margin:0;font-weight:600}.preview__sizes-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.segmented--compact{padding:2px;border-radius:999px}.segmented--compact .segmented__btn{font-size:11px;padding:4px 8px}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.chip-group{display:inline-flex;align-items:center;gap:0;background:#f1f3fb;border:1px solid #e2e8f0;border-radius:999px;overflow:hidden}.chip-group:hover{border-color:#c7d2fe}.chip{text-decoration:none;font-size:11px;padding:5px 9px;border-radius:999px;background:transparent;color:var(--ink);border:0}.chip--download{display:inline-flex;align-items:center;justify-content:center;min-width:26px;font-size:11px;padding:5px 6px;border-left:1px solid #d8e1f4;color:#4338ca;background:#eef2ff}.chip-group:hover .chip{color:#1e1b4b}.chip-group:hover .chip--download{color:#312e81;background:#e0e7ff}.chip-group.is-selected{border-color:#818cf8;background:#eef2ff}.chip-group.is-selected .chip{color:#312e81}.chip-group.is-selected .chip--download{background:#e0e7ff;color:#312e81}.chip__icon{font-size:12px;line-height:1}.preview__snippet{margin-top:18px;display:grid;gap:8px}.footer{margin-top:32px;padding:18px 0 8px;text-align:center;font-size:12px;color:var(--muted)}.footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(148,163,184,.4)}.footer a:hover{color:var(--ink);border-bottom-color:#6366f180}.preview__snippet p{margin:0;font-weight:600}.snippet-list{display:grid;gap:14px}.snippet-group{display:grid;gap:10px}.snippet-group__title{margin:0;font-size:12px;font-weight:600;color:#475569;letter-spacing:.08em;text-transform:uppercase}.snippet-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:14px;font-size:12px;overflow:hidden}.snippet-row code{white-space:nowrap;overflow-x:auto;display:block;scrollbar-width:none;-ms-overflow-style:none}.snippet-row code::-webkit-scrollbar{display:none}.snippet-copy{border:1px solid rgba(226,232,240,.3);background:transparent;color:#e2e8f0;padding:8px 12px;border-radius:10px;font-weight:600;cursor:pointer}.snippet-copy:hover{border-color:#e2e8f099}pre{margin:0;background:#0f172a;color:#e2e8f0;padding:14px 16px;border-radius: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%}}@media(max-width:640px){.control-group--paired{grid-template-columns:1fr}}