:root{--bg:#f4f5f9;--card:#fff;--ink:#12141d;--mut:#5b6072;--line:#dfe2ec;--acc:#3b4fd8;--acc-ink:#fff;--accsoft:#e8ebff;--ok:#0f7a4d;--okbg:#e5f6ee;--warn:#8a5a00;--warnbg:#fff3d6;--bad:#b3261e;--badbg:#fde8e6;--paper:#fff;--r:14px;--sh:0 1px 2px rgba(20,24,40,.06),0 8px 24px rgba(20,24,40,.06);color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1017;--card:#171a24;--ink:#eceef6;--mut:#a0a5b8;--line:#2a2e3d;--acc:#7b8cff;--acc-ink:#0b0e1d;--accsoft:#252c55;--ok:#6fe0a8;--okbg:#10301f;--warn:#f3c768;--warnbg:#3a2c0a;--bad:#ff9a92;--badbg:#3d1512;--paper:#222637;--sh:none;color-scheme:dark}}
:root[data-theme=dark]{--bg:#0e1017;--card:#171a24;--ink:#eceef6;--mut:#a0a5b8;--line:#2a2e3d;--acc:#7b8cff;--acc-ink:#0b0e1d;--accsoft:#252c55;--ok:#6fe0a8;--okbg:#10301f;--warn:#f3c768;--warnbg:#3a2c0a;--bad:#ff9a92;--badbg:#3d1512;--paper:#222637;--sh:none;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-width:320px}
h1,h2,h3{margin:0;line-height:1.25}h1{font-size:1.5rem}h2{font-size:1.05rem}a{color:var(--acc)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip{position:absolute;left:8px;top:-60px;background:var(--acc);color:var(--acc-ink);padding:10px 14px;border-radius:8px;z-index:50}.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px clamp(12px,3vw,32px);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{min-height:44px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.05rem;white-space:nowrap}.brand b span{color:var(--acc)}.brand-mark{width:30px;height:30px;padding:6px;border-radius:9px;background:var(--acc);fill:var(--acc-ink)}
.main-nav,.top>nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}
.main-nav button,.top>nav a{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:none;color:var(--mut);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none}
.main-nav button:hover{background:var(--accsoft);color:var(--ink)}.main-nav button[aria-current=page]{background:var(--accsoft);color:var(--acc)}
.icon-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer;display:grid;place-items:center;flex:none}.icon-btn svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2}
.wrap{max-width:1280px;margin:0 auto;padding:20px clamp(12px,3vw,32px) 120px}
.create{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}.pad{padding:20px}
.type-bar{margin-bottom:14px}.types{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.types button{flex:none;scroll-snap-align:start;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.types button svg{width:18px;height:18px;stroke:currentColor;flex:none}.types button[aria-pressed=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.step-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.step-tabs button{min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-bottom:3px solid transparent;background:none;color:var(--mut);font:inherit;font-weight:600;cursor:pointer;padding:0 4px}
.step-tabs i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-size:12px;color:var(--ink)}
.step-tabs button[aria-selected=true]{color:var(--acc);border-bottom-color:var(--acc)}.step-tabs button[aria-selected=true] i{background:var(--acc);color:var(--acc-ink)}
.panel{padding:20px}.panel[hidden]{display:none}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.panel-head.sep,h2.sep{margin-top:26px}
.muted{color:var(--mut);font-size:13px}.note{color:var(--mut);font-size:13px;margin:8px 0}.foot-note{color:var(--mut);font-size:12px;text-align:center;margin:14px 0 0}
label{display:block;font-size:13px;font-weight:600;color:var(--mut);margin:0 0 14px}
input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),select,textarea{display:block;width:100%;min-height:46px;margin-top:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;font-weight:400}
textarea{min-height:110px;resize:vertical}input[type=color]{display:block;width:100%;height:46px;margin-top:6px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}
input[type=range]{display:block;width:100%;margin-top:10px;accent-color:var(--acc);height:28px}input[type=file]{margin-top:6px;max-width:100%}
.chk{display:flex;align-items:center;gap:12px;min-height:44px;font-weight:500;color:var(--ink);cursor:pointer;margin:0}.chk input{width:22px;height:22px;accent-color:var(--acc);flex:none;margin:0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.btn,button.btn{min-height:46px;padding:0 18px;border:1px solid var(--acc);border-radius:10px;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;cursor:pointer}.btn.ghost{background:none;color:var(--acc)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):hover{filter:brightness(1.08)}
.upload{flex:1;min-width:200px}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-bottom:16px}
.presets button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit}.presets span{width:36px;height:36px;border-radius:10px;border:1px solid var(--line)}.presets i{font-style:normal;font-size:11px;text-align:center}.presets button:hover{border-color:var(--acc)}
.shape-grid,.icon-grid,.seg,.frame-grid{display:grid;gap:8px}.shape-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}.shape-grid.eyes{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));margin:12px 0}.seg{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));margin-bottom:14px}.frame-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));margin-bottom:16px}
.shape-grid button,.icon-grid button,.seg button,.frame-grid button{min-height:52px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer;display:grid;place-items:center;font:inherit;font-size:13px;font-weight:600}
.shape-grid svg{width:36px;height:36px;color:var(--ink)}.icon-grid svg{width:26px;height:26px}.frame-grid button{gap:4px;padding:8px 4px;font-size:11px;font-weight:600;text-align:center}.frame-grid svg{width:44px;height:44px;color:var(--ink)}
[aria-pressed=true]{border-color:var(--acc)!important;box-shadow:0 0 0 2px var(--acc);background:var(--accsoft)!important}
.preview{padding:16px}.preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.stage{display:grid;place-items:center;min-height:240px;padding:14px;border-radius:12px;background:repeating-conic-gradient(color-mix(in srgb,var(--line) 55%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px,var(--paper)}.stage svg{display:block;width:100%;height:auto;max-width:420px;max-height:min(60vh,520px)}
.check{display:flex;gap:12px;align-items:flex-start;margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}.check b{display:block}.check p{margin:2px 0 0;font-size:13px;color:inherit}.check .dot{width:12px;height:12px;border-radius:50%;margin-top:5px;flex:none;background:var(--mut)}
.check[data-state=ok]{background:var(--okbg);color:var(--ok);border-color:currentColor}.check[data-state=ok] .dot{background:var(--ok)}.check[data-state=warn]{background:var(--warnbg);color:var(--warn);border-color:currentColor}.check[data-state=warn] .dot{background:var(--warn)}.check[data-state=fail]{background:var(--badbg);color:var(--bad);border-color:currentColor}.check[data-state=fail] .dot{background:var(--bad)}
.check[data-state=checking] .dot{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.check .dot{animation:none!important}*{scroll-behavior:auto!important}}
.export-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.export-set label{margin:0}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.export-actions .primary{grid-column:1/-1}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin:14px 0}.tpl{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);cursor:pointer;font:inherit;font-size:12px;font-weight:600}.tpl svg{width:100%;height:auto;border-radius:6px}.save-style{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.save-style label{flex:1;min-width:200px;margin:0}
.tool{max-width:760px;margin:0 auto}.tag{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--accsoft);color:var(--acc);font-weight:700}
#batchRows p{margin:4px 0;font-size:13px;color:var(--mut);overflow-wrap:anywhere}
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)}.mobile-bar[hidden]{display:none!important}
.mini{width:48px;height:48px;flex:none;border-radius:8px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}.mini svg{width:100%;height:100%;display:block;object-fit:contain}.mini-status{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}.mini-status b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:899px){.mobile-bar{display:flex}.export-actions .primary{display:none}.col-preview{order:-1}.col-preview .preview{position:static}.stage{min-height:200px}.stage svg{max-height:42vh}}
@media(max-width:560px){.top{gap:6px}.brand b{font-size:.95rem}.brand-mark{display:none}.step-tabs span{display:none}.step-tabs button{min-height:52px}.grid3{grid-template-columns:1fr 1fr}.export-set{grid-template-columns:1fr}.panel{padding:16px}.main-nav button{padding:0 10px;font-size:14px}}
@media(min-width:900px){.create{grid-template-columns:minmax(0,1fr) 400px;align-items:start;gap:24px}.col-preview{position:sticky;top:76px}}
@media(min-width:1280px){.create{grid-template-columns:minmax(0,1fr) 460px}}
/* dynamic-code management page (server-rendered) */
.dynamic-qr,.stats-grid,.status-box,.chart,form,.secret-note,.eyebrow,.dl,.row{max-width:760px}
body:not(.editor) main{max-width:800px;margin:0 auto;padding:24px clamp(12px,3vw,24px) 60px}.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--acc);font-weight:700;margin:0 0 6px}.secret-note{padding:12px 14px;border-radius:12px;background:var(--warnbg);color:var(--warn);font-size:14px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}.stat{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}.stat strong{display:block;font-size:1.6rem}.stat span{color:var(--mut);font-size:13px}
.dynamic-qr{padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin:16px 0}#dynamic-stage{display:grid;place-items:center;padding:12px;background:#fff;border-radius:12px}#dynamic-stage svg,#dynamic-stage .qr{width:100%;max-width:340px;height:auto}
#dynamic-status[data-state=ok]{color:var(--ok)}#dynamic-status[data-state=fail]{color:var(--bad)}.dl{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.dl button,form button{min-height:46px;padding:0 18px;border:0;border-radius:10px;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;cursor:pointer}.dl button:disabled{opacity:.45}
.status-box{padding:12px 14px;border-radius:12px;background:var(--accsoft);overflow-wrap:anywhere}.chart{display:flex;gap:8px;align-items:flex-end;height:130px;margin:12px 0}.chart>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font-size:11px;color:var(--mut);gap:3px}.chart i{display:block;width:100%;background:var(--acc);border-radius:4px 4px 0 0}
.types button[aria-pressed=true]{background:var(--acc)!important;color:var(--acc-ink)!important;box-shadow:none}
.wrap{padding-bottom:140px}@media(min-width:900px){.wrap{padding-bottom:40px}}

.tool.wide{max-width:1100px}.pic-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.pic-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.pic-out{position:sticky;top:76px}}
.my-styles{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}.my-styles summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}.upload-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0;border:1px solid var(--acc);border-radius:10px;min-height:46px;padding:0 18px;color:var(--acc);font-weight:700}
.export-actions{grid-template-columns:1fr 1fr}.export-actions .btn{padding:0 10px;font-size:14px}
.types{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:30px}.type-cap{margin:0 2px 6px;font-size:12px}
.upload-btn input{display:none}.range .muted{font-weight:400;font-size:12px;display:block}
.step-tabs button{padding:0 2px}@media(min-width:900px){.col-preview .preview{max-height:calc(100vh - 96px);overflow:auto}}
@media(max-width:430px){.top{padding:8px 10px;gap:4px}.brand b{font-size:.88rem}.main-nav{gap:0;margin-left:2px;flex:1;justify-content:flex-end}.main-nav button{padding:0 8px;font-size:13px}.icon-btn{width:40px;height:40px}.step-tabs span{display:none}}

/* ---- v10: one editor page, independent optional sections ---- */
.create{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "preview" "style" "adv" "foot"}
#cardContent{grid-area:content;padding:18px}#previewPanel{grid-area:preview}#cardStyle{grid-area:style;padding:18px}#advanced{grid-area:adv}.foot-note{grid-area:foot}
@media(min-width:900px){.create{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"content preview" "style preview" "adv preview" "foot preview";align-items:start;column-gap:24px}#previewPanel{position:sticky;top:76px;align-self:start}}
@media(min-width:1280px){.create{grid-template-columns:minmax(0,1fr) 460px}}
.field-title{margin:14px 0 8px;font-size:15px}.types{margin:10px 0 0;padding:2px 30px 8px 2px}
.mode-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.seg2 button{min-height:44px;border:0;border-radius:9px;background:none;color:var(--mut);font:inherit;font-weight:700;cursor:pointer;box-shadow:none!important}
.seg2 button[aria-pressed=true]{background:var(--card)!important;color:var(--acc);box-shadow:0 0 0 2px var(--acc)!important}
.limits{margin:8px 0 0;padding:12px 14px 12px 30px;border-radius:12px;background:var(--warnbg);color:var(--warn);font-size:13px}.limits li{margin:2px 0}
.sec{border:1px solid var(--line);border-radius:12px;margin-top:10px;background:var(--card)}.sec>summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px}
.sec>summary::-webkit-details-marker{display:none}.sec>summary::after{content:"+";font-size:20px;color:var(--mut);margin-left:6px}.sec[open]>summary::after{content:"–"}
.sec>summary .sum{margin-left:auto;font-size:12px;text-align:right}.sec-body{padding:2px 14px 14px}.sub{font-size:13px;color:var(--mut);margin:16px 0 8px;font-weight:700}
.adv{padding:0;margin-top:0}.btn.small{min-height:36px;padding:0 12px;font-size:13px}
.dl-row{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:end;margin-top:4px}.dl-row label{margin:0}.dl-row .btn{min-height:46px;width:100%}.dl-row:has(label[hidden]){grid-template-columns:1fr}
.more{margin-top:10px}.more>summary{cursor:pointer;color:var(--mut);font-weight:600;min-height:44px;display:flex;align-items:center}.more-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.more-actions .btn{padding:0 8px;font-size:13px}
.presets{margin-bottom:6px}.step-tabs,.type-bar{display:none}
@media(max-width:899px){.col-preview{order:0}.stage{min-height:220px}.stage svg{max-height:38vh}#previewPanel .dl-row{display:none}#previewPanel .more{display:none}.preview{padding:12px}.wrap{padding-bottom:110px}}
@media(max-width:560px){.dl-row{grid-template-columns:1fr}}

/* v10 polish */
.top .brand b{white-space:nowrap}.main-nav{min-width:0}
@media(max-width:560px){.brand b{font-size:0}.brand b::before{content:"QR";font-size:1rem;font-weight:800}.brand-mark{display:grid}.brand-mark{width:28px;height:28px}.main-nav button{padding:0 9px;font-size:13px;min-height:40px}.top{padding:8px 10px}
 #cardContent{padding:14px}.field-title{display:none}.mode-box{margin-top:10px;padding-top:10px}#modeNote{display:none}.limits{display:block}.preview-head{margin-bottom:4px}.stage{min-height:0;padding:8px}.stage svg{max-height:34vh}#check{padding:8px 10px;margin:8px 0}#check p{display:none}}
.presets{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:560px){.presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.presets i{font-size:10px}}
.presets button{min-height:72px}.presets i{font-size:12px;color:var(--ink)}
.more>summary{list-style:none;display:flex;justify-content:space-between;padding:0 4px}.more>summary::-webkit-details-marker{display:none}.more>summary::after{content:"+";font-size:20px}.more[open]>summary::after{content:"–"}
.types{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.muted,.note{color:var(--mut)}.note{font-size:13px}
.limits[hidden],[hidden]{display:none!important}
@media(max-width:560px){#cardContent .panel-head{margin-bottom:6px}.types{margin-top:6px}.stage svg{max-height:30vh}}
/* v12: mobile — preview stays pinned while the rest scrolls */
@media(max-width:899px){
 .top{position:static}
 .create{display:flex;flex-direction:column;gap:12px}
 #cardContent{order:1}#previewPanel{order:0}#cardStyle{order:2}#advanced{order:3}.foot-note{order:4}
 #previewPanel{position:sticky;top:0;z-index:25;margin:0 -2px}
 #previewPanel .preview{padding:8px 10px;box-shadow:0 6px 16px rgba(20,24,40,.18);border-radius:0 0 14px 14px}
 #previewPanel .preview-head{display:none}
 #previewPanel .stage{min-height:0;padding:6px}
 #previewPanel .stage svg{max-height:27vh;max-width:100%}
 #previewPanel #check{margin:6px 0 0;padding:6px 10px}
 #previewPanel #check p{display:none}
 #previewPanel #copyStatus{display:none}
}
/* v13: compact pinned preview, no duplicate thumbnail/status in bottom bar, checkerboard only for transparent */
@media(max-width:899px){
 #previewPanel .stage svg{max-height:19vh}
 #previewPanel .preview{padding:6px 10px}
 #previewPanel #check{padding:4px 10px;margin-top:4px;font-size:13px}
 #previewPanel #check .dot{margin-top:4px}
 .mobile-bar .mini,.mobile-bar .mini-status{display:none}
 .mobile-bar{padding:8px 14px calc(8px + env(safe-area-inset-bottom))}.mobile-bar .btn{width:100%}
 .wrap{padding-bottom:84px}
 .stage{background:var(--paper)}
}
.stage.transp{background:repeating-conic-gradient(color-mix(in srgb,var(--line) 55%,transparent) 0 25%,transparent 0 50%) 0 0/16px 16px,var(--paper)}
.sec>summary .sum{max-width:48%}.sec>summary b{white-space:nowrap}
@media(max-width:899px){#previewPanel .stage svg{max-height:17vh}#previewPanel .preview{box-shadow:0 8px 18px rgba(20,24,40,.22)}#sec-colors .grid3:first-child{grid-template-columns:repeat(3,minmax(0,1fr))}#sec-colors .grid3 label{font-size:12px}}

label.btn.upload-btn,.btn.upload-btn{background:var(--card);color:var(--acc);border:1px solid var(--acc)}
.btn.primary.upload-btn{background:var(--acc);color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
#picSec .row,#sec-image .row{display:flex;flex-wrap:wrap;gap:8px}#sec-image .row .btn{flex:1 1 30%;min-width:0;padding:0 10px}

/* v16: big, obvious shape tiles (5 per row) */
.shape-grid,.shape-grid.eyes{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media(min-width:560px){.shape-grid,.shape-grid.eyes{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}}
.shape-grid button{aspect-ratio:1;min-height:0;padding:10px;background:var(--card);border:2px solid var(--line);border-radius:12px}
.shape-grid svg{width:100%;height:100%}
.shape-grid button[aria-pressed=true]{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 25%,transparent)}
.sec-body .panel-head .muted{font-weight:600;color:var(--acc)}
/* v17 */
.shape-grid button[aria-pressed=true]{background:color-mix(in srgb,var(--acc) 14%,var(--card));border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.shape-grid button{color:var(--ink)}.shape-grid button:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
input[type=range]{height:32px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}
@media(max-width:899px){.wrap{padding-bottom:110px}.sec-body .panel-head .muted{font-size:13px}}
/* v18: no scrollbars, no sliders */
.types{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding:2px!important;gap:8px}
.types button{justify-content:center;border-radius:12px;padding:0 10px}
@media(max-width:560px){.types{grid-template-columns:repeat(3,minmax(0,1fr))}.types button{gap:5px;padding:0 6px;font-size:13px}}
input[type=range].stepped{display:none}
.stepper{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center;margin-top:6px}
.stepper button{min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--acc);font:inherit;font-size:22px;font-weight:700;cursor:pointer}
.stepper button:active{background:color-mix(in srgb,var(--acc) 14%,var(--card))}
.stepper output{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:560px){.types button{min-width:0;overflow:hidden;font-size:12.5px;padding:0 4px}.types button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.types button svg{width:16px;height:16px}.main-nav button{padding:0 8px}}

label.off{opacity:.45}.chk:has(input:disabled){opacity:.5}#colorLock{background:var(--warnbg);color:var(--warn);padding:10px 12px;border-radius:10px}