:root{--ink:#17231d;--muted:#748079;--paper:#f7f7f4;--card:#fff;--line:#e6e9e4;--mint:#c6e8d3;--lime:#d7f86b;--coral:#ff836e;--shadow:0 20px 50px rgba(23,35,29,.08);--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px}body.dark{--paper:#15201b;--card:#1d2b24;--ink:#edf5ef;--muted:#a2b0a7;--line:#304139;--shadow:0 20px 50px rgba(0,0,0,.2)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer;color:inherit}.app-shell{max-width:1440px;margin:auto;padding:0 5vw;overflow:hidden}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.7px;display:flex;align-items:center;gap:8px;white-space:nowrap}.brand em{font-style:normal;color:var(--muted);font-weight:500}.brand-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--ink);color:var(--lime);font-size:20px}.main-nav{display:flex;gap:26px;color:var(--muted);font-size:13px}.main-nav a:hover{color:var(--ink)}.top-actions{display:flex;align-items:center;gap:12px}.icon-button,.menu-toggle{border:1px solid var(--line);background:transparent;border-radius:10px;width:38px;height:38px;font-size:17px}.menu-toggle{display:none}.button{border:0;padding:14px 19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:18px;font-weight:700;font-size:13px;transition:.2s ease}.button:hover{transform:translateY(-2px)}.button-dark{background:var(--ink);color:var(--paper)}.button-light{background:var(--card);border:1px solid var(--line)}.button-small{padding:11px 14px;gap:8px}.hero{min-height:550px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6vw;padding:70px 0 80px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--muted)}.eyebrow-dot{width:7px;height:7px;background:var(--coral);display:inline-block;border-radius:50%;margin-right:7px}.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(48px,6vw,88px);line-height:.97;letter-spacing:-4px;margin:22px 0 24px}.hero h1 span{color:var(--muted)}.hero-copy>p{max-width:430px;color:var(--muted);font-size:17px;line-height:1.55;margin-bottom:30px}.hero-meta{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:11px;line-height:1.45;margin-top:30px}.hero-meta strong{color:var(--ink);font-weight:600}.avatar-stack{display:flex;padding-left:8px}.avatar-stack span{width:27px;height:27px;margin-left:-8px;border-radius:50%;border:2px solid var(--paper);display:grid;place-items:center;font-size:8px;font-weight:700;background:var(--mint)}.avatar-stack span:nth-child(2){background:var(--coral)}.avatar-stack span:nth-child(3){background:var(--lime)}.hero-visual{height:410px;position:relative;display:grid;place-items:center}.hero-grid{position:absolute;inset:35px 20px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.75;mask-image:radial-gradient(circle,black 30%,transparent 73%)}.hero-orbit{position:absolute;border:1px solid var(--line);border-radius:50%;width:430px;height:220px;transform:rotate(-27deg)}.orbit-two{width:280px;height:150px;transform:rotate(32deg);border-color:#cce8d6}.hero-qr{position:relative;background:var(--card);padding:19px;border-radius:20px;box-shadow:var(--shadow);z-index:1}.hero-qr canvas{display:block;width:175px!important;height:175px!important}.float-note{position:absolute;z-index:2;background:var(--card);box-shadow:var(--shadow);border-radius:10px;padding:11px 14px;font-size:11px;font-weight:600}.note-top{top:65px;right:3%;}.note-bottom{bottom:42px;left:2%;font-family:'Space Grotesk'}.note-bottom span{margin-left:15px;color:var(--coral)}.status-dot{display:inline-block;background:#39b96b;width:7px;height:7px;border-radius:50%;margin-right:6px}.generator-section{padding:70px 0 90px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}.section-heading h2,.how-section h2,.about-section h2{font-family:'Space Grotesk';font-size:clamp(30px,4vw,48px);letter-spacing:-2px;line-height:1.05;margin:13px 0 0}.shortcut-hint{font-size:11px;color:var(--muted)}kbd{border:1px solid var(--line);background:var(--card);padding:4px 6px;border-radius:4px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:18px;align-items:start}.editor-panel,.preview-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:27px}.preview-panel{position:sticky;top:20px}.panel-header,.preview-top{display:flex;justify-content:space-between;align-items:start}.panel-header>div,.preview-top>div{display:flex;gap:12px;align-items:center}.panel-header h3,.preview-top h3{font-size:18px;margin:0;font-family:'Space Grotesk'}.panel-index{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1px}.live-pill{font-size:10px;color:#318a50;background:#e4f5e9;border-radius:20px;padding:7px 10px}.live-pill i{width:6px;height:6px;background:#42b669;border-radius:50%;display:inline-block;margin-right:5px}.type-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:26px 0 22px}.type-tab{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:12px;color:var(--muted)}.type-tab.selected{background:var(--ink);border-color:var(--ink);color:var(--paper)}.field-area{min-height:120px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label,.control-block>label,.logo-size-row span{font-size:11px;font-weight:700;color:var(--muted)}.field input,.field textarea,.field select,.control-block select,.custom-size{width:100%;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:12px;color:var(--ink);outline:none}.field textarea{min-height:79px;resize:vertical}.field input:focus,.field textarea:focus,.control-block select:focus{border-color:var(--ink)}.design-heading{border-top:1px solid var(--line);padding-top:25px;margin-top:27px}.text-button{border:0;background:none;padding:0;color:var(--muted);font-size:12px}.text-button:hover{color:var(--ink)}.danger:hover{color:#d55c4d}.design-controls{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.control-block{display:flex;flex-direction:column;gap:9px}.color-row,.style-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.color-input{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:6px;font-size:10px}.color-input input{appearance:none;border:0;padding:0;width:25px;height:25px;background:none}.color-input input::-webkit-color-swatch-wrapper{padding:0}.color-input input::-webkit-color-swatch{border:0;border-radius:5px}.inline-checks{display:flex;gap:12px;font-size:11px;color:var(--muted)}.inline-checks input{accent-color:var(--ink)}.upload-row{display:flex;gap:8px}.upload-button,.remove-logo{border:1px dashed var(--muted);background:var(--paper);padding:10px;border-radius:8px;font-size:11px;text-align:center;flex:1}.remove-logo{border-style:solid;flex:0 0 auto}.upload-row input{display:none}.logo-size-row{display:flex;gap:10px;align-items:center;margin-top:8px}.logo-size-row input{flex:1;accent-color:var(--ink)}.logo-size-row output{font-size:11px;color:var(--muted)}.size-options{display:flex;gap:6px}.size-options button,.custom-size{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:9px 8px;flex:1;font-size:11px;text-align:left}.size-options button span{display:block;color:var(--muted);font-size:9px;margin-top:3px}.size-options button.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.custom-size{display:flex;align-items:center;gap:3px}.custom-size input{border:0;background:transparent;width:48px;color:var(--ink);outline:0;font-size:11px}.safety-message{display:flex;gap:10px;align-items:center;background:#fff0e8;border:1px solid #ffd3c4;color:#9d4938;padding:11px 13px;border-radius:9px;margin-top:24px;font-size:11px}.safety-message span{width:17px;height:17px;display:grid;place-items:center;background:#ff957b;border-radius:50%;color:white;font-weight:700}.safety-message p{margin:0;line-height:1.4}.qr-stage{min-height:340px;background:var(--paper);border-radius:12px;display:grid;place-items:center;position:relative;margin:24px 0 18px}.qr-stage>div:first-child{background:var(--card);padding:15px;border-radius:12px}.qr-stage canvas,.qr-stage svg{display:block;max-width:100%;height:auto}.scan-hint{position:absolute;bottom:13px;font-size:10px;color:var(--muted)}.scan-hint span{color:var(--coral);margin-right:5px}.preview-info{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between;gap:12px}.preview-info div{display:flex;flex-direction:column;gap:5px}.preview-info span{font-size:10px;color:var(--muted)}.preview-info strong{font-size:11px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.download-row{display:flex;gap:8px;position:relative;margin-top:17px}.download-row .button{flex:1}.download-menu{position:absolute;right:0;top:50px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:9px;overflow:hidden;z-index:4;display:none}.download-menu.open{display:block}.download-menu button{display:block;border:0;background:none;text-align:left;padding:10px 14px;width:145px;font-size:11px}.download-menu button:hover{background:var(--paper)}.utility-actions{display:flex;justify-content:space-between;margin-top:17px}.utility-actions button{background:none;border:0;color:var(--muted);font-size:11px}.utility-actions button:hover{color:var(--ink)}.templates-section,.history-section{padding:55px 0}.template-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.template-card{border:1px solid var(--line);background:var(--card);padding:15px;border-radius:12px;cursor:pointer;transition:.2s}.template-card:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:var(--shadow)}.template-card.selected{border:2px solid var(--ink);padding:14px}.template-preview{height:135px;border-radius:7px;display:grid;place-items:center;margin-bottom:13px}.template-preview canvas{width:90px!important;height:90px!important}.template-name{font-size:12px;font-weight:700}.template-sub{font-size:10px;color:var(--muted);margin-top:3px}.history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.empty-history{grid-column:1/-1;text-align:center;padding:35px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:12px}.empty-history span{font-size:25px;display:block;margin-bottom:7px}.history-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px}.history-thumb{background:var(--paper);border-radius:8px;height:140px;display:grid;place-items:center;margin-bottom:12px}.history-thumb img{width:110px;height:110px;object-fit:contain}.history-meta{display:flex;justify-content:space-between;align-items:center}.history-title{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}.history-date{font-size:10px;color:var(--muted);margin-top:4px}.history-actions{display:flex;gap:5px}.history-actions button{border:1px solid var(--line);background:var(--paper);border-radius:6px;font-size:10px;padding:5px}.how-section{background:var(--ink);color:var(--paper);padding:85px 6vw;margin:50px calc(50% - 50vw) 0}.how-section .eyebrow{color:#8b9b91}.how-section h2{margin-bottom:50px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.step{border-top:1px solid #4a5c51;padding-top:17px}.step>span{color:var(--lime);font-size:11px}.step h3{font-family:'Space Grotesk';font-size:19px;margin:30px 0 12px}.step p{color:#aab9af;max-width:260px;line-height:1.5;font-size:13px}.about-section{display:flex;justify-content:space-between;gap:10vw;padding:100px 0}.about-section p{max-width:450px;color:var(--muted);font-size:18px;line-height:1.55;margin:25px 0 0}footer{border-top:1px solid var(--line);padding:25px 0;font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.footer-dot{color:var(--coral);font-size:8px;margin-left:5px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);border-radius:8px;padding:12px 18px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:rgba(23,35,29,.45);z-index:10;display:grid;place-items:center;padding:20px}.modal-backdrop[hidden]{display:none}.share-modal{background:var(--card);padding:34px;border-radius:16px;max-width:390px;width:100%;position:relative;box-shadow:var(--shadow)}.share-modal h2{font-family:'Space Grotesk';font-size:32px;letter-spacing:-1px;margin:15px 0 8px}.share-modal p{color:var(--muted);font-size:13px;margin-bottom:24px}.modal-close{position:absolute;right:18px;top:15px;border:0;background:none;font-size:23px}.share-buttons{display:flex;flex-direction:column;gap:8px}.reveal{animation:rise .7s both}.delay-1{animation-delay:.15s}@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media(max-width:900px){.main-nav{gap:13px}.hero{gap:25px}.design-controls{grid-template-columns:1fr}.template-grid{grid-template-columns:repeat(3,1fr)}.history-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.app-shell{padding:0 18px}.topbar{height:72px}.main-nav{display:none;position:absolute;top:72px;left:0;right:0;padding:18px;background:var(--card);border-bottom:1px solid var(--line);z-index:8;flex-direction:column}.main-nav.open{display:flex}.menu-toggle{display:block}.top-actions .button{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding:55px 0 35px;min-height:0}.hero h1{font-size:52px;letter-spacing:-3px}.hero-visual{height:330px}.hero-orbit{width:310px;height:170px}.hero-grid{inset:20px}.note-top{top:35px}.note-bottom{bottom:15px}.section-heading{align-items:start;gap:20px;flex-direction:column}.shortcut-hint{display:none}.workspace-grid{grid-template-columns:1fr}.preview-panel{position:relative;order:-1}.editor-panel,.preview-panel{padding:20px}.qr-stage{min-height:300px}.type-tabs{gap:5px}.type-tab{padding:8px 9px}.field-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.size-options{flex-wrap:wrap}.size-options button,.custom-size{flex:1 1 45%}.template-grid{grid-template-columns:repeat(2,1fr)}.template-preview{height:120px}.history-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr;gap:25px}.about-section{display:block;padding:75px 0}.about-section p{font-size:16px}.how-section{padding:65px 30px}.how-section h2{margin-bottom:35px}footer{font-size:10px}}