.qr-page{--ink:#16052f;--purple:#2d0761;--pink:#ff3dad;--cyan:#20e2d2;--yellow:#fff23d;min-height:100vh;color:var(--ink);background-color:#fffdf2;background-image:linear-gradient(#b9acc2 1px,#0000 1px),linear-gradient(90deg,#b9acc2 1px,#0000 1px);background-size:22px 22px;padding-bottom:80px;font-family:Arial Black,Arial,sans-serif}.qr-topbar{background:var(--ink);color:#fff;border-bottom:7px solid var(--cyan);letter-spacing:.08em;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;min-height:72px;padding:9px clamp(14px,4vw,54px);display:grid}.qr-topbar>a{background:var(--yellow);color:var(--ink);box-shadow:5px 5px 0 var(--pink);border:4px solid #fff;justify-self:start;padding:9px 13px;font-size:.76rem;text-decoration:none}.qr-topbar>div{font-size:clamp(1rem,2.5vw,1.6rem)}.qr-mini{background:var(--pink);border:3px solid #fff;place-items:center;width:38px;height:38px;margin-right:8px;display:inline-grid;transform:rotate(-5deg)}.qr-status{color:#5cff61;text-align:right;justify-self:end;font-family:monospace;font-size:.78rem;font-weight:900}.qr-marquee{background:var(--yellow);border-bottom:5px solid var(--ink);white-space:nowrap;letter-spacing:.13em;padding:8px 0;overflow:hidden}.qr-marquee span{min-width:100%;animation:18s linear infinite qr-scroll;display:inline-block}.qr-workspace{grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);align-items:start;gap:32px;width:min(1360px,94vw);margin:45px auto 0;display:grid}.qr-controls{gap:28px;display:grid}.retro-window{border:5px solid var(--ink);box-shadow:11px 11px 0 var(--pink);background:#e8e4ed}.window-bar{background:var(--cyan);border-bottom:5px solid var(--ink);letter-spacing:.08em;justify-content:space-between;align-items:center;height:45px;padding:0 12px;font-size:.8rem;display:flex}.window-bar.pink{background:var(--pink)}.window-bar.yellow{background:var(--yellow)}.window-bar.cyan{background:var(--cyan)}.window-bar i{letter-spacing:.25em;font-style:normal}.window-body{padding:22px}.content-window{transform:rotate(-.35deg)}.window-body>label,.pattern-field legend{letter-spacing:.08em;margin-bottom:9px;font-size:.76rem;display:block}.text-row{grid-template-columns:1fr 46px;margin-bottom:14px;display:grid}.text-row input{min-width:0;height:52px;color:var(--ink);background:#fff;border:4px inset #aaa;padding:0 13px;font:800 1rem Arial,sans-serif}.text-row button{cursor:pointer;background:#c9c4cf;border:4px outset #fff;font:1.6rem Arial Black}.text-row button:disabled{opacity:.35}.retro-action,.file-button,.remove-button{cursor:pointer;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--yellow);padding:9px 14px;font:900 .74rem Arial Black,Arial;transition:all .12s;display:inline-block}.retro-action:hover,.file-button:hover,.remove-button:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.pattern-field{border:0;margin:0 0 22px;padding:0}.pattern-field>div{grid-template-columns:repeat(6,1fr);gap:7px;display:grid}.pattern-field button{border:3px solid var(--ink);cursor:pointer;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:68px;font:800 .62rem Arial,sans-serif;display:flex;box-shadow:3px 3px #857596}.pattern-field button span{font-size:1.35rem}.pattern-field button.selected{background:var(--yellow);box-shadow:4px 4px 0 var(--pink);transform:translate(-1px,-1px)}.slider-block{margin:20px 0}.slider-block label{justify-content:space-between;font-size:.72rem;display:flex}.slider-block output{background:var(--ink);color:#5cff61;padding:4px 8px;font-family:monospace}.slider-block input{width:100%;accent-color:var(--pink);margin-top:12px}.toggle-row,.color-row,.logo-row{border-bottom:3px dashed #a89db2;align-items:center;gap:12px;min-height:58px;font-size:.76rem;display:flex}.toggle-row>span,.color-row>span,.logo-row>span{margin-right:auto}.toggle{border:3px solid var(--ink);cursor:pointer;background:#aaa;width:58px;height:32px;padding:2px}.toggle i{border:2px solid var(--ink);background:#fff;width:22px;height:22px;transition:all .15s;display:block}.toggle.on{background:#5cff61}.toggle.on i{transform:translate(24px)}.swatch{border:4px solid var(--ink);cursor:pointer;width:36px;height:36px;box-shadow:3px 3px #857596}.swatch input,.file-button input{opacity:0;pointer-events:none;position:absolute}.hex-input{text-align:center;text-transform:uppercase;background:#fff;border:3px inset #aaa;width:94px;height:34px;font:900 .82rem monospace}.disabled-row{opacity:.35;pointer-events:none}.logo-row{border-bottom:0;flex-wrap:wrap;padding:10px 0}.file-button{background:var(--cyan)}.remove-button{background:var(--pink);padding:7px 10px}.preview-window{box-shadow:12px 12px 0 var(--cyan);position:sticky;top:22px;transform:rotate(.35deg)}.preview-body{background:var(--purple);text-align:center;padding:clamp(20px,4vw,38px);position:relative}.checkerboard{aspect-ratio:1;border:7px solid var(--ink);background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,#0000 25%),linear-gradient(-45deg,#ddd 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ddd 75%),linear-gradient(-45deg,#0000 75%,#ddd 75%);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;place-items:center;width:min(100%,510px);margin:auto;display:grid}.checkerboard img{object-fit:contain;image-rendering:auto;filter:drop-shadow(7px 7px #16052f38);width:88%;height:88%}.empty-qr{aspect-ratio:1;color:#8d8296;background:#ffffffe0;border:5px dashed #a59aac;flex-direction:column;justify-content:center;align-items:center;gap:18px;width:75%;display:flex}.empty-qr b{font-size:4rem}.empty-qr span{font-size:.8rem;line-height:1.5}.preview-sticker{z-index:3;background:var(--yellow);border:4px solid var(--ink);clip-path:polygon(50% 0,61% 14%,79% 6%,82% 24%,100% 28%,90% 45%,100% 61%,80% 66%,80% 88%,61% 82%,48% 100%,38% 84%,18% 94%,18% 73%,0 66%,10% 49%,0 34%,20% 27%,19% 7%,39% 15%);place-items:center;width:78px;height:78px;font-size:.65rem;display:grid;position:absolute;top:5px;right:5px;transform:rotate(9deg)}.save-button{background:var(--pink);width:100%;min-height:58px;color:var(--ink);border:5px solid var(--ink);box-shadow:8px 8px 0 var(--yellow);cursor:pointer;margin-top:24px;font:1rem Arial Black}.save-button:hover:not(:disabled){box-shadow:4px 4px 0 var(--yellow);transform:translate(4px,4px)}.save-button:disabled{filter:grayscale();opacity:.5;cursor:not-allowed}.preview-body p{color:#fff;letter-spacing:.12em;margin:18px 0 0;font:900 .62rem Arial,sans-serif}@keyframes qr-scroll{to{transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.qr-marquee span{animation:none}}@media (width<=920px){.qr-workspace{grid-template-columns:1fr}.preview-window{grid-row:1;position:static}.pattern-field>div{grid-template-columns:repeat(3,1fr)}}@media (width<=560px){.qr-topbar{grid-template-columns:auto 1fr}.qr-topbar>div{text-align:right}.qr-status{display:none}.qr-workspace{width:92vw;margin-top:26px}.window-body{padding:15px}.pattern-field button{min-height:62px}.preview-body{padding:18px}.preview-sticker{width:64px;height:64px}.color-row{flex-wrap:wrap;padding:8px 0}.hex-input{width:82px}}