/* Three short creation steps share the same saved input state. */
.workspace[hidden],#template-home[hidden]{display:none!important}
.creation-page[hidden],.creation-steps[hidden]{display:none!important}
.creation-page{display:flex;flex-direction:column;gap:4px;min-width:0}
.creation-steps{display:flex;gap:8px;list-style:none;padding:0;margin:4px 0 24px;color:#778397;font-size:12px;counter-reset:step}
.creation-steps li{flex:1;padding-top:10px;border-top:3px solid #e4e9ef;counter-increment:step}
.creation-steps li:before{content:counter(step) ". ";font-variant-numeric:tabular-nums}
.creation-steps li[aria-current=step]{border-color:#3276b4;color:#254e71;font-weight:650}
.choosing-product .product-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-choices .starter-intro{grid-column:1/-1}
#creation-content .field:last-child{margin-bottom:12px}
#creation-appearance #setup-sizes{margin-top:0}
.setting-up .controls{max-width:760px;width:100%;margin:auto}
.setting-up #customization{margin:10px 0}
.setting-up .creation-page{animation:creation-in .14s ease-out}
@keyframes creation-in{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:650px){.choosing-product .product-choices{grid-template-columns:1fr}.creation-steps{font-size:11px;gap:6px;margin-bottom:20px}.creation-page{gap:0}}
@media(prefers-reduced-motion:reduce){.setting-up .creation-page{animation:none}}
.qr-layouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 20px}
.qr-layout-choice{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 8px;background:#fff;border:1px solid #dbe1e9;border-radius:12px;color:#344054;cursor:pointer}
.qr-layout-choice.selected{border-color:#b9470d;box-shadow:0 0 0 1px #b9470d;background:#fff9f4}
.qr-layout-choice small{font-size:12px;color:#667085}
.qr-layout-choice:focus-visible{outline:3px solid #91adff;outline-offset:3px}
.qr-layout-sample{position:relative;width:94px;height:52px;background:#fff;border:2px solid #d55a19;border-radius:10px;margin-bottom:5px}
.qr-layout-sample i{position:absolute;left:8px;top:14px;width:35px;height:19px;border-radius:3px;background:#f4a371}
.qr-layout-sample b{position:absolute;right:7px;top:7px;width:32px;height:32px;background:repeating-conic-gradient(#8a3b15 0% 25%,#fff 0% 50%) 0 0/8px 8px;border:3px solid #fff}
.qr-layout-illustration{border:0;background:none}
.qr-layout-illustration i{left:2px;top:1px;width:48px;height:48px;border-radius:40% 55% 25% 45%;background:#f4a371}
.qr-layout-illustration b{top:8px;border:4px solid #fff;box-shadow:0 0 0 2px #d55a19;border-radius:3px}
.qr-layout-badge{width:52px;height:64px;margin-top:-6px;margin-bottom:-1px}
.qr-layout-badge i{left:7px;top:5px;width:34px;height:12px}
.qr-layout-badge b{left:7px;top:22px;width:28px;height:28px}
.qr-layout-auto{border-color:#c7d7ee}
.qr-layout-auto i{background:#88aad7}
.qr-layout-auto b{background:repeating-conic-gradient(#254874 0% 25%,#fff 0% 50%) 0 0/8px 8px}
.qr-auto-color{display:flex;align-items:center;gap:8px;margin:12px 0}
.qr-auto-color input{width:auto}
.qr-finishes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.qr-finish-choice{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border:1px solid #dce0e6;border-radius:12px;background:white;color:#303948;cursor:pointer}
.qr-finish-choice.selected{border-color:#a44818;box-shadow:inset 0 0 0 1px #a44818;background:#fffaf6}
.qr-finish-choice:focus-visible{outline:3px solid #93b3fa;outline-offset:2px}
.qr-finish-choice strong{font-size:12px}
.qr-finish-swatch{width:42px;height:28px;border-radius:8px;box-shadow:inset 0 0 0 1px #0001}
.qr-finish-bold{background:#f87722}
.qr-finish-dark{background:#17202b;box-shadow:inset 0 0 0 3px #f87722}
.qr-finish-spectrum{background:linear-gradient(120deg,#f87722,#e43aae,#00aeef)}
.qr-finish-minimal{background:#fff;box-shadow:inset 0 0 0 1px #df5b09}