:root{--ink-950:#0a0b0d;--ink-900:#101217;--ink-850:#15181f;--ink-800:#1b1f28;--ink-700:#262b36;--ink-600:#363c4a;--ink-400:#6b7484;--ink-300:#98a1b0;--ink-200:#c3cad5;--ink-50:#eef1f6;--brand:#6ea8fe;--brand-soft:#6ea8fe24;--danger:#f87171;--danger-soft:#f871711f;--radius-sm:6px;--radius:8px;--radius-lg:12px;--radius-xl:16px;--font-sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--shadow-pop:0 12px 40px -12px #000c}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font-family:var(--font-sans);background-color:var(--ink-950);color:var(--ink-50);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}::selection{background:#6ea8fe47}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--ink-700);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--ink-600)}.app-container{flex-direction:column;min-height:100vh;display:flex}.main-workspace{flex-direction:column;flex:1;height:calc(100vh - 56px);display:flex;position:relative;overflow:hidden}@media (width>=1024px){.main-workspace{flex-direction:row}}.navbar{z-index:50;background:var(--ink-950);border-bottom:1px solid var(--ink-700);justify-content:space-between;align-items:center;gap:16px;width:100%;height:56px;padding:0 20px;display:flex;position:sticky;top:0}.navbar-brand{align-items:baseline;gap:10px;min-width:0;display:flex}.brand-title{letter-spacing:-.01em;color:var(--ink-50);font-size:.95rem;font-weight:600}.brand-subtitle{color:var(--ink-400);white-space:nowrap;font-size:.8rem;display:none}@media (width>=768px){.brand-subtitle{display:block}}.navbar-privacy{color:var(--ink-400);align-items:center;gap:6px;font-size:.75rem;display:none}@media (width>=1024px){.navbar-privacy{display:flex}}.navbar-actions{align-items:center;gap:8px;display:flex}.btn{border-radius:var(--radius);cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:8px 14px;font-family:inherit;font-size:.8125rem;font-weight:500;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{color:var(--ink-300);border-color:var(--ink-700);background:0 0}.btn-secondary:hover:not(:disabled){background:var(--ink-800);color:var(--ink-50)}.btn-primary{background:var(--brand);color:var(--ink-950);font-weight:600}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-danger{color:var(--ink-300);border-color:var(--ink-700);background:0 0}.btn-danger:hover:not(:disabled){background:var(--danger-soft);color:var(--danger);border-color:#f8717166}.btn-icon{border-radius:var(--radius);color:var(--ink-400);border:1px solid var(--ink-700);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:7px;transition:background-color .15s,color .15s;display:inline-flex}.btn-icon:hover:not(:disabled){background:var(--ink-800);color:var(--ink-50)}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.dropzone-section{--lift:172px;width:100%;max-width:620px;padding:56px 20px calc(56px + var(--lift));margin:0 auto}@media (height<=740px){.dropzone-section{--lift:0px;padding:32px 20px}}.hero-header{margin-bottom:24px}.hero-title{letter-spacing:-.02em;color:var(--ink-50);margin-bottom:10px;font-size:1.75rem;font-weight:600;line-height:1.2}.hero-subtitle{color:var(--ink-300);font-size:.9375rem;line-height:1.6}.dropzone-card{border:1px dashed var(--ink-600);border-radius:var(--radius-xl);text-align:center;cursor:pointer;background:#10121799;width:100%;padding:44px 24px;transition:border-color .15s,background-color .15s}.dropzone-card:hover,.dropzone-card.dragging{border-color:var(--brand);background:var(--ink-900)}.dropzone-icon-box{border-radius:var(--radius-lg);background:var(--ink-800);border:1px solid var(--ink-700);width:48px;height:48px;color:var(--ink-300);justify-content:center;align-items:center;margin:0 auto 18px;display:flex}.dropzone-title{color:var(--ink-50);margin-bottom:6px;font-size:1rem;font-weight:600}.dropzone-desc{color:var(--ink-400);margin:0 auto 20px;font-size:.875rem}.toolbar{background:var(--ink-900);border-bottom:1px solid var(--ink-700);z-index:30;flex-direction:column;gap:22px;width:100%;padding:18px;display:flex;overflow-y:auto}@media (width>=1024px){.toolbar{border-bottom:none;border-right:1px solid var(--ink-700);flex-shrink:0;width:300px}}.section-label{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-400);margin-bottom:10px;font-size:.7rem;font-weight:500}.tool-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.tool-btn{border-radius:var(--radius);border:1px solid var(--ink-700);color:var(--ink-300);cursor:pointer;background:0 0;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:11px 8px;font-family:inherit;transition:background-color .15s,border-color .15s,color .15s;display:flex}.tool-btn:hover{background:var(--ink-800);color:var(--ink-50)}.tool-btn.active{background:var(--brand-soft);border-color:var(--brand);color:var(--ink-50)}.tool-btn-title{font-size:.78rem;font-weight:500}.tool-btn-sub{color:var(--ink-400);font-size:.65rem}.style-grid{grid-template-columns:repeat(2,1fr);gap:6px;display:grid}.style-btn{border-radius:var(--radius);border:1px solid var(--ink-700);color:var(--ink-300);cursor:pointer;text-align:left;background:0 0;align-items:center;gap:9px;padding:9px 10px;font-family:inherit;transition:background-color .15s,border-color .15s,color .15s;display:flex}.style-btn:hover{background:var(--ink-800);color:var(--ink-50)}.style-btn.active{background:var(--brand-soft);border-color:var(--brand);color:var(--ink-50)}.style-title{font-size:.78rem;font-weight:500;line-height:1.2}.style-desc{color:var(--ink-400);font-size:.65rem}.customization-box{border-radius:var(--radius-lg);background:var(--ink-950);border:1px solid var(--ink-700);margin-top:14px;padding:13px}.slider-label{color:var(--ink-300);justify-content:space-between;margin-bottom:8px;font-size:.78rem;display:flex}.slider-val{font-family:var(--font-mono);color:var(--ink-200);font-size:.75rem}input[type=range]{background:var(--ink-700);appearance:none;cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--brand);cursor:pointer;border-radius:50%;width:14px;height:14px}input[type=range]::-moz-range-thumb{background:var(--brand);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.color-swatches{flex-wrap:wrap;align-items:center;gap:7px;display:flex}.color-swatch{border-radius:var(--radius-sm);border:1px solid var(--ink-600);cursor:pointer;width:24px;height:24px;transition:box-shadow .15s}.color-swatch.active{box-shadow:0 0 0 2px var(--ink-900), 0 0 0 3px var(--brand)}.emoji-swatches{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.emoji-btn{border-radius:var(--radius-sm);border:1px solid var(--ink-700);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:28px;height:28px;font-size:1rem;transition:background-color .15s,border-color .15s;display:flex}.emoji-btn:hover{background:var(--ink-800)}.emoji-btn.active{border-color:var(--brand);background:var(--brand-soft)}.toolbar-footer{border-top:1px solid var(--ink-700);flex-direction:column;gap:10px;margin-top:auto;padding-top:16px;display:flex}.history-btns{gap:6px;display:flex}.history-btns .btn{flex:1}.canvas-column{background:var(--ink-950);flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.canvas-wrapper{background-color:var(--ink-950);-webkit-user-select:none;user-select:none;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-grid-bg{pointer-events:none;background-image:radial-gradient(#ffffff0d 1px,#0000 1px);background-size:22px 22px;position:absolute;inset:0}.canvas-status-bar{background:var(--ink-900);border-bottom:1px solid var(--ink-700);color:var(--ink-300);z-index:10;justify-content:space-between;align-items:center;gap:12px;padding:7px 14px;font-size:.75rem;display:flex;position:absolute;top:0;left:0;right:0}.status-tag{color:var(--ink-400);margin-right:5px}.status-val{font-family:var(--font-mono);color:var(--ink-200)}.zoom-floating-bar{z-index:20;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);align-items:center;gap:4px;padding:5px 8px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.zoom-val{font-family:var(--font-mono);color:var(--ink-200);text-align:center;min-width:46px;font-size:.75rem}.zoom-divider{background:var(--ink-700);width:1px;height:14px;margin:0 3px}.canvas-box{box-shadow:var(--shadow-pop);border-radius:var(--radius-sm);border:1px solid var(--ink-700);position:absolute;top:0;left:0;overflow:hidden}.modal-overlay{z-index:100;background:#0a0b0dbf;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--radius-xl);width:100%;max-width:880px;box-shadow:var(--shadow-pop);flex-direction:column;max-height:90vh;display:flex;overflow:hidden}.modal-header{border-bottom:1px solid var(--ink-700);justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;display:flex}.modal-title{color:var(--ink-50);font-size:.95rem;font-weight:600}.modal-sub{color:var(--ink-400);font-size:.78rem}.modal-body{background:var(--ink-950);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:20px;display:flex;overflow-y:auto}.comparison-box{border-radius:var(--radius-lg);border:1px solid var(--ink-700);-webkit-user-select:none;user-select:none;max-width:100%;max-height:50vh;position:relative;overflow:hidden}.comparison-img{object-fit:contain;width:auto;max-height:50vh;display:block}.comparison-overlay{border-right:2px solid var(--brand);position:absolute;top:0;bottom:0;left:0;overflow:hidden}.slider-handle{background:var(--brand);width:30px;height:30px;color:var(--ink-950);pointer-events:none;z-index:10;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.comparison-badge{border-radius:var(--radius-sm);letter-spacing:.03em;text-transform:uppercase;pointer-events:none;z-index:10;padding:3px 8px;font-size:.65rem;font-weight:500;position:absolute;top:10px}.badge-before{color:var(--ink-200);background:#0a0b0dcc;left:10px}.badge-after{color:var(--brand);background:#0a0b0dcc;right:10px}.modal-footer{background:var(--ink-900);border-top:1px solid var(--ink-700);flex-direction:column;gap:12px;padding:16px 20px;display:flex}@media (width>=640px){.modal-footer{flex-direction:row;justify-content:space-between;align-items:center}}.footer-privacy-note{color:var(--ink-400);font-size:.78rem}.export-btn-group{align-items:center;gap:8px;width:100%;display:flex}@media (width>=640px){.export-btn-group{width:auto}}