*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;font-size:1rem;line-height:1.5;color:#1a1a1a;background:#f5f5f5;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem}.layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem;width:100%;max-width:800px;background:#fff;border-radius:8px;padding:2rem;box-shadow:0 1px 4px rgba(0,0,0,.1)}.brand{display:flex;align-items:center;justify-content:flex-start;margin-bottom:.75rem}.brand-logo{width:clamp(4rem,9vw,5.5rem);height:clamp(4rem,9vw,5.5rem);object-fit:contain}.heading{font-size:1.25rem;font-weight:600;margin:1.5rem 0}.field{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}.label{font-size:.875rem;font-weight:500}.input{padding:.5rem .75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;width:100%;outline-offset:2px}.input:focus{border-color:#06c;outline:#0066cc solid 2px}.error{font-size:.875rem;color:#c0392b}.btn{display:inline-block;padding:.5rem 1.25rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:opacity .15s}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#06c;color:#fff}.btn-primary:not(:disabled):hover{background:#0052a3}.btn-secondary{background:#e5e5e5;color:#1a1a1a;margin-top:1rem}.btn-secondary:not(:disabled):hover{background:#d0d0d0}.output{display:flex;flex-direction:column;align-items:center;gap:1rem}.qr-container{width:100%;min-height:200px;display:flex;align-items:center;justify-content:center;border:1px dashed #ccc;border-radius:4px;padding:1rem}.qr-container canvas{max-width:100%;height:auto}.empty-state{font-size:.875rem;color:#777;text-align:center}.brand-values{grid-column:1/-1;width:100%;max-width:34rem;padding:1rem;border-radius:4px;background:#fafafa;justify-self:center}.brand-values-list{list-style:none;padding-left:0;color:#333;text-align:left}.brand-values-list li{position:relative;padding-left:1.6rem}.brand-values-list li::before{content:"\2713";position:absolute;left:0;top:0;color:#6aa67a;font-weight:600}.brand-values-list li+li{margin-top:.375rem}@media (max-width:600px){.layout{grid-template-columns:1fr}.brand-values{order:3}.output{order:2}.controls{order:1}.brand{justify-content:center}.heading{text-align:center}}