:root{color-scheme:dark;--bg:#09090b;--panel:#111114;--panel-gray:#111114;--bg-white:#151519;--text:#f5f4f8;--text-dark:#f5f4f8;--muted:#a09da9;--text-light:#a09da9;--line:rgba(255,255,255,.1);--border-color:rgba(255,255,255,.1);--accent:#c3a5ff;--accent-soft:rgba(184,148,255,.12);--ok:#a4d5be;--warn:#e4bf93;--focus:#c3a5ff;--bg-rgb:17,17,20;--icon-hover-bg:#24212c;--icon-hover-border:#544564;--shadow-medium:rgba(0,0,0,.35);--shadow-soft:rgba(0,0,0,.2)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100svh;color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse 750px 570px at 50% 42%,rgba(118,96,150,.07),transparent 80%),#09090b}body:before{content:"";position:fixed;pointer-events:none;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 90%,rgba(167,125,240,.025),transparent 50%)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}[hidden]{display:none!important}button{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:5px}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0}h1,h2,p{margin:0}button,input,select{transition:background .2s,border-color .2s,color .2s,box-shadow .2s}button{border:0}button svg{pointer-events:none}
.site-header{height:98px;padding:0 44px;display:flex;align-items:center;gap:24px;position:relative;z-index:10}.brand{display:flex;align-items:center;justify-content:center;width:76px}.brand img{display:block;width:76px;height:auto;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(255,255,255,.05))}.header-divider{height:21px;width:1px;background:var(--line)}.app-name{font-size:14px;font-weight:500;color:#d4d0dc;letter-spacing:-.02em}.header-actions{margin-left:auto;display:flex;align-items:center;gap:22px}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:none;color:var(--muted);padding:7px 0;font-size:12px;font-weight:500;border:0}.text-button:hover{color:white}.text-button svg{width:16px;height:16px}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:11px 18px;border-radius:11px;font-size:12px;font-weight:620;line-height:1.35}.primary-btn{background:#f3f0f9;color:#1a1423;border:1px solid #f3f0f9;box-shadow:0 2px 0 rgba(255,255,255,.05)}.primary-btn:hover:not(:disabled){background:#d9c6fc;border-color:#d9c6fc}.secondary-btn{background:rgba(255,255,255,.035);border:1px solid var(--line);color:#e4dfed}.secondary-btn:hover:not(:disabled){background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.23)}.primary-btn svg,.secondary-btn svg{width:16px;height:16px}
.onboarding{max-width:1000px;margin:0 auto;padding:38px 28px 60px;min-height:calc(100svh - 98px)}.steps{display:flex;justify-content:center;align-items:center;gap:19px;margin-bottom:70px}.step{display:inline-flex;gap:9px;align-items:center;color:#76717f;font-size:11px;letter-spacing:.03em;background:none;padding:6px 0}.step span{font-size:10px;color:#59535f;font-variant-numeric:tabular-nums}.step.active{color:#f5f0ff}.step.active span{color:var(--accent)}.step.done{color:#aaa2b6}.step:disabled{opacity:1;cursor:default}.steps i{height:1px;width:32px;background:#29232f}.wizard-step{animation:step-in .34s cubic-bezier(.16,1,.3,1) both}.step-heading{text-align:center;margin-bottom:44px}.step-heading h1{font-size:clamp(30px,3.65vw,49px);line-height:1.16;font-weight:510;letter-spacing:-.057em;outline:none}.step-heading p{font-size:14px;color:var(--muted);line-height:1.6;margin-top:16px;letter-spacing:-.01em}.type-options{display:flex;align-items:center;justify-content:center;gap:38px;padding:5px 0 45px}.type-choice{width:238px;height:238px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.058),rgba(255,255,255,.016));border:1px solid rgba(255,255,255,.135);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;isolation:isolate;transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;overflow:hidden}.choice-halo{position:absolute;z-index:-1;inset:0;opacity:.5;background:radial-gradient(circle at 68% 89%,rgba(184,148,255,.20),transparent 64%);transition:opacity .4s}.url-choice .choice-halo{background:radial-gradient(circle at 68% 89%,rgba(150,145,225,.17),transparent 64%)}.type-choice:hover{transform:translateY(-4px);border-color:rgba(211,186,255,.4);box-shadow:0 20px 70px rgba(0,0,0,.25),0 0 45px rgba(168,121,230,.05)}.type-choice:hover .choice-halo{opacity:1}.choice-icon{width:30px;height:30px;color:#bfa4e8;margin-bottom:21px;stroke-width:1.2}.choice-name{font-size:23px;font-weight:530;letter-spacing:-.04em}.choice-description{font-size:12px;color:#a49aaf;display:block;margin-top:9px}.choice-arrow{position:absolute;bottom:25px;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;color:#d7baf8}.type-choice:hover .choice-arrow,.type-choice:focus-visible .choice-arrow{opacity:1;transform:none}.choice-arrow svg{width:17px;height:17px}
.style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:850px;margin:auto}.style-choice{border:1px solid var(--line);border-radius:23px;background:linear-gradient(155deg,#17151b,#100f13);padding:27px 22px 24px;text-align:left;transition:transform .3s,border-color .3s,background .3s;min-width:0}.style-choice.featured{background:radial-gradient(ellipse at 60% 60%,rgba(159,116,219,.11),transparent 80%),linear-gradient(155deg,#19151f,#120f17);border-color:rgba(185,150,235,.19)}.style-choice:hover{transform:translateY(-4px);border-color:rgba(202,171,249,.45)}.sample-wrap{height:188px;display:flex;align-items:center;justify-content:center;margin-bottom:27px}.sample-wrap img{width:148px;height:148px;border-radius:9px;box-shadow:0 12px 24px #0005;transition:transform .3s}.style-choice:hover img{transform:scale(1.035)}.style-name{display:flex;justify-content:space-between;align-items:center;font-weight:520;font-size:20px;letter-spacing:-.04em}.style-name svg{width:17px;height:17px;color:#8b7a9f}.style-description{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:9px}.back-link{display:flex;width:fit-content;margin:27px auto 0}
.details-step{max-width:620px;margin:auto}.details-step .step-heading{margin-bottom:33px}.selection-summary{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#b097cb;margin-bottom:18px}.details-step h1{font-size:clamp(30px,3.45vw,43px)}fieldset{margin:0;padding:0;border:0;min-width:0}label{display:block;font-size:11px;font-weight:520;color:#b1aabf;margin:0 0 9px}label span{font-size:10px;font-weight:400;color:#6f687b;margin-left:4px}input:not([type=color]):not([type=range]):not([type=file]),select,textarea{display:block;width:100%;min-width:0;background:rgba(255,255,255,.028);color:#f4f0fa;border:1px solid var(--line);border-radius:9px;min-height:44px;padding:12px 13px;font-size:13px;line-height:1.45;outline:none}input::placeholder{color:#6f687a;opacity:1}input:focus,textarea:focus,select:focus{border-color:#877297;background:rgba(255,255,255,.045)}select{appearance:auto;background:#19151f;padding-right:12px;color-scheme:dark}select option{background:#19151f;color:white}.large-url{display:flex;align-items:center;gap:16px;padding:0 22px;background:linear-gradient(130deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(214,190,247,.2);border-radius:17px;box-shadow:0 12px 44px rgba(0,0,0,.12)}.large-url:focus-within{border-color:#ae8bcd;box-shadow:0 0 0 3px rgba(196,154,255,.045)}.large-url>svg{color:#a893c0;width:23px;height:23px}.large-url input:not([type=color]):not([type=range]):not([type=file]){border:0;border-radius:0;box-shadow:none;min-height:78px;font-size:21px;background:none;padding:14px 0;letter-spacing:-.02em;outline:none}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 18px}.wide{grid-column:1/-1}.intro-artwork{margin-top:23px}.upload-zone{display:flex;width:100%;align-items:center;gap:15px;text-align:left;border:1px dashed #39313f;border-radius:15px;padding:17px 18px;background:rgba(255,255,255,.014)}.upload-zone:hover,.upload-zone.drag-over{background:#c3a5ff0b;border-color:#977cb1}.upload-icon{display:grid;place-items:center;width:45px;height:45px;background:#201a29;border:1px solid #39303f;border-radius:11px;color:#b3a0ca;flex:none;overflow:hidden}.upload-icon img{width:100%;height:100%;object-fit:cover}.upload-copy{flex:1;min-width:0}.upload-copy strong{display:block;font-size:12px;font-weight:530;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-copy>span{display:block;font-size:11px;line-height:1.5;color:#93879f;margin-top:6px}.upload-arrow{width:18px;height:18px;color:#a390b7}.remove-upload{margin-top:6px;font-size:11px}.quiet-note{font-size:10px;color:#84778f;line-height:1.5;display:flex;gap:7px;align-items:center;justify-content:center;margin-top:21px}.quiet-note svg{height:12px;width:12px}.form-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:27px}.create-btn{min-height:46px;padding:13px 21px}.form-error{font-size:12px;line-height:1.6;color:#ecc799;background:#dfa5610c;border:1px solid #ba8a562a;border-radius:10px;padding:13px 16px;margin-top:20px}.form-busy{display:flex;align-items:center;justify-content:center;gap:11px;font-size:12px;color:#c0afcf;margin-top:20px;min-height:26px}.form-busy .text-button{margin-left:8px;font-size:11px}.spinner{border:1.5px solid #564364;border-top-color:#d9b4ff;width:15px;height:15px;border-radius:50%;animation:spin .8s linear infinite;flex:none}
body[data-view=editor] .site-header{height:84px;border-bottom:1px solid rgba(255,255,255,.06)}body[data-view=editor]{background:radial-gradient(ellipse 700px 600px at 34% 40%,rgba(116,85,146,.06),transparent 80%),#09090b}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:46px;max-width:1300px;margin:auto;padding:29px 42px 35px;align-items:start;animation:step-in .45s ease both}.preview-column{min-width:0;position:sticky;top:24px}.preview-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.content-pill{display:flex;align-items:center;gap:10px;min-width:0;max-width:85%;padding:10px 13px;background:#18141e;border:1px solid #2b2334;border-radius:30px;text-align:left}.content-pill>svg{width:14px;height:14px;color:#b8a3cd}.content-pill>span:first-of-type{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c3b7ce}.pill-action{font-size:10px;color:#887594;padding-left:12px;border-left:1px solid #403247}.content-pill:hover{border-color:#7a5d8b}.editor-style-label{font-size:10px;color:#867691}.preview-shell{position:relative;border:1px solid #24212b;background:radial-gradient(ellipse at 50% 10%,#1c17232b,transparent 70%),#101013;border-radius:24px;padding:28px 25px 15px;overflow:hidden}.canvas-stage{display:grid;place-items:center;min-height:220px;padding:0}.canvas-card{position:relative;background:#fff;border-radius:15px;padding:11px;width:min(100%,calc(100svh - 296px),555px);min-width:220px;box-shadow:0 14px 50px #0005}.canvas-card>canvas{width:100%;height:auto;display:block;border-radius:7px;touch-action:manipulation}.needs-generation #styledCanvas{opacity:.25}.progress-line{height:2px;position:absolute;left:0;right:0;top:0;overflow:hidden}.is-loading .progress-line:before{content:"";position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,#be8bea,transparent);animation:loading 1.1s infinite}.status-bar{font-size:10px;color:#aa98b9;line-height:1.6;text-align:center;margin:20px auto 1px;min-height:18px;max-width:450px}.status-bar.ok{color:#a0bcad}.status-bar.warn{color:#d7b68e}.status-bar:before{content:"";display:inline-block;width:5px;height:5px;vertical-align:middle;background:currentColor;border-radius:50%;margin-right:7px;margin-bottom:1px}.preview-foot{display:flex;justify-content:space-between;gap:16px;font-size:9px;color:#776b80;line-height:1.5;margin:14px 5px}.preview-foot>span:first-child{max-width:76%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.recovery-actions{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;flex-wrap:wrap}.recovery-actions:empty{display:none}.recovery-actions .secondary-btn{min-height:32px;font-size:10px;padding:7px 10px}.tools-panel{border:1px solid #26212c;border-radius:21px;background:linear-gradient(160deg,#16131b,#100f13);padding:23px;min-width:0}.tools-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.tools-heading h2{font-size:19px;letter-spacing:-.04em;font-weight:520}.tools-dot{height:6px;width:6px;border-radius:50%;background:#af8fce;box-shadow:0 0 15px #af8fce3b}.panel-section{padding-bottom:21px}.panel-section+ .panel-section{border-top:1px solid var(--line);padding-top:21px}.style-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border:1px solid #302837;border-radius:10px;background:#0c0b0f}.style-tab{font-size:11px;font-weight:500;padding:10px 3px;color:#91849e;background:none;border-radius:6px}.style-tab:hover{color:white}.style-tab.active{background:#2a2135;color:#e1c9fa;box-shadow:0 1px 3px #0002}.logo-row{display:flex;align-items:center;gap:13px}.logo-row>canvas{width:56px;height:56px;flex:none;border-radius:11px;border:1px solid #4b3c59;background:white}.logo-actions{display:flex;align-items:flex-start;flex-direction:column;min-width:0}.logo-actions .secondary-btn{font-size:10px;padding:7px 11px;min-height:30px}.logo-actions .text-button{font-size:10px;padding:6px 0}#treatmentWrap{margin-top:15px}.placement-toggle{width:100%;margin-top:13px;min-height:36px;font-size:10px;padding:9px}.placement-toggle[aria-pressed=true]{background:#3824466b;border-color:#79508e;color:#e4c4ff}.help-copy{font-size:10px;line-height:1.6;color:#95859f;margin-top:9px}.placement-sliders{padding:16px 0 0}.placement-sliders label{font-size:10px;margin-bottom:5px}.placement-sliders output{float:right;color:#bbaaC8}.placement-sliders input{width:100%;margin:6px 0 14px;height:4px;accent-color:#b797d7}.placement-sliders .text-button{font-size:10px}.option-details{border-top:1px solid var(--line);padding:17px 0}.option-details:last-child{padding-bottom:0}.option-details summary,.nested-details summary{cursor:pointer;list-style:none;display:flex;align-items:center;font-size:12px;font-weight:500;color:#c7bace;gap:8px;user-select:none}.option-details summary::-webkit-details-marker,.nested-details summary::-webkit-details-marker{display:none}.option-details>summary:after,.nested-details>summary:after{content:"+";margin-left:auto;font-weight:400;color:#8e789c;font-size:16px}.option-details[open]>summary:after,.nested-details[open]>summary:after{content:"-"}.option-details summary span{font-size:10px;color:#74667c;font-weight:400}.details-body{padding-top:18px}.nested-details{margin-top:17px}.nested-details>summary{font-size:10px;color:#887491;font-weight:400}.nested-details>div{padding-top:12px}.color-row{display:grid;grid-template-columns:28px minmax(0,1fr) 71px;gap:10px;align-items:center;margin-bottom:10px}.color-picker-wrap{width:28px;height:28px;border:1px solid #574462;border-radius:7px;overflow:hidden}.color-picker-wrap input{appearance:none;-webkit-appearance:none;border:0;width:42px;height:42px;padding:0;transform:translate(-7px,-7px);cursor:pointer}.color-name{font-size:10px;color:#b7a8c0;line-height:1.4}.color-row .hex-input:not([type=color]):not([type=range]):not([type=file]){padding:5px 5px;min-height:28px;font-size:10px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#ae9aba;background:#0d0b10;border-color:#302338}#paletteSection>label{margin-top:17px;font-size:10px}#resetPalette{font-size:10px}#trackingSection input{min-height:35px;font-size:11px;padding:9px}#trackingSection .secondary-btn{font-size:10px;min-height:32px;padding:8px 13px;margin-top:13px}.tracking-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.advanced-buttons{display:flex;align-items:center;gap:12px;margin-top:15px}.advanced-buttons button{font-size:10px;min-height:30px;padding:7px 8px}#encodedUrl{font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;min-height:95px;margin-top:11px;resize:vertical;color:#bcb0c6}.export-wrap{position:relative}.export-panel{position:absolute;top:calc(100% + 12px);right:0;width:280px;background:#19141ff5;backdrop-filter:blur(22px);border:1px solid #4a3659;border-radius:17px;padding:20px;box-shadow:0 20px 70px #0009}.panel-eyebrow{font-size:14px;letter-spacing:-.02em;margin-bottom:21px}.export-panel label{font-size:10px}.export-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.export-actions button{font-size:11px;padding:10px;min-height:36px}.export-actions #contactFileButton{grid-column:1/-1}.export-panel p{font-size:9px;line-height:1.6;color:#94819f;margin-top:15px}.placement-editor{position:absolute;z-index:3;border:1.5px solid #9b70bf;border-radius:4px;cursor:move;touch-action:none;box-shadow:0 0 0 1px #fff9}.placement-editor:before{content:"Move image";position:absolute;top:-27px;left:50%;transform:translateX(-50%);background:#17111ef0;color:#e5caf9;padding:4px 8px;border:1px solid #705185;border-radius:6px;font-size:9px;white-space:nowrap;pointer-events:none}.placement-handle{position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;border:2px solid white;border-radius:50%;background:#9b70bf;cursor:nwse-resize;padding:0;touch-action:none}.editor-toolbar{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;border:1px solid #644874;border-radius:10px;background:#17111e;padding:8px;font-size:10px;transform:translateX(-50%)}.editor-toolbar button{background:#34223f;color:white;border-radius:5px;padding:5px}.editor-toolbar input{width:25px;height:25px;border:0;padding:0}.editor-enabled{cursor:crosshair}#editToggleButton.active{color:#e1b4ff;border-color:#9570b1}.no-js{padding:40px;color:#e8bd8a;text-align:center}
@keyframes step-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(330%)}}
@media(min-width:1500px){.onboarding{padding-top:65px}.steps{margin-bottom:82px}.type-choice{width:254px;height:254px}.type-options{gap:48px}.workspace{padding-top:40px}}
@media(max-width:1050px){.workspace{padding:25px;gap:25px;grid-template-columns:minmax(0,1fr) 295px}.tools-panel{padding:20px}.site-header{padding:0 28px}.preview-shell{padding:23px 17px 13px}.canvas-card{min-width:160px}.editor-style-label{display:none}.content-pill{max-width:100%}}
@media(max-width:760px){.site-header{height:78px;padding:0 20px;gap:16px}.brand,.brand img{width:61px}.app-name{font-size:12px}.header-actions{gap:14px}.home-link{font-size:11px}.onboarding{min-height:calc(100svh - 78px);padding:27px 20px 42px}.steps{gap:12px;margin-bottom:48px}.steps i{width:23px}.step{font-size:10px;gap:6px}.step-heading{margin-bottom:31px}.step-heading h1{font-size:36px}.step-heading p{font-size:12px;margin-top:13px}.type-options{gap:17px}.type-choice{width:205px;height:205px}.choice-name{font-size:20px}.choice-icon{width:27px;height:27px;margin-bottom:17px}.choice-description{font-size:11px}.choice-arrow{bottom:16px}.style-options{gap:12px}.style-choice{padding:17px 15px;border-radius:17px}.sample-wrap{height:140px;margin-bottom:17px}.sample-wrap img{height:115px;width:115px}.style-name{font-size:16px}.style-description{font-size:10px}.style-name svg{width:14px}.details-step{max-width:550px}.details-step .step-heading{margin-bottom:28px}.details-step h1{font-size:34px}.large-url input:not([type=color]):not([type=range]):not([type=file]){min-height:65px;font-size:18px}.workspace{display:flex;flex-direction:column;max-width:600px;gap:22px;padding:20px}.preview-column{position:static;width:100%}.tools-panel{width:100%;padding:23px}.preview-shell{padding:24px 23px 17px}.canvas-card{width:min(100%,400px)}body[data-view=editor] .site-header{height:76px}.tools-heading{margin-bottom:19px}.preview-top{margin-bottom:14px}.preview-foot{margin-top:10px}.header-actions .primary-btn{padding:10px 13px;min-height:36px;font-size:11px}.header-actions .text-button{font-size:11px}body[data-view=editor] .header-divider,body[data-view=editor] .app-name{display:none}.export-panel{right:0}.editor-style-label{display:block}}
@media(max-width:480px){.site-header{padding:0 18px}.header-divider{height:17px}.step-heading h1{font-size:31px}.type-options{gap:14px;padding-bottom:10px}.type-choice{width:calc((100vw - 54px)/2);height:calc((100vw - 54px)/2);max-width:195px;max-height:195px}.choice-name{font-size:18px}.choice-icon{width:25px;height:25px;margin-bottom:14px}.choice-description{font-size:9px;margin-top:7px}.choice-arrow{bottom:10px}.choice-arrow svg{width:13px}.style-options{grid-template-columns:1fr;gap:12px;max-width:365px}.style-choice{display:grid;grid-template-columns:94px 1fr;column-gap:21px;align-items:center;padding:17px 19px}.sample-wrap{grid-column:1;grid-row:1/3;height:90px;margin:0}.sample-wrap img{width:90px;height:90px;border-radius:6px}.style-name{align-self:end;font-size:19px;padding-bottom:4px}.style-description{align-self:start;font-size:11px;line-height:1.5;margin-top:3px}.contact-grid{gap:15px 12px}.contact-grid input:not([type=color]):not([type=range]):not([type=file]){font-size:12px;padding:11px}.contact-grid label{font-size:10px}.contact-grid label span{font-size:9px}.selection-summary{font-size:9px;margin-bottom:15px}.details-step h1{font-size:30px}.upload-zone{padding:14px}.upload-copy>span{font-size:10px}.large-url{padding:0 17px;gap:12px}.large-url>svg{width:19px}.large-url input:not([type=color]):not([type=range]):not([type=file]){font-size:16px}.form-actions{margin-top:23px}.form-busy{flex-wrap:wrap;font-size:11px}.workspace{padding:17px}.preview-shell{padding:19px 17px 14px}.status-bar{font-size:9px}.preview-top{gap:8px}.content-pill>span:first-of-type{font-size:10px}.preview-foot{font-size:8px}.editor-style-label{font-size:9px}.header-actions{gap:18px}.canvas-card{min-width:0}.tools-panel{border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Button-first option controls: no dropdown menus. */
.inline-option-block{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.inline-option-block>label{margin-bottom:8px}
.choice-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid #302837;border-radius:10px;background:#0c0b0f}
.choice-strip.two-choice{grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.choice-chip{min-width:0;min-height:35px;padding:8px 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#91849e;font-size:10px;font-weight:520;line-height:1.25;text-align:center;transition:background .18s,border-color .18s,color .18s,transform .18s}
.choice-chip:hover:not(:disabled){color:#f3ecfb;background:rgba(255,255,255,.045)}
.choice-chip.active,.choice-chip[aria-pressed=true]{background:#2a2135;border-color:#493557;color:#e8d7f8;box-shadow:0 1px 3px #0002}
.choice-chip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.choice-grid .choice-chip{background:#0d0b10;border-color:#2f2835;min-height:38px}
.choice-grid .choice-chip.active,.choice-grid .choice-chip[aria-pressed=true]{background:#2a2135;border-color:#654c74}
.size-strip{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}
.size-strip .choice-chip{font-variant-numeric:tabular-nums}
#treatmentWrap[hidden]{display:none!important}
.export-panel .choice-strip{margin-top:7px}

/* Premium style badges + ad unlock modal */
.premium-style,.premium-tab{position:relative}
.style-badge,.inline-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(195,165,255,.24);background:rgba(195,165,255,.1);color:#d9c6fc;font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1;padding:6px 9px}
.style-badge{position:absolute;top:14px;right:14px;z-index:1}
.inline-badge{margin-left:8px;padding:4px 7px;font-size:9px;vertical-align:middle}
.premium-style.is-unlocked .style-badge,.premium-tab.is-unlocked .inline-badge{display:none}
.unlock-modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px}
.unlock-scrim{position:absolute;inset:0;background:rgba(5,5,7,.72);backdrop-filter:blur(8px)}
.unlock-card{position:relative;width:min(100%,520px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(180deg,#15131a,#0f0d12);box-shadow:0 24px 90px rgba(0,0,0,.5);padding:28px}
.unlock-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#ddd5e8;display:grid;place-items:center}
.unlock-step{display:grid;gap:16px}
.unlock-eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#b097cb}
.unlock-card h2{font-size:32px;line-height:1.05;letter-spacing:-.05em;font-weight:540}
.unlock-card p{font-size:14px;line-height:1.6;color:var(--muted)}
.unlock-actions{display:flex;gap:12px;flex-wrap:wrap}
.ad-player-placeholder{display:grid;gap:14px;min-height:240px;align-items:center;justify-items:center;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 50% 10%,rgba(195,165,255,.15),transparent 60%),#0b0a0e;padding:24px;text-align:center}
.ad-player-copy{display:grid;gap:8px;max-width:320px}
.ad-player-copy strong{font-size:22px;font-weight:550;letter-spacing:-.03em}
.ad-player-copy span{font-size:13px;line-height:1.5;color:#9f96aa}
.ad-countdown{font-variant-numeric:tabular-nums;font-size:44px;letter-spacing:-.06em;font-weight:560;color:#f3f0f9}
.unlock-note{font-size:12px!important;color:#9f96aa!important}
body.modal-open{overflow:hidden}
@media(max-width:480px){.unlock-card{padding:24px 20px 20px;border-radius:20px}.unlock-card h2{font-size:28px}.unlock-actions{display:grid;grid-template-columns:1fr}.unlock-actions .primary-btn,.unlock-actions .secondary-btn{width:100%}}

/* ======================================================================
   OUA homepage visual system
   Keeps the QR tool flow/structure intact while matching the homepage:
   black cover, teal field, orange interaction, warm white, heavy display type.
   ====================================================================== */
:root{
  --bg:#050505;
  --black:#050505;
  --white:#f5f2ea;
  --orange:#ff8440;
  --panel:#090909;
  --panel-gray:#090909;
  --bg-white:#0b0b0b;
  --text:#f5f2ea;
  --text-dark:#f5f2ea;
  --muted:rgba(245,242,234,.68);
  --text-light:rgba(245,242,234,.68);
  --line:rgba(245,242,234,.12);
  --border-color:rgba(245,242,234,.12);
  --accent:#ff8440;
  --accent-soft:rgba(255,132,64,.16);
  --teal:#0b7f82;
  --teal-deep:#086f72;
  --ok:#bde5d7;
  --warn:#ffc08f;
  --focus:#ff8440;
  --bg-rgb:5,5,5;
  --icon-hover-bg:rgba(255,132,64,.12);
  --icon-hover-border:rgba(255,132,64,.45);
  --shadow-medium:rgba(0,0,0,.48);
  --shadow-soft:rgba(0,0,0,.28);
}

html,body{background:#050505}
body{
  color:var(--text);
  background:
    radial-gradient(80% 68% at 26% 45%,rgba(255,255,255,.018),transparent 60%),
    #050505;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 88% 15%,rgba(11,127,130,.12),transparent 34%),
    radial-gradient(circle at 12% 88%,rgba(255,132,64,.05),transparent 38%);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.site-header{
  height:94px;
  padding:0 clamp(22px,4vw,64px);
  gap:22px;
  background:rgba(5,5,5,.94);
  border-bottom:1px solid rgba(245,242,234,.08);
  backdrop-filter:blur(12px);
}
.brand{width:78px}
.brand img{width:78px;filter:none}
.header-divider{background:rgba(245,242,234,.16)}
.app-name{
  color:var(--white,#f5f2ea);
  font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:-.025em;
  text-transform:uppercase;
}
.header-actions .text-button{color:rgba(245,242,234,.66)}
.header-actions .text-button:hover{color:var(--accent)}

.primary-btn{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--teal-deep);
  box-shadow:none;
  border-radius:0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.primary-btn:hover:not(:disabled){background:#ff9458;border-color:#ff9458;color:#075e60}
.secondary-btn{
  background:transparent;
  border-color:rgba(245,242,234,.22);
  color:var(--text);
  border-radius:0;
}
.secondary-btn:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:var(--text)}
.text-button{font-weight:700;letter-spacing:.015em}

.onboarding{max-width:1080px;padding-top:44px}
.steps{margin-bottom:72px}
.step{color:rgba(245,242,234,.42);text-transform:uppercase;font-weight:800;letter-spacing:.08em}
.step span{color:rgba(245,242,234,.28)}
.step.active{color:var(--accent)}
.step.active span{color:var(--accent)}
.step.done{color:rgba(245,242,234,.72)}
.steps i{background:rgba(245,242,234,.14)}

.step-heading h1,
.tools-heading h2,
.unlock-card h2{
  font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;
  font-weight:950;
  letter-spacing:-.064em;
  text-transform:uppercase;
}
.step-heading h1{color:var(--accent);font-size:clamp(42px,6vw,82px);line-height:.88}
.step-heading p{color:var(--muted);margin-top:20px}
.selection-summary{color:var(--accent);font-weight:900;letter-spacing:.14em}

.type-options{gap:32px}
.type-choice{
  width:250px;height:250px;
  background:var(--teal);
  border:0;
  color:var(--accent);
  box-shadow:none;
}
.type-choice::after{
  content:"";position:absolute;inset:0;border:1px solid rgba(245,242,234,.08);border-radius:50%;pointer-events:none;
}
.type-choice .choice-halo{display:none}
.type-choice:hover,
.type-choice:focus-visible{
  transform:translateY(-4px) scale(1.018);
  background:var(--accent);
  color:var(--teal);
  border-color:transparent;
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.choice-icon{color:currentColor;stroke-width:1.5}
.choice-name{
  color:currentColor;
  font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:-.045em;
}
.choice-description{color:rgba(245,242,234,.72);font-weight:600}
.type-choice:hover .choice-description,.type-choice:focus-visible .choice-description{color:rgba(11,127,130,.74)}
.choice-arrow{color:currentColor}

.style-options{gap:14px;max-width:900px}
.style-choice{
  border-radius:0;
  border:1px solid rgba(245,242,234,.13);
  background:#090909;
  padding:24px 20px 22px;
  overflow:hidden;
}
.style-choice.featured{background:#090909;border-color:rgba(245,242,234,.13)}
.style-choice::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .24s ease;
}
.style-choice{position:relative}
.style-choice:hover{transform:translateY(-3px);border-color:var(--orange,#ff8440);background:#0d0d0d}
.style-choice:hover::before{transform:scaleY(1)}
.sample-wrap{background:#f5f2ea;margin:-8px -4px 24px;padding:18px;height:194px}
.sample-wrap img{box-shadow:none;border-radius:0;width:152px;height:152px}
.style-name{
  color:var(--accent);
  font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;
  font-size:22px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:-.045em;
}
.style-name svg{color:var(--accent)}
.style-description{color:rgba(245,242,234,.64)}
.style-badge,.inline-badge{
  border-radius:0;
  border:0;
  background:var(--accent);
  color:var(--teal-deep);
  font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-weight:900;
}
.style-badge{top:12px;right:12px;padding:7px 9px;box-shadow:0 0 0 4px #090909}

.details-step{max-width:680px}
.large-url{
  border-radius:0;
  border:1px solid rgba(255,132,64,.52);
  background:#090909;
  box-shadow:none;
}
.large-url:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.large-url>svg{color:var(--accent)}
input:not([type=color]):not([type=range]):not([type=file]),select,textarea{
  border-radius:0;
  background:#0a0a0a;
  border-color:rgba(245,242,234,.15);
}
input:focus,textarea:focus,select:focus{border-color:var(--accent);background:#0a0a0a}
label{color:rgba(245,242,234,.74);text-transform:uppercase;font-weight:800;letter-spacing:.06em}
label span{color:rgba(245,242,234,.4);text-transform:none;letter-spacing:0}
.upload-zone{border-radius:0;border-color:rgba(11,127,130,.72);background:rgba(11,127,130,.11)}
.upload-zone:hover,.upload-zone.drag-over{background:rgba(11,127,130,.22);border-color:var(--accent)}
.upload-icon{border-radius:0;background:var(--teal);border:0;color:var(--accent)}
.upload-copy strong{color:var(--accent);text-transform:uppercase;font-weight:900;letter-spacing:.025em}
.form-error{border-radius:0;background:rgba(255,132,64,.08);border-color:rgba(255,132,64,.34);color:#ffd1b3}

/* Editor: black canvas side + teal control field mirrors the homepage reveal. */
.workspace{max-width:1440px;gap:28px}
.preview-column{min-width:0}
.preview-shell{
  border-radius:0;
  background:#090909;
  border:1px solid rgba(245,242,234,.1);
  box-shadow:none;
}
.canvas-card{border-radius:0;background:#f5f2ea;border:0;box-shadow:none}
.preview-top{color:rgba(245,242,234,.72)}
.content-pill{
  border-radius:0;
  background:#090909;
  border:1px solid rgba(245,242,234,.14);
}
.content-pill:hover{border-color:var(--accent)}
.pill-action,.editor-style-label{color:var(--accent)}
.preview-foot{color:rgba(245,242,234,.48)}
.status-bar.ok{color:#bde5d7}.status-bar.warn{color:#ffc08f}
.progress-line{background:transparent}
.preview-shell.is-loading .progress-line{background:rgba(255,132,64,.12)}
.preview-shell.is-loading .progress-line::before{background:var(--accent)}

.tools-panel{
  border-radius:0;
  background:var(--teal);
  border:0;
  color:var(--text);
  box-shadow:none;
}
.tools-heading{border-bottom:1px solid rgba(245,242,234,.18)}
.tools-heading h2{color:var(--accent);font-size:28px;line-height:.9}
.tools-dot{background:var(--accent)}
.panel-section,.option-details{border-color:rgba(245,242,234,.18)}
.tools-panel label,.tools-panel .option-details summary,.tools-panel .nested-details summary{color:var(--text)}
.help-copy,.tools-panel .option-details summary span{color:rgba(245,242,234,.66)}

.style-tabs,.choice-strip{
  border-radius:0;
  border-color:rgba(245,242,234,.18);
  background:rgba(5,5,5,.18);
  gap:2px;
}
.style-tab,.choice-chip{border-radius:0;color:rgba(245,242,234,.74);font-weight:800}
.style-tab:hover:not(:disabled),.choice-chip:hover:not(:disabled){background:rgba(5,5,5,.18);color:var(--text)}
.style-tab.active,.style-tab[aria-pressed=true],
.choice-chip.active,.choice-chip[aria-pressed=true]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--teal-deep);
  box-shadow:none;
}
.inline-badge{background:#050505;color:var(--accent);padding:3px 5px}
.premium-tab.is-unlocked .inline-badge{display:none}
.inline-option-block{border-color:rgba(245,242,234,.18)}
.choice-grid .choice-chip{border-radius:0;background:rgba(5,5,5,.18);border-color:rgba(245,242,234,.14)}
.choice-grid .choice-chip.active,.choice-grid .choice-chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--teal-deep)}

.logo-row{border-color:rgba(245,242,234,.18)}
#placementPreview{border-radius:0;border-color:rgba(245,242,234,.2)}
.placement-toggle{border-color:rgba(245,242,234,.35)}
.placement-sliders input{accent-color:var(--accent)}
.option-details>summary:after,.nested-details>summary:after{color:var(--accent)}
.color-picker-wrap{border-radius:0;border-color:rgba(245,242,234,.25)}
.color-row .hex-input:not([type=color]):not([type=range]):not([type=file]){border-radius:0;background:rgba(5,5,5,.22);border-color:rgba(245,242,234,.16);color:var(--text)}
#trackingSection input{background:rgba(5,5,5,.22);border-color:rgba(245,242,234,.16)}
.editor-toolbar{border-radius:0;border-color:var(--accent);background:#050505}
.editor-toolbar button{border-radius:0;background:var(--accent);color:var(--teal-deep)}
.placement-editor{border-color:var(--accent);border-radius:0}
.placement-editor:before{border-radius:0;background:#050505;border-color:var(--accent);color:var(--accent)}
.placement-handle{background:var(--accent);border-color:#f5f2ea}

.export-panel{
  border-radius:0;
  background:var(--teal);
  border-color:rgba(245,242,234,.22);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.panel-eyebrow{color:var(--accent);font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;text-transform:uppercase;font-weight:950}
.export-panel p{color:rgba(245,242,234,.66)}

.unlock-scrim{background:rgba(5,5,5,.78);backdrop-filter:blur(6px)}
.unlock-card{
  border-radius:0;
  border:0;
  background:var(--teal);
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}
.unlock-eyebrow{color:var(--accent);font-weight:900;letter-spacing:.14em}
.unlock-card h2{color:var(--accent);font-size:42px;line-height:.88}
.unlock-card p,.unlock-note{color:rgba(245,242,234,.72)!important}
.unlock-close{border-radius:0;background:transparent;border-color:rgba(245,242,234,.24);color:var(--text)}
.unlock-close:hover{background:var(--accent);color:var(--teal)}
.ad-player-placeholder{
  border-radius:0;
  border:1px solid rgba(245,242,234,.16);
  background:#050505;
}
.ad-player-copy strong{color:var(--accent);font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;text-transform:uppercase;font-weight:950}
.ad-player-copy span{color:rgba(245,242,234,.62)}
.ad-countdown{color:var(--accent)}

@media(max-width:760px){
  .site-header{height:78px}
  .step-heading h1{font-size:clamp(38px,12vw,58px)}
  .type-choice{width:205px;height:205px}
  .style-choice{border-radius:0}
  .sample-wrap{background:#f5f2ea}
  .tools-panel{border-radius:0}
}
@media(max-width:480px){
  .type-choice{width:calc((100vw - 54px)/2);height:calc((100vw - 54px)/2)}
  .style-choice{grid-template-columns:92px 1fr}
  .style-badge{position:absolute;top:8px;right:8px;box-shadow:0 0 0 3px #090909;font-size:8px;padding:5px 6px}
  .sample-wrap{margin:0;padding:8px;height:92px}
  .style-name{font-size:17px}
  .unlock-card h2{font-size:34px}
}

/* ======================================================================
   LOCKED TEAL TOOL SHELL + HOMEPAGE FOLD MENU
   The QR tool stays pinned to one viewport. Page scroll is reserved for
   lifting the tool surface and revealing the OUA category menu behind it.
   ====================================================================== */
:root{
  --black:#050505;
  --white:#f5f2ea;
  --soft:#ddd7ce;
  --orange:#ff8440;
  --orange-soft:rgba(255,132,64,.22);
  --teal:#0b7f82;
  --teal-deep:#086f72;
  --teal-dark:#075f62;
  --bg:var(--teal);
  --panel:rgba(5,5,5,.11);
  --panel-gray:rgba(5,5,5,.11);
  --bg-white:rgba(245,242,234,.07);
  --text:var(--white);
  --text-dark:var(--white);
  --muted:rgba(245,242,234,.72);
  --text-light:rgba(245,242,234,.72);
  --line:rgba(245,242,234,.18);
  --border-color:rgba(245,242,234,.18);
  --accent:var(--orange);
  --accent-soft:rgba(255,132,64,.18);
  --ok:#d8f1e7;
  --warn:#ffd1af;
  --focus:var(--orange);
  --bg-rgb:11,127,130;
  --icon-hover-bg:rgba(245,242,234,.08);
  --icon-hover-border:rgba(245,242,234,.30);
}
html,body{margin:0;width:100%;min-height:100%;background:var(--black);scrollbar-width:none;overscroll-behavior-y:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{overflow-x:hidden;color:var(--white);background:var(--black);overscroll-behavior-y:none}
body::before,body::after{display:none!important}

.qr-scene{position:fixed;inset:0;overflow:hidden;isolation:isolate;z-index:2;background:var(--teal-deep)}
.qr-scroll-track{height:calc(100svh + 250px + var(--footer-reveal,118px));pointer-events:none}
.qr-footer{position:fixed;left:0;right:0;bottom:0;z-index:0;height:var(--footer-reveal,118px);display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(28px,5.5vw,92px);background:var(--black);border-top:1px solid rgba(255,255,255,.07)}
.qr-footer a{color:var(--white);text-decoration:none;font-size:clamp(16px,1.6vw,24px);font-weight:700;letter-spacing:-.025em}
.qr-footer a:hover,.qr-footer a:focus-visible{color:var(--orange)}
.qr-footer a:focus-visible{outline:2px solid var(--orange);outline-offset:7px}
.menu-underlay{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--teal-deep)}
.menu-underlay::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.fold-menu{position:absolute;left:0;right:0;top:50%;z-index:2;transform:translateY(-46%);display:flex;flex-direction:column;gap:clamp(15px,2.2vh,25px);width:100%;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.qr-scene.menu-live .fold-menu{pointer-events:auto}
.fold-menu.has-open{transform:translateY(-50%)}
.fold-category{width:100%;background:transparent}
.fold-category-toggle{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:clamp(105px,14vh,150px);margin:0;padding:0 clamp(28px,5.5vw,92px);border:0;color:var(--orange);background:transparent;cursor:pointer;text-align:right;font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;font-size:clamp(62px,7.7vw,132px);font-weight:950;line-height:.80;letter-spacing:-.066em;text-transform:uppercase;transition:background .16s ease,color .16s ease}
.fold-category-toggle:hover,.fold-category-toggle:focus-visible,.fold-category.is-open .fold-category-toggle{background:var(--orange);color:var(--teal-deep)}
.fold-category-toggle:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.fold-category-panel{height:0;overflow:hidden;transition:height .28s cubic-bezier(.2,.8,.2,1)}
.fold-category.is-open .fold-category-panel{height:clamp(58px,7.5vh,78px)}
.fold-category-panel>*{height:100%}
.fold-app-link,.fold-app-empty{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:58px;padding:12px clamp(28px,5.5vw,92px);border-top:1px solid rgba(11,127,130,.22);background:var(--orange);color:var(--teal-deep);text-align:right;text-decoration:none;font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;font-size:clamp(14px,1.35vw,21px);font-weight:900;letter-spacing:-.025em;text-transform:uppercase}
.fold-app-link:hover,.fold-app-link:focus-visible{color:#075b5d}
.fold-app-link:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.fold-app-empty{color:rgba(11,127,130,.72)}

.tool-cover{position:absolute;left:-2px;top:-2px;width:205vw;height:calc(100% + 4px);z-index:10;overflow:hidden;transform-origin:2px calc(100% - 2px);will-change:transform;backface-visibility:hidden;background:var(--teal);box-shadow:0 34px 60px rgba(0,0,0,var(--cover-shadow,0)),0 10px 22px rgba(0,0,0,var(--cover-shadow-soft,0))}
.tool-cover::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.tool-cover-inner{position:relative;z-index:1;width:100vw;height:100%;overflow:hidden;background:transparent}
.tool-cover-edge{position:absolute;left:0;bottom:0;z-index:12;width:100%;height:2px;pointer-events:none;background:rgba(245,242,234,.08);box-shadow:0 28px 54px 16px rgba(0,0,0,var(--shadow-alpha,0));opacity:var(--edge-opacity,0)}

/* No top navigation bar: only the OUA mark stays in the upper-left. */
.site-header{position:absolute;left:0;right:0;top:0;z-index:40;height:0!important;padding:0!important;background:transparent!important;border:0!important;backdrop-filter:none!important;pointer-events:none}
.site-header .brand{position:absolute;left:clamp(20px,3.2vw,48px);top:clamp(18px,2.6vw,34px);display:grid;place-items:center;width:76px;height:42px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.site-header .brand img{display:block;width:76px;height:auto;filter:none}
.header-divider,.app-name,.home-link{display:none!important}
.header-actions{position:absolute;right:clamp(20px,3.2vw,48px);top:clamp(18px,2.6vw,30px);display:none;align-items:center;gap:10px;margin:0;pointer-events:auto}
body[data-view=editor] .header-actions{display:flex}
body:not([data-view=editor]) .header-actions{display:none!important}
.header-actions .text-button{color:var(--white)}
.header-actions .text-button:hover{color:var(--orange)}
.header-actions .primary-btn{min-height:38px;padding:9px 14px}

/* One-screen creation flow. */
main{width:100%;height:100%}
.onboarding{display:flex;flex-direction:column;justify-content:center;width:100%;height:100svh;min-height:0;max-width:1120px;margin:0 auto;padding:82px 28px 26px;overflow:hidden}
.steps{flex:none;margin:0 0 clamp(24px,4vh,42px)}
.wizard-step{min-height:0}
.step-heading{margin-bottom:clamp(24px,3.4vh,35px)}
.step-heading h1{color:var(--orange);font-size:clamp(38px,5.2vw,72px);line-height:.88}
.step-heading p{color:rgba(245,242,234,.78);margin-top:14px}
.step,.step.done{color:rgba(245,242,234,.66)}
.step.active,.step.active span{color:var(--orange)}
.step span{color:rgba(245,242,234,.44)}
.steps i{background:rgba(245,242,234,.24)}
.selection-summary{color:var(--orange)}

.type-options{gap:clamp(20px,3vw,34px);padding:0}
.type-choice{width:clamp(205px,16.5vw,246px);height:clamp(205px,16.5vw,246px);background:rgba(245,242,234,.055);border:1px solid rgba(245,242,234,.18);color:var(--orange);box-shadow:none}
.type-choice::after{border-color:rgba(245,242,234,.08)}
.type-choice:hover,.type-choice:focus-visible{background:var(--orange);color:var(--teal-deep);border-color:var(--orange);box-shadow:0 18px 50px rgba(0,0,0,.16)}
.choice-description{color:rgba(245,242,234,.78)}
.type-choice:hover .choice-description,.type-choice:focus-visible .choice-description{color:rgba(8,111,114,.80)}

.style-options{gap:14px;max-width:900px}
.style-choice,.style-choice.featured{border:1px solid rgba(245,242,234,.18);background:rgba(245,242,234,.055);color:var(--white);box-shadow:none}
.style-choice:hover{background:rgba(245,242,234,.10);border-color:var(--orange)}
.style-choice::before{background:var(--orange)}
.sample-wrap{background:var(--white)}
.style-name,.style-name svg{color:var(--orange)}
.style-description{color:rgba(245,242,234,.74)}
.style-badge,.inline-badge{background:var(--orange);border-color:var(--orange);color:var(--teal-deep)}
.back-link{color:var(--white)}
.back-link:hover{color:var(--orange)}

.details-step{width:100%;max-width:660px;max-height:calc(100svh - 150px);margin:0 auto;overflow:visible}
.details-step .step-heading{margin-bottom:20px}
.details-step h1{font-size:clamp(34px,4.4vw,57px)}
.contact-grid{gap:11px 13px}
.contact-grid label{margin-bottom:5px}
.contact-grid input:not([type=color]):not([type=range]):not([type=file]){min-height:39px;padding:9px 11px}
.large-url{background:rgba(245,242,234,.96);border:2px solid rgba(245,242,234,.96);box-shadow:none}
.large-url>svg{color:var(--teal-deep)}
.large-url input:not([type=color]):not([type=range]):not([type=file]){min-height:66px;color:var(--teal-deep);background:transparent}
.large-url input::placeholder{color:rgba(8,111,114,.52)}
input:not([type=color]):not([type=range]):not([type=file]),select,textarea{background:rgba(245,242,234,.96);color:var(--teal-deep);border-color:rgba(245,242,234,.96)}
input::placeholder,textarea::placeholder{color:rgba(8,111,114,.48)}
input:focus,textarea:focus,select:focus{border-color:var(--orange);background:var(--white)}
label{color:rgba(245,242,234,.86)}
label span{color:rgba(245,242,234,.56)}
.upload-zone{background:rgba(245,242,234,.06);border-color:rgba(245,242,234,.28)}
.upload-zone:hover,.upload-zone.drag-over{background:rgba(255,132,64,.13);border-color:var(--orange)}
.upload-icon{background:rgba(245,242,234,.10);border-color:rgba(245,242,234,.20);color:var(--orange)}
.upload-copy>span,.quiet-note{color:rgba(245,242,234,.72)}
.form-actions{margin-top:18px}
.form-error{background:rgba(255,132,64,.14);border-color:rgba(255,132,64,.38);color:#ffe2cf}
.form-busy{color:var(--white)}

.primary-btn{background:var(--orange);border-color:var(--orange);color:var(--teal-deep);border-radius:0;box-shadow:none;font-weight:900;text-transform:uppercase;letter-spacing:.035em}
.primary-btn:hover:not(:disabled){background:#ff975f;border-color:#ff975f;color:#075d60}
.secondary-btn{background:transparent;border-color:rgba(245,242,234,.28);color:var(--white);border-radius:0}
.secondary-btn:hover:not(:disabled){background:rgba(245,242,234,.10);border-color:var(--white)}
.text-button{color:rgba(245,242,234,.78)}
.text-button:hover{color:var(--orange)}

/* Editor stays inside the viewport. The tools column scrolls internally only. */
body[data-view=editor]{background:var(--black)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:28px;width:100%;height:100svh;max-width:1420px;margin:0 auto;padding:82px 30px 20px;overflow:hidden;align-items:stretch}
.preview-column{position:relative;top:auto;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.preview-top{flex:none;margin-bottom:12px}
.preview-shell{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:rgba(5,5,5,.10);border-color:rgba(245,242,234,.16);border-radius:0;padding:18px 18px 10px}
.canvas-stage{flex:1;min-height:0;padding:0}
.canvas-card{width:min(100%,calc(100svh - 235px),510px);min-width:180px;border-radius:0;box-shadow:0 14px 42px rgba(0,0,0,.22)}
.canvas-card>canvas{border-radius:0}
.status-bar{margin:10px auto 0;color:rgba(245,242,234,.76)}
.status-bar.ok{color:#d8f1e7}.status-bar.warn{color:#ffd1af}
.preview-foot{flex:none;color:rgba(245,242,234,.56);margin:9px 4px 0}
.content-pill{background:rgba(245,242,234,.08);border-color:rgba(245,242,234,.20);border-radius:0}
.content-pill>span:first-of-type{color:var(--white)}
.content-pill>svg{color:var(--orange)}
.pill-action{color:rgba(245,242,234,.65);border-left-color:rgba(245,242,234,.18)}
.editor-style-label{color:rgba(245,242,234,.68)}
.tools-panel{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(245,242,234,.28) transparent;background:rgba(5,5,5,.10);border-color:rgba(245,242,234,.16);border-radius:0;padding:20px}
.tools-panel::-webkit-scrollbar{width:6px}.tools-panel::-webkit-scrollbar-thumb{background:rgba(245,242,234,.28)}
.tools-heading h2{color:var(--orange)}
.tools-dot{background:var(--orange);box-shadow:none}
.style-tabs,.choice-strip{background:rgba(5,5,5,.12);border-color:rgba(245,242,234,.18);border-radius:0}
.style-tab,.choice-chip{color:rgba(245,242,234,.70);border-radius:0}
.style-tab:hover,.choice-chip:hover:not(:disabled){color:var(--white);background:rgba(245,242,234,.08)}
.style-tab.active,.choice-chip.active,.choice-chip[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--teal-deep);box-shadow:none}
.choice-grid .choice-chip{background:rgba(5,5,5,.08);border-color:rgba(245,242,234,.18)}
.choice-grid .choice-chip.active,.choice-grid .choice-chip[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--teal-deep)}
.help-copy,.tools-panel .option-details summary span{color:rgba(245,242,234,.64)}
.tools-panel label,.tools-panel .option-details summary,.tools-panel .nested-details summary{color:var(--white)}
.option-details,.panel-section+ .panel-section{border-color:rgba(245,242,234,.16)}
.color-row .hex-input:not([type=color]):not([type=range]):not([type=file]),#trackingSection input,#encodedUrl{background:rgba(245,242,234,.95);color:var(--teal-deep);border-color:rgba(245,242,234,.95)}
.logo-row>canvas{border-radius:0;border-color:rgba(245,242,234,.35)}
.placement-toggle[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:var(--teal-deep)}
.placement-sliders input{accent-color:var(--orange)}

.export-panel{top:calc(100% + 9px);right:0;width:285px;background:var(--white);border:0;border-radius:0;box-shadow:0 18px 60px rgba(0,0,0,.28);color:var(--teal-deep)}
.export-panel .panel-eyebrow,.export-panel label,.export-panel p{color:var(--teal-deep)}
.export-panel .choice-strip{background:rgba(11,127,130,.08);border-color:rgba(11,127,130,.18)}
.export-panel .choice-chip{color:var(--teal-deep)}
.export-panel .choice-chip.active{background:var(--orange);color:var(--teal-deep)}
.export-panel .secondary-btn{color:var(--teal-deep);border-color:rgba(11,127,130,.30)}
.export-panel .secondary-btn:hover{background:rgba(11,127,130,.08)}

/* Ad unlock keeps the same orange/teal language instead of a black modal. */
.unlock-scrim{background:rgba(5,5,5,.52)}
.unlock-card{border:0;border-radius:0;background:var(--teal);box-shadow:0 24px 90px rgba(0,0,0,.38);color:var(--white)}
.unlock-eyebrow{color:var(--orange)}
.unlock-card h2{color:var(--orange)}
.unlock-card p,.unlock-note{color:rgba(245,242,234,.78)!important}
.unlock-close{border-radius:0;background:transparent;border-color:rgba(245,242,234,.28);color:var(--white)}
.ad-player-placeholder{border-radius:0;border-color:rgba(245,242,234,.18);background:rgba(5,5,5,.12)}
.ad-player-copy span{color:rgba(245,242,234,.68)}
.ad-countdown{color:var(--orange)}

@media(max-width:900px){
  .tool-cover{width:230vw}
  .workspace{grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding-left:18px;padding-right:18px}
  .style-options{gap:10px}
  .style-choice{padding:17px 14px}
  .sample-wrap{height:148px;margin-bottom:16px;padding:12px}
  .sample-wrap img{width:118px;height:118px}
}
@media(max-width:760px){
  .tool-cover{width:255vw}
  .site-header .brand{left:18px;top:16px;width:62px;height:34px}.site-header .brand img{width:62px}
  .header-actions{right:16px;top:14px}
  .onboarding{padding:70px 18px 18px;justify-content:center}
  .steps{margin-bottom:22px}
  .step-heading{margin-bottom:20px}
  .step-heading h1{font-size:clamp(31px,10vw,48px)}
  .step-heading p{font-size:11px;margin-top:10px}
  .type-options{gap:12px}
  .type-choice{width:min(40vw,185px);height:min(40vw,185px)}
  .style-options{grid-template-columns:1fr;max-width:560px;width:100%;margin:0 auto;gap:8px}
  .style-choice{display:grid;grid-template-columns:84px 1fr;column-gap:16px;align-items:center;padding:12px 14px}
  .sample-wrap{grid-column:1;grid-row:1/3;height:78px;margin:0;padding:7px}.sample-wrap img{width:66px;height:66px}
  .style-name{font-size:17px}.style-description{font-size:10px;margin-top:2px}
  .style-badge{top:8px;right:8px}
  .details-step{max-height:calc(100svh - 115px)}
  .contact-grid{gap:8px 9px}
  .contact-grid input:not([type=color]):not([type=range]):not([type=file]){min-height:34px;padding:7px 9px;font-size:11px}
  .workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(190px,38vh);gap:10px;padding:64px 12px 10px;max-width:none}
  .preview-column{min-height:0}
  .preview-shell{padding:10px}.canvas-card{width:min(100%,calc(62vh - 145px),340px)}
  .tools-panel{height:100%;padding:15px}
  .preview-foot{display:none}.preview-top{margin-bottom:7px}
  body[data-view=editor] .header-actions .text-button{font-size:10px}
  body[data-view=editor] .header-actions .primary-btn{font-size:10px;min-height:32px;padding:7px 10px}
  .fold-menu{gap:12px;transform:translateY(-44%)}
  .fold-menu.has-open{transform:translateY(-50%)}
  .fold-category-toggle{min-height:90px;padding-left:22px;padding-right:22px;font-size:clamp(46px,13.5vw,68px)}
  .fold-app-link,.fold-app-empty{padding-left:22px;padding-right:22px;font-size:14px}
}
@media(max-width:480px){
  .type-choice{width:calc((100vw - 48px)/2);height:calc((100vw - 48px)/2);max-width:174px;max-height:174px}
  .choice-description{font-size:9px}
  .steps{gap:8px}.steps i{width:16px}.step{font-size:9px}
  .contact-grid{grid-template-columns:1fr 1fr}
  .form-actions{margin-top:12px}
  .large-url input:not([type=color]):not([type=range]):not([type=file]){min-height:58px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.tool-cover,.fold-menu,.fold-category-panel{transition:none!important}}

/* Style-card polish: ad unlock is a light cue, not a giant button. */
.style-badge{
  top:14px;
  right:14px;
  gap:6px;
  padding:7px 10px;
  border:0;
  border-radius:999px;
  background:var(--orange);
  color:var(--teal-deep);
  box-shadow:none;
  font-size:9px;
  font-weight:950;
  line-height:1;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.badge-play{font-size:8px;line-height:1;transform:translateY(-.2px)}
.style-choice:hover .style-badge{background:#ff975f}
.style-preview{opacity:1;transition:opacity .28s ease,transform .3s ease}
.style-preview.is-changing{opacity:.16}
.sample-wrap{overflow:hidden}
@media(max-width:760px){.style-badge{top:8px;right:8px;padding:6px 8px;font-size:7px;gap:4px}.badge-play{font-size:6px}}

/* Simple style preview crossfade. Nothing moves; only opacity changes. */
.sample-wrap{position:relative;overflow:hidden;isolation:isolate}
.style-preview-layer{
  position:absolute;
  left:50%;
  top:50%;
  width:148px;
  height:148px;
  opacity:0;
  transform:translate(-50%,-50%) !important;
  transition:opacity .9s cubic-bezier(.37,0,.2,1) !important;
  will-change:opacity;
}
.style-preview-layer.is-front{opacity:1}
.style-choice:hover .style-preview-layer,
.style-choice:focus-visible .style-preview-layer{
  transform:translate(-50%,-50%) !important;
}
@media(max-width:760px){
  .style-preview-layer{width:118px;height:118px}
}
@media(max-width:480px){
  .style-preview-layer{width:66px;height:66px}
}
@media(prefers-reduced-motion:reduce){
  .style-preview-layer{transition:none!important}
}

/* Sub-page fold menu: inverted OUA colors. The QR tool surface remains teal. */
.menu-underlay{background:var(--orange)}
.fold-category-toggle{color:var(--teal-deep)}
.fold-category-toggle:hover,
.fold-category-toggle:focus-visible,
.fold-category.is-open .fold-category-toggle{background:var(--teal-deep);color:var(--orange)}
.fold-category-toggle:focus-visible{outline-color:var(--white)}
.fold-app-link,.fold-app-empty{background:var(--teal-deep);color:var(--orange);border-top-color:rgba(255,132,64,.28)}
.fold-app-link:hover,.fold-app-link:focus-visible{color:var(--orange);opacity:.72}
.fold-app-empty{color:rgba(255,132,64,.78)}


/* New OUA vector mark: same HTML/SVG mark as the homepage, orange on this tool. */
.site-header .brand{color:var(--orange)}
.site-header .brand .brand-svg{display:block;width:78px;height:auto;overflow:visible}
.site-header .brand .brand-svg path{fill:currentColor}
@media(max-width:760px){.site-header .brand .brand-svg{width:62px}}

/* Nudge the ad-unlock cue toward the card's outside/top edge. */
.style-badge{top:10px;right:8px}
@media(max-width:760px){.style-badge{top:6px;right:5px}}


/* Home link revealed with the fold-up menu. Uses the same HTML/SVG OUA mark. */
.menu-home-brand{position:absolute;top:clamp(20px,3vw,42px);right:clamp(22px,4vw,64px);z-index:4;display:grid;place-items:center;width:clamp(74px,7vw,108px);height:auto;color:var(--teal-deep);text-decoration:none;pointer-events:none;opacity:1;transform:none;transition:none}
.qr-scene.menu-live .menu-home-brand{pointer-events:auto}
.menu-home-brand-svg{display:block;width:100%;height:auto;overflow:visible}
.menu-home-brand-svg path{fill:currentColor}
.menu-home-brand:hover,.menu-home-brand:focus-visible{color:var(--teal-deep);opacity:.72}
.menu-home-brand:focus-visible{outline:2px solid var(--white);outline-offset:8px}
@media(max-width:760px){.menu-home-brand{top:18px;right:20px;width:72px}}

@media(max-width:760px){.qr-footer{padding-left:22px;padding-right:22px}}

/* Menu navigation: keep the inverted orange text on hover and let the
   current tool surface finish its physical fold before the next page loads. */
body.tool-launching{overflow:hidden}
body.tool-launching .qr-scene,
body.tool-launching .qr-footer{pointer-events:none}
.fold-app-link{transition:opacity .16s ease,color .16s ease}


/* Editor destination control: lives above Style and carries the 3-use ad meter. */
.preview-column>.preview-top{display:none!important}
.content-panel-section{padding-bottom:17px}
.content-panel-section>label{display:block;margin-bottom:8px}
.content-pill-panel{
  width:100%;
  max-width:none;
  min-height:42px;
  padding:9px 10px;
  background:rgba(245,242,234,.08);
  border-color:rgba(245,242,234,.20);
}
.content-pill-panel>svg{flex:0 0 auto}
.content-pill-panel #contentSummary{flex:1;min-width:0}
.content-pill-panel .pill-action{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  white-space:nowrap;
  color:rgba(245,242,234,.72);
}
.usage-counter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:4px 6px;
  background:var(--orange);
  color:var(--teal-deep);
  font-size:9px;
  font-weight:950;
  line-height:1;
  letter-spacing:.03em;
}
.usage-counter[hidden]{display:none!important}
.style-panel-section{padding-top:17px!important}
@media(max-width:760px){
  .content-pill-panel{min-height:40px}
  .content-pill-panel #contentSummary{font-size:10px}
  .content-pill-panel .pill-action{font-size:9px}
  .usage-counter{font-size:8px;min-width:31px}
}

/* Keep the details-step website icon preview from stacking the placeholder SVG
   and the loaded favicon. Favicons should be shown intact, not cropped. */
.upload-icon{
  position:relative;
  display:block;
  overflow:hidden;
}
.upload-icon > svg,
.upload-icon > img{
  position:absolute;
  inset:0;
  margin:auto;
}
.upload-icon > svg{
  width:20px;
  height:20px;
}
.upload-icon > img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  padding:4px;
  background:#f5f2ea;
}
.upload-icon > [hidden]{display:none!important}