:root{--ink: #10110f;--muted: #6f716a;--paper: #f2f0e8;--panel: #faf9f5;--line: #d8d6cd;--acid: #d8ff39;--blue: #3557ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,label,input[type=color],input[type=range]{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.app-shell{min-height:100vh;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;width:min(1420px,calc(100% - 64px));height:84px;margin:0 auto;border-bottom:1px solid var(--line)}.brand{display:inline-flex;gap:12px;align-items:center;color:var(--ink);font-size:17px;font-weight:800;letter-spacing:-.04em;text-decoration:none}.brand-mark{display:grid;grid-template-columns:repeat(2,7px);gap:3px;padding:5px;border:1px solid var(--ink);border-radius:50%}.brand-mark i{width:7px;height:7px;background:var(--ink);border-radius:50%}.topbar-note{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.pulse{width:8px;height:8px;background:#3cb55d;border-radius:50%;box-shadow:0 0 0 4px #3cb55d24}.intro{width:min(1120px,calc(100% - 64px));margin:86px auto 58px;text-align:center}.eyebrow,.field-label,.preview-head>div>span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.eyebrow:before,.eyebrow:after{display:inline-block;width:34px;height:1px;margin:0 12px 3px;background:currentcolor;content:""}h1{margin:22px 0 25px;font-size:clamp(56px,7.2vw,106px);font-weight:800;letter-spacing:-.075em;line-height:.88}h1 span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}.lede{max-width:680px;margin:0 auto;color:var(--muted);font-size:16px;line-height:1.65}.workspace{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(470px,.95fr);width:min(1280px,calc(100% - 64px));margin:0 auto;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--panel);box-shadow:0 28px 80px #1b1c1814}.controls-panel{padding:52px}.control-group{padding:0 0 36px;margin:0 0 36px;border-bottom:1px solid var(--line)}.control-group:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}.field-label{display:block;margin:0 0 14px}.input-wrap{position:relative}.input-wrap input{width:100%;height:58px;padding:0 62px 0 18px;border:1px solid #c9c7bf;border-radius:13px;background:#fff;color:var(--ink);font-size:15px;transition:border-color .16s ease,box-shadow .16s ease}.input-wrap input:focus{border-color:var(--ink);outline:0;box-shadow:0 0 0 4px #3557ff1a}.input-wrap>span{position:absolute;top:50%;right:16px;color:#a09f98;font-size:11px;font-variant-numeric:tabular-nums;transform:translateY(-50%)}.field-hint{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.warning-text{color:#9b5a00}.group-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.group-heading .field-label{margin:0}.surprise-button{padding:7px 10px;border:1px solid #c9c7bf;border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.surprise-button:hover{border-color:var(--ink)}.dna-filters{display:flex;gap:6px;margin:0 0 14px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.dna-filters::-webkit-scrollbar{display:none}.dna-filters button{flex:0 0 auto;min-height:29px;padding:0 10px;border:1px solid #cfcdc5;border-radius:999px;background:#fff;color:var(--muted);cursor:pointer;font-size:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.dna-filters button.active{border-color:var(--ink);background:var(--ink);color:#fff}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preset-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:184px;padding:11px 12px 13px;overflow:hidden;border:1px solid #cfcdc5;border-radius:14px;background:#fff;color:var(--ink);cursor:pointer;text-align:left;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.preset-card:hover{transform:translateY(-2px)}.preset-card.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.preset-card strong{margin-top:9px;font-size:13px}.preset-card small{margin-top:3px;color:var(--muted);font-size:10px}.preset-card em{position:absolute;top:10px;right:-25px;width:94px;padding:4px;background:var(--acid);color:#10110f;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.1em;text-align:center;transform:rotate(38deg)}.preset-qr{display:grid;width:100%;aspect-ratio:1.45;overflow:hidden;place-items:center;border-radius:9px;background:#f1f0eb}.preset-qr img{display:block;width:90px;height:90px}.sub-label{display:block;margin:0 0 7px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.select-grid.two-selects{grid-template-columns:1fr 1fr}.select-grid select,.geometry-options select{width:100%;height:46px;padding:0 32px 0 12px;border:1px solid #cfcdc5;border-radius:10px;background:#fff;color:var(--ink);font-size:11px;font-weight:700}.geometry-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.silhouette-options{margin-top:16px}.silhouette-options .segmented-control{margin-bottom:0}.segmented-control{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;margin-bottom:16px;border:1px solid #cfcdc5;border-radius:12px;background:#eae8e1}.segmented-control.compact{grid-template-columns:repeat(2,1fr);margin-bottom:0}.segmented-control button{min-height:36px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font-size:10px;font-weight:700}.segmented-control button.active{background:#fff;color:var(--ink);box-shadow:0 1px 5px #14151217}.range-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:16px;color:var(--muted);font-size:11px}.range-row input{width:100%;accent-color:var(--ink)}.range-row strong{color:var(--ink);font-variant-numeric:tabular-nums}.color-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.color-control{position:relative;display:flex;gap:10px;align-items:center;height:52px;padding:0 14px;border:1px solid #cfcdc5;border-radius:12px;background:#fff;cursor:pointer}.color-control input{position:absolute;width:1px;height:1px;opacity:0}.color-dot{width:25px;height:25px;border-radius:50%}.color-dot.outlined{border:1px solid #d2d0c9}.color-control strong{font-size:12px;letter-spacing:.04em}.logo-row{display:flex;gap:16px;align-items:center}.logo-preview{display:grid;flex:0 0 48px;width:48px;height:48px;padding:6px;place-items:center;border:1px solid #cfcdc5;border-radius:12px;background:#fff}.logo-preview img{display:block;width:100%;height:100%;object-fit:contain}.upload-button{display:inline-flex;gap:10px;align-items:center;min-width:220px;max-width:100%;height:48px;padding:0 15px;overflow:hidden;border:1px dashed #aaa89f;border-radius:11px;background:#fff;cursor:pointer;font-size:12px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.upload-button input{position:absolute;width:1px;height:1px;opacity:0}.upload-button span{font-size:20px;font-weight:300}.text-button{padding:4px;border:0;background:transparent;color:#8b3131;cursor:pointer;font-size:11px;font-weight:700}.logo-tuning{padding:14px 16px;margin-top:14px;border:1px solid #dedcd4;border-radius:12px;background:#ffffff94}.logo-tuning .range-row:first-child{margin-top:0}.logo-hint{margin:10px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.preview-panel{display:flex;flex-direction:column;min-width:0;padding:38px;border-left:1px solid var(--line);background:#e8e6de}.preview-head{display:flex;justify-content:space-between;align-items:flex-start}.preview-head>div{display:flex;flex-direction:column;gap:4px}.preview-head>div>strong{font-size:15px}.quality-badge{display:inline-flex;gap:7px;align-items:center;min-height:30px;padding:0 10px;border:1px solid rgb(16 17 15 / 12%);border-radius:999px;background:#ffffff8c;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.quality-badge i{width:7px;height:7px;border-radius:50%}.quality-badge.good i{background:#2ca253}.quality-badge.warn i{background:#e19b20}.quality-badge.bad i{background:#d34d4d}.qr-stage{position:sticky;top:24px;display:grid;flex:1;min-height:610px;padding:64px 0 48px;place-items:center}.matrix-frame{position:relative;display:grid;width:min(100%,500px);aspect-ratio:1;overflow:hidden;place-items:center;border:1px solid rgb(16 17 15 / 8%);border-radius:28px;box-shadow:0 28px 70px #1617132e}.matrix-frame:before,.matrix-frame:after{position:absolute;z-index:2;width:34px;height:34px;border-color:var(--ink);opacity:.28;content:"";pointer-events:none}.matrix-frame:before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;border-radius:28px 0 0}.matrix-frame:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid;border-radius:0 0 28px}.creative-qr{display:block;width:100%;height:100%}.loading{padding:24px;color:#9b5a00;font-size:12px;font-weight:700;text-align:center}.matrix-callout{position:absolute;right:0;bottom:24px;display:flex;gap:10px;align-items:center;padding:10px 13px;border:1px solid #d2d0c7;border-radius:10px;background:#faf9f5eb;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.04em;line-height:1.35;text-transform:uppercase;box-shadow:0 8px 24px #16171314}.matrix-callout i{width:10px;height:10px;background:var(--acid);border:2px solid var(--ink);border-radius:50%}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ceccc4;border-bottom:1px solid #ceccc4}.metrics>div{display:flex;flex-direction:column;gap:5px;padding:19px 12px;border-right:1px solid #ceccc4}.metrics>div:first-child{padding-left:0}.metrics>div:last-child{border-right:0}.metrics span{color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.metrics strong{font-size:12px}.download-row{display:grid;grid-template-columns:1.25fr 1fr;gap:9px;margin-top:22px}.download-row button{height:52px;border-radius:12px;cursor:pointer;font-size:12px;font-weight:800}.download-primary{display:flex;gap:9px;align-items:center;justify-content:center;border:1px solid var(--ink);background:var(--ink);color:#fff}.download-primary span{font-size:18px}.download-secondary{border:1px solid #bdbbb3;background:#fff;color:var(--ink)}.download-row button:hover{transform:translateY(-1px)}.download-status{min-height:16px;margin:10px 0 0;color:var(--muted);font-size:9px;text-align:center}.guardrails{display:grid;grid-template-columns:repeat(3,1fr);width:min(1150px,calc(100% - 64px));margin:100px auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.guardrails>div{min-height:190px;padding:32px 34px;border-right:1px solid var(--line)}.guardrails>div:last-child{border-right:0}.guardrail-number{display:block;margin-bottom:27px;color:#a5a39c;font-size:10px;font-weight:800}.guardrails strong{font-size:16px}.guardrails p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.55}footer{display:flex;justify-content:space-between;width:min(1420px,calc(100% - 64px));padding:28px 0 38px;margin:0 auto;border-top:1px solid var(--line);color:var(--muted);font-size:10px}footer>span{color:var(--ink);font-weight:900;letter-spacing:.16em}footer p{margin:0}@media(max-width:1050px){.workspace{grid-template-columns:1fr}.preview-panel{border-top:1px solid var(--line);border-left:0}.qr-stage{position:relative;top:auto;min-height:600px}}@media(max-width:720px){.topbar,.intro,.workspace,.guardrails,footer{width:calc(100% - 28px)}.topbar{height:70px}.topbar-note{font-size:8px}.intro{margin-top:60px}.eyebrow:before,.eyebrow:after{width:16px;margin-right:7px;margin-left:7px}h1{font-size:clamp(48px,15vw,72px)}.lede{font-size:14px}.workspace{border-radius:20px}.controls-panel,.preview-panel{padding:28px 20px}.preset-grid{grid-template-columns:repeat(2,1fr)}.preset-card{min-height:172px}.color-grid,.select-grid.two-selects,.geometry-options{grid-template-columns:1fr}.qr-stage{min-height:auto;padding:44px 0 64px}.matrix-frame{border-radius:20px}.matrix-callout{right:0;bottom:10px}.guardrails{grid-template-columns:1fr;margin:70px auto}.guardrails>div{min-height:0;border-right:0;border-bottom:1px solid var(--line)}.guardrails>div:last-child{border-bottom:0}footer{gap:18px;flex-direction:column}}@media(max-width:420px){.topbar-note{display:none}.preset-grid{grid-template-columns:1fr 1fr;gap:7px}.preset-card{padding:8px}.preset-qr img{width:78px;height:78px}.quality-badge{max-width:128px;text-align:center}.metrics>div{padding-right:6px;padding-left:6px}.download-row{grid-template-columns:1fr}.logo-row{align-items:flex-start;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}