:root{color:#20232a;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f1eb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{color:#20232a;cursor:pointer;background:#fff;border:1px solid #c9c1b4;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:40px;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}button:hover:not(:disabled){background:#f8f5ef;border-color:#9e8f7d}button:disabled{cursor:not-allowed;opacity:.52}.app-shell{min-height:100vh;padding:18px}.topbar{justify-content:space-between;align-items:center;gap:18px;max-width:1680px;margin:0 auto 18px;display:flex}.topbar h1{margin:0;font-size:clamp(28px,4vw,46px);line-height:1.02}.eyebrow{color:#8b3f31;letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:12px;font-weight:800}.primary-button{color:#fffaf3;background:#8b3f31;border-color:#8b3f31;min-width:150px;font-weight:800}.primary-button:hover:not(:disabled){background:#753529;border-color:#753529}.workspace{grid-template-columns:minmax(280px,340px) minmax(380px,1fr) minmax(280px,340px);align-items:start;gap:16px;max-width:1680px;margin:0 auto;display:grid}.panel{flex-direction:column;gap:14px;display:flex}.panel-section{background:#fffaf3;border:1px solid #d7cec1;border-radius:8px;padding:14px;box-shadow:0 12px 36px #3f2f2014}.section-title{color:#3a2f29;align-items:center;gap:8px;margin-bottom:12px;display:flex}.section-title h2{margin:0;font-size:15px}.two-column,.three-column,.four-column{gap:10px;display:grid}.two-column{grid-template-columns:repeat(2,minmax(0,1fr))}.three-column{grid-template-columns:repeat(3,minmax(0,1fr))}.four-column{grid-template-columns:repeat(4,minmax(0,1fr))}.field,.range-field{gap:6px;margin-bottom:10px;display:grid}.field span,.range-field span{color:#66584b;font-size:12px;font-weight:800}.field input,.field select{color:#20232a;background:#fff;border:1px solid #cabfaf;border-radius:8px;width:100%;min-height:38px;padding:0 9px}.range-field span{justify-content:space-between;gap:10px;display:flex}.range-field b{color:#8b3f31}.range-field input{accent-color:#8b3f31;width:100%}.color-field input{height:38px;padding:3px}.checkbox-field{color:#66584b;align-items:center;gap:9px;margin:0 0 10px;font-size:12px;font-weight:800;display:flex}.checkbox-field input{accent-color:#8b3f31;width:16px;height:16px;margin:0}.segmented-control{background:#f2ece3;border:1px solid #d7cec1;border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;padding:4px;display:grid}.segmented-control button{background:0 0;border-color:#0000;min-height:36px}.segmented-control button.active{color:#8b3f31;background:#fff;border-color:#cabfaf;font-weight:800;box-shadow:0 4px 14px #3f2f201a}.shape-tabs{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:10px}.subsection-label{color:#66584b;text-transform:uppercase;margin:12px 0 8px;font-size:12px;font-weight:900}.section-title+.subsection-label{margin-top:0}.frame-tabs{margin-bottom:12px}.frame-gallery{gap:9px;margin-bottom:12px;display:grid}.generated-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.png-gallery{grid-template-columns:repeat(3,minmax(0,1fr));max-height:280px;padding-right:2px;overflow:auto}.frame-option{color:#66584b;text-align:center;gap:6px;min-height:auto;padding:7px;font-size:11px;font-weight:800;display:grid}.frame-option.active{color:#8b3f31;background:#f9eee4;border-color:#8b3f31;box-shadow:0 0 0 2px #8b3f311f}.frame-preview{aspect-ratio:1;background:linear-gradient(45deg,#0000000e 25%,#0000 25%) 0 0/14px 14px,linear-gradient(45deg,#0000 75%,#0000000e 75%) 0 0/14px 14px,#2a2521;border:1px solid #d7cec1;border-radius:8px;place-items:center;width:100%;display:grid;overflow:hidden}.frame-preview img{object-fit:contain;width:100%;height:100%}.frame-actions{grid-template-columns:1fr;gap:6px;margin-bottom:10px;display:grid}.random-color-button{width:100%}.stage{gap:16px;display:grid}.token-editor{background:#fffaf3;border:1px solid #d7cec1;border-radius:8px;gap:12px;padding:14px;display:grid;box-shadow:0 12px 36px #3f2f2014}.editor-header{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.editor-header h2{margin:3px 0 6px;font-size:28px}.editor-header p{color:#5d5248;margin:0}.editor-header button{min-width:96px}.editor-canvas-wrap{background:linear-gradient(45deg,#0000000e 25%,#0000 25%) 0 0/24px 24px,linear-gradient(45deg,#0000 75%,#0000000e 75%) 0 0/24px 24px,#2a2521;border:1px solid #d7cec1;border-radius:8px;place-items:center;min-height:520px;display:grid;position:relative;overflow:hidden}.editor-canvas{aspect-ratio:1;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:min(100%,680px);height:auto;display:block}.editor-canvas:active{cursor:grabbing}.editor-empty{color:#fffaf3;text-align:center;background:#241f1cc2;place-content:center;justify-items:center;gap:8px;display:grid;position:absolute;inset:0}.editor-status{flex-wrap:wrap;gap:8px;display:flex}.editor-status span{color:#66584b;background:#fff;border:1px solid #d7cec1;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:800}.atlas-preview{background:linear-gradient(45deg,#0000000b 25%,#0000 25%) 0 0/24px 24px,linear-gradient(45deg,#0000 75%,#0000000b 75%) 0 0/24px 24px,#fffaf3;border:1px solid #d7cec1;border-radius:8px;place-items:center;min-height:300px;display:grid;position:relative;overflow:hidden;box-shadow:0 12px 36px #3f2f2014}.atlas-preview img{object-fit:contain;width:100%;max-height:72vh;display:block}.grid-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.grid-overlay rect{fill:#ffffff0f;stroke:#f1c75b;stroke-width:4px;vector-effect:non-scaling-stroke}.empty-state{color:#66584b;text-align:center;justify-items:center;gap:8px;padding:28px;display:grid}.empty-state strong{color:#2f2823;font-size:20px}.muted{color:#807366;font-size:12px}.token-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:460px;padding-right:2px;display:grid;overflow:auto}.token-card{background:#fff;border:1px solid #c9c1b4;border-radius:8px;gap:7px;min-height:132px;padding:8px;display:grid;position:relative}.token-card.active{background:#f9eee4;border-color:#8b3f31;box-shadow:0 0 0 2px #8b3f311f}.token-card-pick{width:100%;min-height:auto;color:inherit;text-align:left;background:0 0;border:0;border-radius:0;gap:7px;padding:0;display:grid}.token-card-pick:hover:not(:disabled){background:0 0;border-color:#0000}.token-thumb{aspect-ratio:1;color:#fffaf3;background:linear-gradient(45deg,#0000000e 25%,#0000 25%) 0 0/16px 16px,linear-gradient(45deg,#0000 75%,#0000000e 75%) 0 0/16px 16px,#2a2521;border:1px solid #d7cec1;border-radius:8px;place-items:center;width:100%;display:grid;overflow:hidden}.token-thumb img{object-fit:contain;width:100%;height:100%}.token-card-footer{justify-content:space-between;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:800;display:flex}.token-state{color:#8c8176;font-size:12px}.token-state.selected{color:#24705b;font-weight:800}.select-toggle{background:#fff;border:1px solid #c9c1b4;border-radius:6px;place-items:center;width:24px;height:24px;min-height:24px;padding:0;display:grid;position:absolute;top:8px;right:8px}.export-panel button{width:100%;margin-bottom:8px}.export-panel .token-grid button{margin-bottom:0}.export-panel .token-card-pick{width:100%}.export-panel .select-toggle{width:24px}.hidden-input{display:none}.drop-zone{outline-offset:-2px;outline:2px solid #0000;transition:background .16s,border-color .16s,outline-color .16s,box-shadow .16s}.atlas-preview.drop-zone,.editor-canvas-wrap.drop-zone,.png-gallery.drop-zone,.frame-actions .drop-zone{cursor:pointer}.editor-canvas-wrap:has(.editor-canvas:not(:only-child)){cursor:pointer}.drop-zone.drop-active{border-color:#8b3f31;outline-color:#8b3f316b;box-shadow:0 0 0 4px #8b3f311f,0 12px 36px #3f2f201f}.upload-frame-option .frame-preview{color:#fffaf3}.editor-canvas-wrap.drop-active,.atlas-preview.drop-active{background:linear-gradient(45deg,#8b3f311f 25%,#0000 25%) 0 0/24px 24px,linear-gradient(45deg,#0000 75%,#8b3f311f 75%) 0 0/24px 24px,#fff6ec}@media (width<=1180px){.workspace{grid-template-columns:minmax(280px,340px) minmax(380px,1fr)}.export-panel{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}}@media (width<=820px){.app-shell{padding:12px}.topbar{flex-direction:column;align-items:stretch}.workspace,.export-panel{grid-template-columns:1fr}.atlas-preview{min-height:320px}.editor-header{flex-direction:column;align-items:stretch}.editor-canvas-wrap{min-height:300px}.four-column{grid-template-columns:repeat(2,minmax(0,1fr))}.three-column{grid-template-columns:repeat(1,minmax(0,1fr))}}