/* htmlcss: generator layout, previews, preset cards */
.lead{font-size:1.08rem;color:var(--soft)}
code{font-family:var(--mono);font-size:.92em;background:var(--surface2);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}
pre.code{position:relative;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:12px 78px 12px 14px;overflow-x:auto;font:500 .93rem/1.55 var(--mono);margin:10px 0}
pre.code code{background:none;padding:0;white-space:pre}
pre.code .copy{position:absolute;top:6px;right:6px;min-height:40px;min-width:60px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 .85rem var(--font);cursor:pointer}
.gen-wrap{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.gen-wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}.gen-wrap .pv{position:sticky;top:12px}}
.gen-ctl{margin:0}.gen-ctl label{display:flex;justify-content:space-between;gap:8px}.gen-ctl output{font:600 .85rem var(--mono);color:var(--soft)}
.gen-ctl input[type=range]{width:100%;min-height:40px}.gen-ctl input[type=color]{width:100%;min-height:44px;padding:2px}.gen-ctl select{min-height:44px;font-size:1rem}.gen-ctl input[type=checkbox]{width:32px;height:32px}.gen-ctl [data-c]:has(input[type=checkbox]) label{min-height:44px;align-items:center}
.gen-ctl [hidden]{display:none}
.pv{min-height:300px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;position:relative}
.pv-inner{width:min(70%,240px);aspect-ratio:1;background:linear-gradient(135deg,#5b8def,#8e54e9);border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;text-align:center;padding:10px}
.pv-box .pv-inner{width:min(100%,360px);aspect-ratio:16/10;border-radius:14px}
.pv-card{background:#f4f6fb}.pv-card .pv-inner{background:#fff;color:#1b2a49;border-radius:16px}
.pv-clip .pv-inner{width:min(70%,260px)}
.pv-blob .pv-inner{width:min(70%,260px)}
.pv-anim .pv-inner{width:110px;border-radius:16px}
.pv-flex,.pv-grid{display:block;min-height:320px;align-items:stretch}
.pv-items{width:100%;min-height:280px;background:var(--surface2);border:1px dashed var(--line);border-radius:10px;padding:8px;box-sizing:border-box}
.pv-items>span{background:#5b8def;color:#fff;border-radius:8px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;font-weight:700;padding:6px}
.pv-glass{background:#1b2a49}
.pv-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 25%,#ff7e5f 0 70px,transparent 71px),radial-gradient(circle at 78% 30%,#feb47b 0 90px,transparent 91px),radial-gradient(circle at 60% 80%,#8e54e9 0 100px,transparent 101px),linear-gradient(135deg,#2193b0,#1b2a49)}
.pv-panel{position:relative;width:min(80%,300px);padding:28px 20px;color:#fff;text-align:center;display:grid;gap:4px}
.pv-panel span{font-size:.9rem}
.presets-grid{list-style:none;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.pcard h3{margin:10px 0 2px;font-size:1.05rem}.pcard p{margin:0 0 6px;font-size:.93rem;color:var(--soft)}
.pswatch{height:110px;border-radius:10px;border:1px solid var(--line)}
.pswatch.shadowbox{background:#f4f6fb;border:0;margin:14px;height:90px;background:#fff}
.pswatch.clipbox{background:linear-gradient(135deg,#5b8def,#8e54e9);border:0}
.pcard pre.code{font-size:.8rem;padding-right:70px;white-space:pre-wrap}.pcard pre.code code{white-space:pre-wrap;overflow-wrap:anywhere}
.next{margin-top:26px}
.grid a{align-items:flex-start;flex-direction:column}
@media (prefers-reduced-motion:reduce){.pv-anim .pv-inner{animation:none!important}}
@media print{.next,.btn,.copy,.finder{display:none!important}}