.qr-container{min-height:100vh;padding:3rem 1rem}.qr-content{max-width:48rem;margin:0 auto}.qr-card{background-color:var(--color-light);padding:1.5rem;border:1px solid var(--color-border)}.qr-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.qr-logo{width:100%;height:auto;max-width:2.4rem;aspect-ratio:217 / 210;display:flex;align-items:center;justify-content:center}.qr-logo svg{width:100%;max-width:100%}.qr-title{font-size:2rem;font-weight:700;color:#000;margin:0}.qr-github{margin-left:auto}.qr-github a{display:inline-block;line-height:1;font-size:.9rem;color:var(--color-accent);padding-top:.7rem}.form-group{margin-bottom:1.5rem}.form-label{display:block;font-size:.8rem;font-weight:500;color:#374151;margin-bottom:.5rem}.form-input{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;font-size:1rem}.form-input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:37px;padding:0;cursor:pointer}.form-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px rgba(var(--color-accent),.2)}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.qr-display{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background:color-mix(in srgb,var(--color-border) 30%,var(--color-light));margin-top:1rem}.qr-loading{display:flex;align-items:center;gap:.5rem;color:var(--color-accent)}.qr-error{color:#dc2626}.usage-section{margin-top:2rem}.usage-title{font-size:1.25rem;font-weight:700;color:var(--color-dark);margin-bottom:1rem}.footer-section{margin-top:2rem}.footer-section p{text-align:center}.footer-section a{color:var(--color-accent)}.code-block{background-color:var(--color-dark);color:var(--color-light);padding:1rem;overflow-x:auto;font-family:monospace;white-space:pre;line-height:1.5}:root{--color-dark: #000;--color-light: #fff;--color-accent: #03f;--color-border: #e5e7eb}*{margin:0;padding:0;box-sizing:border-box}*:before,*:after{box-sizing:border-box}::selection{background-color:var(--color-accent);color:var(--color-light)}body{font-family:Geist Mono,monospace;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:default}body:before{--size: 45px;--line: color-mix(in lch, canvasText, transparent 90%);content:"";height:100vh;width:100vw;position:fixed;background:linear-gradient(90deg,var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size),linear-gradient(var(--line) 1px,transparent 1px var(--size)) 50% 50% / var(--size) var(--size);mask:linear-gradient(-20deg,transparent 50%,white);top:0;transform-style:flat;pointer-events:none;z-index:-1}
