:root{--bg:#fff;--panel:#fafafa;--panel-2:#f4f4f5;--border:#e4e4e7;--border-strong:#d4d4d8;--text:#3f3f46;--text-h:#18181b;--muted:#71717a;--serif:"Newsreader", Georgia, serif;--sans:"Inter", system-ui, sans-serif;--mono:ui-monospace, "SF Mono", Consolas, monospace;font:14px/1.55 var(--sans);color:var(--text);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}*{box-sizing:border-box}body{min-height:100vh;margin:0}main{max-width:1080px;margin:0 auto;padding:40px 28px 80px}header{margin-bottom:28px}header h1{font-family:var(--serif);color:var(--text-h);letter-spacing:-.01em;margin:0 0 4px;font-size:32px;font-weight:500}header p{font-family:var(--serif);color:var(--muted);margin:0;font-size:16px}h2{font-family:var(--serif);color:var(--text-h);margin:0;font-size:17px;font-weight:500}.layout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:24px;display:grid}@media (width<=820px){.layout{grid-template-columns:1fr}}.left,.right{flex-direction:column;gap:16px;display:flex}.dropzone{border:1px dashed var(--border-strong);background:var(--panel);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;min-height:200px;padding:12px;transition:border-color .12s,background .12s;display:flex}.dropzone:hover,.dropzone.dragging{border-color:var(--text-h);background:var(--panel-2)}.dropzone.has-image{min-height:0}.dropzone-hint{color:var(--muted);flex-direction:column;align-items:center;gap:4px;padding:28px 0;font-size:13px;display:flex}.dropzone-hint .big{font-family:var(--serif);color:var(--text-h);font-size:19px}.preview{border-radius:2px;max-width:100%;line-height:0;position:relative;overflow:hidden}.preview img{border-radius:2px;max-width:100%;max-height:380px;display:block}.grid-overlay{pointer-events:none;background-image:linear-gradient(90deg,#18181b8c 1px,#0000 1px),linear-gradient(#18181b8c 1px,#0000 1px);position:absolute;box-shadow:inset 0 0 0 1px #18181b8c,0 0 0 9999px #ffffffb3}.tiles-section{border:1px solid var(--border);background:var(--panel);border-radius:4px;flex-direction:column;gap:10px;padding:14px;display:flex}.tiles{background:var(--border-strong);border-radius:2px;gap:3px;width:100%;padding:3px;display:grid}.tile{aspect-ratio:1;background-repeat:no-repeat;width:100%;min-width:0}.controls{background:var(--panel);border:1px solid var(--border);border-radius:4px;flex-direction:column;gap:14px;padding:14px;display:flex}.field{flex-direction:column;gap:5px;display:flex}.field>span{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-size:11px;font-weight:600}input[type=text],input[type=number]{background:var(--bg);border:1px solid var(--border);color:var(--text-h);font:inherit;border-radius:3px;outline:none;padding:5px 8px;font-size:13px;transition:border-color .12s,box-shadow .12s}input[type=text]:focus,input[type=number]:focus{border-color:var(--text-h);box-shadow:0 0 0 2px #18181b14}input[type=number]{text-align:center;width:56px}.grid-inputs{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.times{color:var(--muted);font-size:12px}.presets{gap:4px;margin-left:6px;display:flex}button{font-family:var(--sans);cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text);border-radius:3px;padding:4px 9px;font-size:12px;font-weight:500;transition:border-color .12s,background .12s,color .12s}button:hover:not(:disabled){border-color:var(--border-strong);background:var(--panel-2);color:var(--text-h)}button.preset.active{border-color:var(--text-h);background:var(--text-h);color:#fff}button.export{background:var(--text-h);border-color:var(--text-h);color:#fff;padding:7px 12px;font-size:13px}button.export:hover:not(:disabled){color:#fff;background:#3f3f46;border-color:#3f3f46}button.export:disabled{opacity:.4;cursor:not-allowed}.macro{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:14px}.macro-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.macro pre{background:var(--bg);border:1px solid var(--border);font-family:var(--mono);color:var(--text-h);border-radius:3px;margin:0;padding:10px 12px;font-size:11.5px;line-height:1.6;overflow-x:auto}.warning{color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:3px;margin:10px 0 0;padding:8px 10px;font-size:12.5px}