:root{--ink: #1a1a1a;--page-bg: #f4f4f4;--bg: #ffffff;--bg-dot: rgba(0,0,0,.08);--shadow-color: rgb(0 0 0 / .25);--accent: #2563eb;--accent-ink: #ffffff;--danger: #d32f2f;--muted: #6b6b6b;--line: #1a1a1a;--radius: 4px;--text-scale: 1;font-size:16px;--bounce-ease: cubic-bezier(.34, 1.56, .64, 1);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-column-gap: var(--space-6);--space-section-gap: var(--space-6);--space-heading-to-body: var(--space-3);--space-element-gap: var(--space-4);--space-inline-xs: var(--space-1);--space-inline-sm: var(--space-2);--space-inline-md: var(--space-3);--space-inline-lg: var(--space-5);--z-dropdown: 950;--z-panel-float: 1100;--z-toast: 1300;--z-modal: 1400}*{box-sizing:border-box;transition:background-color .15s ease,border-color .15s ease,color .15s ease}html,body{margin:0;padding:0;background-color:var(--page-bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}textarea,select,input[type=text]{width:100%;background:var(--bg);border:2px solid var(--line);color:var(--ink);border-radius:var(--radius);padding:9px 10px;font-size:calc(14px * var(--text-scale));font-weight:600;font-family:inherit;outline:none}textarea{resize:vertical;min-height:48px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}select:focus,textarea:focus,input:focus{outline:2px solid var(--accent);outline-offset:1px}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000000'><path d='M5 7l5 6 5-6z'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:30px}:root[data-theme=dark] select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'><path d='M5 7l5 6 5-6z'/></svg>")}input[type=range]{width:100%;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:26px;background:transparent;cursor:pointer;position:relative;z-index:1}input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--bg);border:2px solid var(--line);border-radius:var(--radius)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;margin-top:-5px;background:var(--accent);border:2px solid var(--line);border-radius:50%;cursor:pointer;transition:width .15s var(--bounce-ease),height .15s var(--bounce-ease),margin-top .15s var(--bounce-ease)}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{width:28px;height:28px;margin-top:-9px}input[type=range]::-moz-range-track{height:10px;background:var(--bg);border:2px solid var(--line);border-radius:var(--radius)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border:2px solid var(--line);border-radius:50%;cursor:pointer;transition:width .15s var(--bounce-ease),height .15s var(--bounce-ease)}input[type=range]:hover::-moz-range-thumb,input[type=range]:focus::-moz-range-thumb,input[type=range]:active::-moz-range-thumb{width:24px;height:24px}.btn{background:var(--bg);border:2px solid var(--line);color:var(--ink);padding:var(--space-2) var(--space-4);border-radius:var(--radius);font-size:calc(13px * var(--text-scale));font-weight:700;line-height:1;cursor:pointer;box-shadow:4px 4px 0 0 var(--shadow-color);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;transition:transform .2s var(--bounce-ease),box-shadow .2s var(--bounce-ease),background-color .15s ease,border-color .15s ease,color .15s ease}.btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--shadow-color)}.btn:active:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--shadow-color)}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:4px 4px 0 0 var(--shadow-color)}.btn.active{background:var(--accent);color:var(--accent-ink)}.btn.primary,.btn.primary:hover{background:var(--ink);color:var(--bg)}.btn.block{width:100%}.btn-row{display:flex;gap:var(--space-inline-md);flex-wrap:wrap}.btn-row-fill>*{flex:1 1 140px}.icon-btn{display:flex;align-items:center;gap:var(--space-inline-xs);padding:8px 10px;line-height:1}.icon-btn .caret{font-size:calc(9px * var(--text-scale))}.segmented{display:flex;gap:var(--space-inline-sm);flex-wrap:wrap}.segmented button{flex:1;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius);font-size:calc(12.5px * var(--text-scale));font-weight:700;padding:var(--space-2);line-height:1;cursor:pointer;box-shadow:3px 3px 0 0 var(--shadow-color);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;transition:transform .2s var(--bounce-ease),box-shadow .2s var(--bounce-ease),background-color .15s ease,border-color .15s ease,color .15s ease}.segmented button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--shadow-color)}.segmented button:active{transform:translate(1px,1px);box-shadow:1px 1px 0 0 var(--shadow-color)}.segmented button.active{background:var(--accent);color:var(--accent-ink)}.seg-square{justify-content:flex-start}.seg-square button{flex:0 0 auto;width:76px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-2)}.seg-square .seg-icon{display:flex;align-items:center;justify-content:center;width:calc(22px * var(--text-scale));height:calc(22px * var(--text-scale))}.seg-square .seg-icon svg{width:100%;height:100%}.seg-square .seg-label{font-size:calc(11px * var(--text-scale));line-height:1.2}.seg-square.vertical{flex-direction:column}.seg-square.vertical button{width:100%;height:52px}.theme-toggle{flex-shrink:0}#themeSeg button,#textSizeDropdownBtn{padding:8px 10px;font-size:calc(13px * var(--text-scale));line-height:1}.theme-toggle button:disabled{opacity:.35;cursor:not-allowed}.dropdown{position:relative}.dropdown-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:950;width:max-content;max-width:92vw;background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);box-shadow:6px 6px 0 0 var(--shadow-color);padding:14px}.dropdown-panel.open-upward{top:auto;bottom:calc(100% + 8px)}.dropdown-panel.align-left{left:0;right:auto}.menu-bar{display:flex;gap:var(--space-2)}.app-footer{display:flex;align-items:flex-end;justify-content:flex-end;gap:var(--space-inline-md);width:100%}.footer-credit{font-size:calc(11.5px * var(--text-scale));font-weight:600;color:var(--muted);text-decoration:none}.footer-credit:hover,.footer-credit:focus-visible{color:var(--ink);text-decoration:underline}.changelog-entry{padding:10px 0;border-top:1px solid var(--line)}.changelog-entry:first-child{border-top:none;padding-top:0}.changelog-entry .version-row{display:flex;align-items:baseline;gap:var(--space-2);font-weight:800;font-size:calc(12.5px * var(--text-scale))}.changelog-entry .version-date{font-weight:600;color:var(--muted);font-size:calc(11px * var(--text-scale))}.changelog-entry ul{margin:6px 0 0;padding-left:18px;font-size:calc(11.5px * var(--text-scale));color:var(--muted)}.changelog-entry li{margin-bottom:3px}.palette-list{display:flex;flex-direction:column;gap:var(--space-inline-xs);margin-top:var(--space-2);min-width:168px}.palette-option{display:flex;align-items:center;gap:var(--space-inline-sm);width:100%;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius);padding:6px 10px;font-size:calc(13px * var(--text-scale));font-weight:700;font-family:inherit;cursor:pointer;text-align:left}.palette-option.active{background:var(--accent);color:var(--accent-ink)}.palette-swatch{width:18px;height:18px;border-radius:3px;border:2px solid var(--line);flex-shrink:0}.column{border:2px solid var(--line);border-radius:var(--radius);background:var(--bg);box-shadow:6px 6px 0 0 var(--shadow-color);overflow:hidden;flex-shrink:0;transition:transform .2s var(--bounce-ease),box-shadow .2s var(--bounce-ease);backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}.column:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 var(--shadow-color)}.column:has(.column-header:active){transform:translate(1px,1px);box-shadow:3px 3px 0 0 var(--shadow-color)}.column-header{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:none;border-bottom:2px solid var(--line);padding:var(--space-4);font-size:calc(16px * var(--text-scale));font-weight:700;cursor:pointer;color:var(--ink);font-family:inherit}.column-header .chevron{transition:transform .15s ease;font-size:calc(14px * var(--text-scale))}.column.collapsed .chevron{transform:rotate(-90deg)}.column.collapsed .column-body{display:none}.column-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-section-gap);max-height:50vh;overflow-y:auto}.field-group{display:flex;flex-direction:column}.field-group>*+*{margin-top:var(--space-element-gap)}.field-group>.label+*{margin-top:var(--space-heading-to-body)}.label{font-size:calc(13px * var(--text-scale));color:var(--ink);font-weight:700}.hint{font-size:calc(11.5px * var(--text-scale));color:var(--muted);line-height:1.5}.slider-field{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.slider-field input[type=range]{width:100%}.slider-track-wrap{position:relative;width:100%}.slider-ticks{position:absolute;top:50%;left:0;right:0;height:0;transform:translateY(-50%);pointer-events:none;z-index:0}.slider-tick{position:absolute;top:50%;width:4px;height:14px;transform:translate(-50%,-50%);border-radius:2px;background:var(--accent);border:none;cursor:pointer;pointer-events:auto;padding:0}.slider-step-labels{position:relative;width:100%;height:20px;margin-top:var(--space-1)}.slider-step-label{position:absolute;top:0;transform:translate(-50%);background:none;border:none;font-family:inherit;font-size:calc(11.5px * var(--text-scale));font-weight:600;color:var(--muted);white-space:nowrap;cursor:pointer;padding:2px 3px}.slider-step-label.active{font-weight:900;font-size:calc(13px * var(--text-scale));color:var(--ink)}.slider-value-row{display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px}.slider-value-text{font-size:calc(13px * var(--text-scale));font-weight:700;color:var(--ink);cursor:pointer;padding:2px 5px;border-radius:3px;transition:font-weight .1s ease,font-size .1s ease,background-color .1s ease}.slider-value-text:hover{background:var(--accent);color:var(--accent-ink)}.slider-field.dragging .slider-value-text{font-weight:900;font-size:calc(16px * var(--text-scale))}.slider-value-edit{width:74px!important;text-align:center;padding:3px 6px!important}.slider-edit-btn{background:none;border:none;cursor:pointer;font-size:calc(13px * var(--text-scale));color:var(--muted);padding:2px 5px;line-height:1}.slider-edit-btn:hover{color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable{position:absolute;top:-100px;left:var(--space-3);z-index:2000;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius);padding:10px 16px;font-weight:700;font-size:calc(13px * var(--text-scale));text-decoration:none}.sr-only-focusable:focus{top:var(--space-3)}.toast-container{position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%);z-index:1300;display:flex;flex-direction:column-reverse;gap:var(--space-2);align-items:center;width:min(440px,92vw);pointer-events:none}.toast{pointer-events:auto;width:100%;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius);box-shadow:4px 4px 0 0 var(--shadow-color);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;font-size:calc(12.5px * var(--text-scale));font-weight:600;line-height:1.4;animation:toast-in .25s var(--bounce-ease);box-sizing:border-box}.toast.toast-warning{border-color:var(--danger);box-shadow:4px 4px 0 0 var(--danger)}@keyframes toast-in{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.toast .toast-close{flex-shrink:0;background:none;border:none;cursor:pointer;font-weight:800;color:var(--muted);padding:0 2px;font-size:calc(13px * var(--text-scale));line-height:1.4}.toast .toast-close:hover{color:var(--ink)}.toast .toast-action{flex-shrink:0;background:var(--accent);color:var(--accent-ink);border:2px solid var(--line);border-radius:var(--radius);cursor:pointer;font-weight:700;padding:3px 10px;font-size:calc(12px * var(--text-scale));line-height:1.4}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:var(--space-5);z-index:1400}.confirm-dialog{background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);box-shadow:8px 8px 0 0 var(--shadow-color);padding:var(--space-5);max-width:420px;width:100%;display:flex;flex-direction:column;gap:14px}.confirm-dialog h2{margin:0;font-size:calc(16px * var(--text-scale));font-weight:700;color:var(--ink)}.confirm-dialog p{margin:0;font-size:calc(12.5px * var(--text-scale));color:var(--muted);line-height:1.5}.confirm-dialog .btn-row{display:flex;gap:var(--space-2);flex-wrap:nowrap}.confirm-dialog .btn-row .btn{flex:1 1 0;min-width:0;white-space:normal;line-height:1.25;text-align:center;padding-left:var(--space-2);padding-right:var(--space-2)}.floating-panel{position:fixed;z-index:var(--z-panel-float);width:min(260px,88vw);background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);box-shadow:8px 8px 0 0 var(--shadow-color);display:flex;flex-direction:column;overflow:hidden}.floating-panel.dragging{box-shadow:10px 10px 0 0 var(--shadow-color);transition:none}.floating-panel-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);background:var(--bg);border:none;border-bottom:2px solid var(--line);padding:var(--space-3) var(--space-4);font-size:calc(13px * var(--text-scale));font-weight:700;color:var(--ink);cursor:move;touch-action:none;-webkit-user-select:none;user-select:none}.floating-panel-header .chevron{transition:transform .15s ease;font-size:calc(14px * var(--text-scale))}.floating-panel.collapsed .chevron{transform:rotate(-90deg)}.floating-panel.collapsed .floating-panel-body{display:none}.floating-panel-body{padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);max-height:60vh;overflow-y:auto}.layer-list{display:flex;flex-direction:column;gap:var(--space-1)}.layer-item{border:2px solid var(--line);border-radius:var(--radius);background:var(--bg)}.layer-item.indented{margin-left:var(--space-4)}.layer-item:has(.layer-row.active){background:var(--accent);color:var(--accent-ink)}.layer-item:has(.layer-row.selected):not(:has(.layer-row.active)){outline:2px solid var(--accent);outline-offset:-2px}.layer-row{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);cursor:pointer;border-top:2px solid transparent;border-bottom:2px solid transparent}.layer-row.dragging{opacity:.4}.layer-row.drop-before{border-top-color:var(--accent)}.layer-row.drop-after{border-bottom-color:var(--accent)}.layer-row.drop-into{outline:2px dashed var(--accent);outline-offset:-2px}.layer-drag-handle{flex-shrink:0;cursor:grab;opacity:.5;font-size:calc(12px * var(--text-scale));line-height:1;padding:1px}.layer-row.dragging .layer-drag-handle{cursor:grabbing}.layer-visibility-btn{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:calc(13px * var(--text-scale));color:inherit;padding:1px;line-height:1}.layer-thumb{flex-shrink:0;width:24px;height:24px;border:2px solid var(--line);border-radius:3px;background-image:linear-gradient(45deg,#808080 25%,transparent 25%),linear-gradient(-45deg,#808080 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#808080 75%),linear-gradient(-45deg,transparent 75%,#808080 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px}.layer-name{flex:1 1 auto;min-width:28px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--text-scale));font-weight:600}.layer-item.is-folder .layer-name{font-weight:800}.layer-name-edit{flex:1 1 auto;min-width:0;padding:3px 6px!important;font-size:calc(12.5px * var(--text-scale))!important}.layer-action-btn{background:none;border:none;cursor:pointer;color:inherit;opacity:.75;font-size:calc(11px * var(--text-scale));padding:2px 3px;line-height:1;flex-shrink:0}.layer-action-btn:hover,.layer-lock-btn.active{opacity:1}.layer-folder-toggle{font-size:calc(13px * var(--text-scale))}.layer-opacity-control{position:relative;display:flex;align-items:center;min-width:0;flex-shrink:1}.layer-opacity-value{width:26px;min-width:18px;padding:2px!important;font-size:calc(10px * var(--text-scale))!important;text-align:right}.layer-opacity-arrow{flex-shrink:0;background:none;border:none;cursor:pointer;color:inherit;opacity:.75;font-size:calc(9px * var(--text-scale));padding:1px;line-height:1}.layer-opacity-arrow:hover{opacity:1}.layer-opacity-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:var(--z-panel-float);width:120px;background:var(--bg);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius);box-shadow:4px 4px 0 0 var(--shadow-color);padding:var(--space-2)}.layer-opacity-input{width:100%}.layer-panel-actions{display:flex;gap:var(--space-2);justify-content:center}.layer-panel-actions .icon-btn{flex:1 1 auto}:root{--ink: #000000;--page-bg: #f3ede1;--bg: rgba(243,237,225,.94);--bg-dot: rgba(0,0,0,.1);--shadow-color: rgb(44 44 44 / .29);--accent: #ffb200;--accent-ink: #000000;--danger: #e0393c;--muted: #555555;--line: #000000;--section-project: rgb(127 214 217 / .23);--section-create: rgb(181 211 175 / .24);--section-configure: rgb(179 163 227 / .22);--section-export: rgb(230 150 130 / .24);--section-canvas: rgb(230 178 90 / .2)}:root[data-theme=dark]{--ink: #f2f2f2;--page-bg: #121212;--bg: rgba(18,18,18,.94);--bg-dot: rgba(255,255,255,.09);--muted: #a8a8a8;--line: #f2f2f2}:root[data-palette=brutalist]{--ink: #000000;--page-bg: #ffffff;--bg: #ffffff;--bg-dot: rgba(0,0,0,.15);--muted: #444444;--line: #000000;--shadow-color: #000000;--accent: #0091ff;--accent-ink: #000000;--danger: #ff0000;--section-project: #ffe600;--section-create: #00e676;--section-configure: #ff2079;--section-export: #00c2ff;--section-canvas: #ff6a00}:root[data-palette=phosphor]{--ink: #c8ffd4;--page-bg: #05140a;--bg: rgba(8,26,15,.92);--bg-dot: rgba(51,255,102,.08);--muted: #6b9a78;--line: #2ecc59;--shadow-color: rgba(51,255,102,.25);--accent: #33ff66;--accent-ink: #05140a;--danger: #ff5555;--section-project: rgba(51,255,102,.12);--section-create: rgba(51,255,102,.16);--section-configure: rgba(51,255,102,.2);--section-export: rgba(51,255,102,.24);--section-canvas: rgba(51,255,102,.28)}:root[data-palette=crt-amber]{--ink: #ffe0b3;--page-bg: #150c02;--bg: rgba(31,19,6,.92);--bg-dot: rgba(255,176,0,.09);--muted: #b08968;--line: #ffb000;--shadow-color: rgba(255,176,0,.25);--accent: #ffb000;--accent-ink: #150c02;--danger: #ff5b3d;--section-project: rgba(255,176,0,.12);--section-create: rgba(255,176,0,.16);--section-configure: rgba(255,176,0,.2);--section-export: rgba(255,176,0,.24);--section-canvas: rgba(255,176,0,.28)}:root[data-palette=synthwave]{--ink: #f4eaff;--page-bg: #170826;--bg: rgba(35,14,54,.92);--bg-dot: rgba(255,113,206,.08);--muted: #a08cc0;--line: #9b7bc4;--shadow-color: rgba(5,217,232,.25);--accent: #ff71ce;--accent-ink: #170826;--danger: #ff3864;--section-project: rgba(5,217,232,.18);--section-create: rgba(255,113,206,.16);--section-configure: rgba(155,123,196,.2);--section-export: rgba(255,159,28,.18);--section-canvas: rgba(5,217,232,.24)}:root[data-palette=vhs]{--ink: #2b1f1a;--page-bg: #f2e8dd;--bg: rgba(250,242,236,.94);--bg-dot: rgba(224,96,44,.18);--muted: #8a7368;--line: #3a2a22;--shadow-color: rgb(90 55 40 / .42);--accent: #00d9a3;--accent-ink: #021a13;--danger: #ff3d0a;--section-project: rgba(0,217,163,.34);--section-create: rgba(255,79,58,.36);--section-configure: rgba(255,187,0,.36);--section-export: rgba(212,101,42,.4);--section-canvas: rgba(255,84,0,.38)}html,body{background-image:radial-gradient(var(--bg-dot) 1.4px,transparent 1.4px);background-size:16px 16px}.topbar{display:flex;align-items:center;gap:var(--space-inline-md);padding:var(--space-4) var(--space-6);border-bottom:2px solid var(--line)}.brand-logo-wrap{display:block;flex-shrink:0;height:34px;width:var(--logo-collapsed-w, 34px);overflow:hidden;transition:width .35s var(--bounce-ease)}.brand-logo-wrap:hover{width:var(--logo-expanded-w, 210px)}.brand-logo-wrap canvas{display:block}.preview-badge{font-size:calc(10px * var(--text-scale));letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--ink);background:none;border:2px solid var(--ink);border-radius:999px;padding:2px 8px;margin-left:var(--space-inline-sm);font-family:inherit;cursor:default;display:inline-flex;align-items:center;justify-content:center;line-height:1}#tierBadge:not(:disabled){cursor:pointer}#tierBadge:not(:disabled):hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.beta-badge{border-color:var(--danger);color:var(--danger);white-space:nowrap}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-inline-md)}.text-size-stepper{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}.text-size-stepper .segmented{flex-wrap:nowrap}.text-size-stepper .icon-btn{padding:var(--space-2) var(--space-3);font-weight:800}.palette-swatch-default{background:linear-gradient(135deg,#f3ede1 50%,#ffb200 50%)}.palette-swatch-brutalist{background:linear-gradient(135deg,#fff 50%,#0091ff 50%)}.palette-swatch-phosphor{background:linear-gradient(135deg,#05140a 50%,#3f6 50%)}.palette-swatch-crt-amber{background:linear-gradient(135deg,#150c02 50%,#ffb000 50%)}.palette-swatch-synthwave{background:linear-gradient(135deg,#170826 50%,#ff71ce 50%)}.palette-swatch-vhs{background:linear-gradient(135deg,#f2e8dd 50%,#00d9a3 50%)}.canvas-frame{border:2px solid var(--line);border-radius:var(--radius);box-shadow:6px 6px 0 0 var(--shadow-color);background:var(--bg);display:flex;flex-direction:column;width:100%;height:min(76vh,720px);min-height:320px;box-sizing:border-box;overflow:hidden;container-type:inline-size;container-name:canvas-frame}.canvas-frame-header{flex-shrink:0;width:100%;display:flex;align-items:center;padding:var(--space-4);font-size:calc(16px * var(--text-scale));font-weight:700;color:var(--ink);background:var(--section-canvas);border-bottom:2px solid var(--line)}.canvas-frame-body{flex:1;min-height:0;padding:var(--space-5);display:flex;align-items:center;justify-content:center;box-sizing:border-box;position:relative}@media(max-width:860px){.canvas-frame{height:min(52vh,440px)}}#display{display:block;touch-action:none;cursor:crosshair;max-width:100%;max-height:100%;transition:width .32s var(--bounce-ease),height .32s var(--bounce-ease)}#brushPreview{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.canvas-notice{position:absolute;left:var(--space-4);right:var(--space-4);top:var(--space-4);padding:var(--space-2) calc(var(--space-3) + 22px) var(--space-2) var(--space-3);background:var(--bg);color:var(--ink);border:2px solid var(--danger);border-radius:var(--radius);box-shadow:3px 3px 0 0 var(--danger);font-size:calc(12px * var(--text-scale));font-weight:600;line-height:1.35;text-align:center;pointer-events:none;z-index:2;display:none}.canvas-notice.is-visible{display:block}.canvas-notice-dismiss{position:absolute;top:50%;right:var(--space-2);transform:translateY(-50%);width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--danger);font-size:16px;line-height:1;font-weight:700;cursor:pointer;pointer-events:auto;border-radius:var(--radius)}.canvas-notice-dismiss:hover{background:var(--danger);color:var(--bg)}.canvas-snapshot-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;transition:opacity .35s ease}.workspace{display:flex;align-items:flex-start;gap:var(--space-5);padding:var(--space-5)}.tools-pane{flex:0 0 30%;min-width:300px;display:flex;flex-direction:column;gap:var(--space-column-gap)}.preview-pane{flex:1 1 70%;min-width:0;position:sticky;top:var(--space-5);display:flex;flex-direction:column;align-items:center;gap:var(--space-element-gap)}@media(max-width:860px){.workspace{flex-direction:column;padding:var(--space-4)}.tools-pane{flex-basis:auto;min-width:0;width:100%;order:1}.preview-pane{position:static;width:100%;order:0}}.canvas-stats{width:100%;align-self:flex-start;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:calc(11px * var(--text-scale));color:var(--muted);font-weight:600}.canvas-frame-footer{flex-shrink:0;width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-top:2px solid var(--line);background:var(--bg);box-sizing:border-box}.canvas-footer-divider{align-self:stretch;width:2px;background:var(--line);flex-shrink:0}.canvas-frame-footer #clearBtn{flex:2 1 0;min-width:140px;padding-top:var(--space-3);padding-bottom:var(--space-3);font-size:calc(14px * var(--text-scale))}.viewport-zoom-row{flex:8 1 0;min-width:260px;display:flex;align-items:center;gap:var(--space-3)}.undo-redo-group{display:flex;gap:var(--space-2);flex-shrink:0}.viewport-zoom-row .slider-field{flex:1;min-width:0}.zoom-value-fit{position:relative;width:118px;height:33px;flex-shrink:0}.zoom-value-fit .slider-value-row{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:left .18s ease,transform .18s ease;min-height:0}.zoom-value-fit.zoomed .slider-value-row{left:0;transform:translateY(-50%)}.zoom-value-fit .slider-value-text{display:inline-block;width:56px;text-align:center}.zoom-value-fit #viewFitBtn{position:absolute;top:50%;right:0;width:50px;transform:translate(8px,-50%);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.zoom-value-fit.zoomed #viewFitBtn{opacity:1;pointer-events:auto;transform:translateY(-50%)}#viewZoomValueEdit{width:56px!important;padding:3px 4px!important}@container canvas-frame (max-width: 540px){.canvas-frame-footer{flex-direction:column;align-items:stretch}.canvas-footer-divider{width:100%;height:2px;align-self:stretch}.canvas-frame-footer #clearBtn,.viewport-zoom-row{flex:none;width:100%;min-width:0}.undo-redo-group{justify-content:center}}.viewport-minimap-wrap{position:absolute;right:14px;bottom:14px;z-index:20;background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);box-shadow:4px 4px 0 0 var(--shadow-color);overflow:hidden}.minimap-header{padding:5px 10px;font-size:calc(12.5px * var(--text-scale));font-weight:700;color:var(--ink);background:var(--bg);border-bottom:2px solid var(--line)}#viewportMinimap{display:block;cursor:grab;touch-action:none;background:var(--bg)}#viewportMinimap:active{cursor:grabbing}.kofi-tip-btn{display:flex;align-items:center}.kofi-tip-btn a.kofi-button{height:calc(13px * var(--text-scale) + 20px)!important;line-height:calc(13px * var(--text-scale) + 20px)!important;padding-top:0!important;padding-bottom:0!important}.crop-preview-wrap{border:2px solid var(--line);border-radius:var(--radius);background:var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center}#imageCropPreview{display:block;touch-action:none;cursor:grab}#imageCropPreview:active{cursor:grabbing}#cropPopoverCatcher{position:fixed;top:0;right:0;bottom:0;left:0;z-index:899}.crop-popover{position:fixed;z-index:900;width:min(320px,calc(100vw - 32px));background:var(--bg);border:2px solid var(--line);border-radius:var(--radius);box-shadow:6px 6px 0 0 var(--shadow-color);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-inline-md)}.crop-popover-header{display:flex;align-items:center;justify-content:space-between;font-size:calc(14px * var(--text-scale));font-weight:700}.crop-popover-header .btn{padding:3px 9px;font-size:calc(12px * var(--text-scale));box-shadow:2px 2px 0 0 var(--shadow-color)}#col-project .column-header{background:var(--section-project)}#col-create .column-header{background:var(--section-create)}#col-configure .column-header{background:var(--section-configure)}#col-export .column-header{background:var(--section-export)}#textSizeField{container-type:inline-size;container-name:text-size-field}#scalePresetRow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-inline-sm)}@container text-size-field (max-width: 280px){#scalePresetRow{grid-template-columns:repeat(3,1fr)}}@container text-size-field (max-width: 180px){#scalePresetRow{grid-template-columns:repeat(2,1fr)}}.colors-row{display:flex;gap:var(--space-inline-md)}.color-field{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}.color-field input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:42px;height:42px;border:2px solid var(--line);border-radius:50%;padding:0;background:none;cursor:pointer}.color-field input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}.color-field input[type=color]::-webkit-color-swatch{border:2px solid var(--line);border-radius:50%}.color-field label{font-size:calc(12px * var(--text-scale));color:var(--ink);font-weight:700;cursor:pointer}.check-row{display:flex;align-items:center;gap:var(--space-2);font-size:calc(12.5px * var(--text-scale));font-weight:600;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none}.check-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}#imageImportControls>*+*{margin-top:var(--space-element-gap)}hr.div{border:none;border-top:1px solid #ddd;margin:0}.license-dialog{position:relative}.dialog-close-btn{position:absolute;top:var(--space-3);right:var(--space-3);background:none;border:none;color:var(--muted);font-weight:800;font-size:calc(15px * var(--text-scale));line-height:1;cursor:pointer;padding:6px}.dialog-close-btn:hover{color:var(--ink)}#licenseTitle,#licenseMessage{text-align:center}.license-key-row{display:flex;gap:var(--space-inline-md)}.license-key-row input{flex:1;min-width:0}.license-key-row .btn{flex-shrink:0}.btn.cta-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:800;animation:cta-glow-pulse 2.4s ease-in-out infinite}.btn.cta-primary:hover{background:var(--accent);color:var(--accent-ink)}@keyframes cta-glow-pulse{0%,to{box-shadow:4px 4px 0 0 var(--shadow-color),0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{box-shadow:4px 4px 0 0 var(--shadow-color),0 0 16px 5px color-mix(in srgb,var(--accent) 45%,transparent)}}@media(prefers-reduced-motion:reduce){.btn.cta-primary{animation:none}}.btn.showcase-link{background:var(--bg);border-color:var(--accent);color:var(--accent)}.btn.showcase-link:hover{background:var(--accent);color:var(--accent-ink)}.showcase-dialog{position:relative;align-items:center;text-align:center;max-width:640px;max-height:calc(100vh - var(--space-5) * 2);max-height:calc(100dvh - var(--space-5) * 2);overflow-y:auto}.showcase-dialog #showcaseTitle{text-align:center;font-size:calc(19px * var(--text-scale));height:calc(24px * var(--text-scale));overflow:hidden}.showcase-image-frame{width:100%;aspect-ratio:16 / 9;flex-shrink:0;overflow:hidden;border:2px solid var(--accent);border-radius:var(--radius)}.showcase-image{width:100%;height:100%;object-fit:cover}.showcase-dialog #showcaseDescription{text-align:center;height:calc(54px * var(--text-scale));overflow-y:auto}.showcase-dots{display:flex;justify-content:center;gap:var(--space-2)}.showcase-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:2px solid var(--line);background:var(--bg);cursor:pointer;flex-shrink:0}.showcase-dots button.active{background:var(--accent);border-color:var(--accent)}.showcase-nav-row{display:flex;align-items:stretch;gap:var(--space-inline-md);width:100%}.showcase-nav-row #showcasePrevBtn,.showcase-nav-row #showcaseNextBtn{flex-shrink:0}.showcase-nav-row #showcasePurchaseBtn{flex:1}.mobile-banner,.mobile-shell{display:none}html.is-mobile body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}html.is-mobile .workspace{display:none}html.is-mobile .mobile-banner{display:block;background:var(--ink);color:var(--bg);font-size:calc(12px * var(--text-scale));font-weight:700;text-align:center;line-height:1.4;padding:var(--space-3) var(--space-4)}html.is-mobile .mobile-shell{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}html.is-mobile #mobileCanvasSlot{position:sticky;top:0;z-index:500;background:var(--page-bg);border-bottom:2px solid var(--line);padding:var(--space-3);flex-shrink:0}html.is-mobile #mobileCanvasSlot .canvas-frame{height:min(40vh,360px);width:100%;box-shadow:none}html.is-mobile .canvas-frame-footer{display:none}html.is-mobile .mobile-panel{display:flex;flex-direction:column;gap:var(--space-section-gap);padding:var(--space-4)}html.is-mobile .mobile-swatch-row{display:flex;flex-wrap:wrap;gap:var(--space-inline-sm)}html.is-mobile .mobile-swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;position:relative;flex-shrink:0}html.is-mobile .mobile-swatch.active{box-shadow:0 0 0 3px var(--accent)}html.is-mobile .mobile-swatch.active:after{content:"✓";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--bg);mix-blend-mode:difference;font-weight:800}@media(orientation:landscape){html.is-mobile .mobile-shell{flex-direction:row;align-items:flex-start;gap:var(--space-5);padding:var(--space-4)}html.is-mobile #mobileCanvasSlot{position:sticky;top:var(--space-4);order:2;flex:1 1 70%;min-width:0;border-bottom:none;display:flex;align-items:center;justify-content:center}html.is-mobile #mobileCanvasSlot .canvas-frame{height:min(76vh,720px);min-height:260px;width:100%}html.is-mobile .mobile-panel{order:1;flex:0 0 30%;min-width:220px;max-width:320px}}html.is-mobile #textSizeDropdown,html.is-mobile #unlockPremiumBtn,html.is-mobile #tierBadge,html.is-mobile #betaBadge{display:none}html.is-mobile .theme-toggle button span:not([aria-hidden]){display:none}html.is-mobile .theme-toggle button{padding:var(--space-2)}.brand-title-mobile,.brand-logo-mobile,html.is-mobile .brand-logo-wrap{display:none}html.is-mobile .brand-logo-mobile{display:inline-block;flex-shrink:0;width:22px;height:22px}html.is-mobile .brand-logo-mobile canvas{display:block}html.is-mobile .brand-title-mobile{display:inline-block;font-size:calc(22px * var(--text-scale));letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink)}html.is-mobile #premiumShowcaseOverlay{padding:var(--space-3)}html.is-mobile .showcase-dialog{width:100%;max-height:calc(100vh - var(--space-3) * 2);max-height:calc(100dvh - var(--space-3) * 2)}html.is-mobile .showcase-dialog #showcaseTitle{height:calc(48px * var(--text-scale));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}html.is-mobile .showcase-nav-row{flex-wrap:wrap}html.is-mobile .showcase-nav-row #showcasePurchaseBtn{order:-1;flex:1 1 100%}html.is-mobile .showcase-nav-row #showcasePrevBtn,html.is-mobile .showcase-nav-row #showcaseNextBtn{flex:1 1 0}html.is-mobile .showcase-dots button{width:14px;height:14px}
