.qr-fs{border:0;margin:0 0 14px;padding:0;min-width:0}
.qr-fs legend{padding:0;margin-bottom:6px}
.qr-kinds label{flex:1 1 30%}
.qr-ta{min-height:96px}
.qr-check-pad{align-self:end}
.qr-color{padding:4px;height:48px;cursor:pointer}
.qr-frame{display:flex;align-items:center;justify-content:center;border-radius:var(--tl-r-sm);background:var(--tl-surface-2);padding:12px;aspect-ratio:1}
.qr-frame.checker{background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%),linear-gradient(45deg,#ddd 25%,transparent 25%,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,8px 8px}
.qr-frame img{width:100%;height:auto;max-width:360px;image-rendering:pixelated;display:block}
.qr-frame.empty img{visibility:hidden}
.qr-meta{text-align:center;margin:10px 0 0}
.qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qr-actions #dl-png{grid-column:1/-1}
.qr-skel{height:260px!important}
.qr-warn{margin:12px 0 0;font-size:.9rem;color:var(--tl-warn);font-weight:600}
.qr-warn:empty{display:none}
.qr-style h2{margin-bottom:14px}
@media (min-width:760px){
  .qr-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;column-gap:16px;align-items:start}
  .qr-input{grid-column:1;grid-row:1}
  .qr-style{grid-column:1;grid-row:2}
  .qr-preview{grid-column:2;grid-row:1/span 2;position:sticky;top:12px}
}