:root{--primary:#7c3aed;--secondary:#06b6d4;--accent:#fbbf24;--bg:#f9fafb;--card:#ffffff;--text:#1f2937;--muted:#6b7280;--border:#e5e7eb;--success:#10b981}body.dark-mode{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--border:#334155}*{box-sizing:border-box;font-family:Inter,Segoe UI,system-ui,Helvetica,Arial,sans-serif}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}header{transition:background .3s ease,box-shadow .3s ease}body{margin:0;background:var(--bg);color:var(--text)}header{padding:24px;background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:#fff;border-bottom:none;box-shadow:0 4px 20px #7c3aed26}header h1{margin:0 0 6px;font-size:49px;font-weight:700;letter-spacing:-.5px}header p{margin:0;font-size:24px;opacity:.95}.logo-text{display:inline-block;font-size:15px;opacity:.8;margin-top:6px;letter-spacing:1px}main{display:flex;gap:24px;padding:24px;align-items:flex-start}.controls{width:320px;background:var(--card);padding:25px;border-radius:12px;box-shadow:0 2px 12px #00000014;border:1px solid var(--border)}.controls label{display:block;margin-bottom:12px;font-size:16px;color:var(--text);font-weight:500}.controls input[type=file]{display:block;margin-top:6px}.controls input[type=text],.controls input[type=number],.controls select{width:100%;padding:10px;margin-top:6px;border:1px solid var(--border);border-radius:8px;font-size:16px;transition:border-color .2s}.controls input[type=text]:focus,.controls input[type=number]:focus,.controls select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed1a}.controls input[type=range]{width:100%;cursor:pointer}.buttons{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%}.buttons button{padding:11px 12px;border-radius:8px;border:0;background:var(--primary);color:#fff;cursor:pointer;font-weight:600;font-size:15px;transition:all .2s}.buttons button:hover:not(:disabled){background:linear-gradient(135deg,var(--primary) 0%,#6d28d9 100%);transform:translateY(-2px);box-shadow:0 4px 12px #7c3aed4d}.buttons button:nth-child(2){background:var(--secondary)}.buttons button:nth-child(2):hover:not(:disabled){background:#0891b2;transform:translateY(-2px);box-shadow:0 4px 12px #06b6d44d}.buttons button:nth-child(3){background:var(--secondary)}.buttons button:nth-child(3):hover:not(:disabled){background:#0891b2;transform:translateY(-2px)}.preview{flex:1;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;padding-right:8px}.canvas-wrap{background:var(--card);padding:20px;border-radius:12px;display:flex;justify-content:center;align-items:center;min-height:525px;border:1px solid var(--border)}#preview{max-width:100%;height:auto;border-radius:8px}.note{font-size:15px;color:var(--muted)}footer{padding:16px 24px;color:var(--muted);font-size:16px;background:var(--card);border-top:1px solid var(--border);text-align:center}fieldset{border:1px solid var(--border);border-radius:8px}legend{color:var(--primary);font-weight:600}.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.preset-title{width:100%;font-size:15px;color:var(--muted);margin-bottom:8px;font-weight:600}.preset{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:15px;transition:all .2s}.preset:hover{border-color:var(--primary);background:#7c3aed0d}.progress-wrap{margin-top:12px}.progress-bar{height:12px;background:#e5e7eb;border-radius:999px;overflow:hidden}#progressFill{height:100%;width:0;background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 100%);transition:width .3s;box-shadow:0 0 8px #7c3aed66}.controls.disabled{opacity:.6;pointer-events:none}.buttons button:disabled{opacity:.5;cursor:not-allowed}#undo,#redo{font-size:18px;font-weight:900;line-height:1;text-shadow:0 0 1px currentColor}#undo:disabled,#redo:disabled{opacity:.4;cursor:not-allowed}.dark-mode-toggle{position:fixed;top:16px;right:16px;background:#fff;border:2px solid var(--primary);color:var(--primary);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;transition:all .3s;padding:0;z-index:1000;box-shadow:0 4px 12px #00000026}.dark-mode-toggle:hover{background:#ffffff4d;transform:scale(1.05)}.discord-button{position:fixed;top:16px;left:16px;background:#5865f2;border:2px solid #5865F2;color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:24px;display:flex;align-items:center;justify-content:center;transition:all .3s;padding:0;z-index:1000;box-shadow:0 4px 12px #5865f24d;text-decoration:none}.discord-button:hover{background:#4752c4;transform:scale(1.05);box-shadow:0 6px 16px #5865f280}body.dark-mode header{background:linear-gradient(135deg,#1e293b,#0f172a);box-shadow:0 4px 20px #00000080}body.dark-mode .dark-mode-toggle{background:#1e293b;border-color:var(--secondary);color:var(--secondary)}body.dark-mode .discord-button{background:#5865f2;border-color:#5865f2;box-shadow:0 4px 12px #5865f266}#instructionsBtn:hover{background:linear-gradient(135deg,#6d28d9,#0891b2);transform:translateY(-2px);box-shadow:0 4px 12px #7c3aed4d}#donateBtn:hover{background:linear-gradient(135deg,#d97706,#ea580c);transform:translateY(-2px);box-shadow:0 4px 12px #fbbf244d}.thumbnail-item{display:flex;align-items:center;gap:8px;padding:6px;border:2px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s;background:var(--card);position:relative}.thumbnail-item:hover{border-color:var(--primary);background:#7c3aed0d}.thumbnail-item.active{border-color:var(--primary);background:#7c3aed26;box-shadow:0 0 8px #7c3aed4d}.thumbnail-img{width:50px;height:50px;object-fit:cover;border-radius:4px;background:#f0f0f0}.thumbnail-name{flex:1;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}#renderingEngineSwitch{user-select:none}#canvasLabel,#opencvLabel{border-radius:18px;transition:all .3s ease}#canvasLabel:hover,#opencvLabel:hover{text-shadow:0 0 2px rgba(0,0,0,.2)}.thumbnail-delete{width:28px;height:28px;border-radius:50%;background:#ef4444;color:#fff;border:none;cursor:pointer;font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s;flex-shrink:0}.thumbnail-delete:hover{background:#dc2626;transform:scale(1.1)}.thumbnail-delete:active{transform:scale(.95)}@media(max-width:900px){main{flex-direction:column;padding:12px}.controls{width:100%}}@media(max-width:900px)and (orientation:portrait){main{flex-direction:column;padding:0;gap:0}.preview{position:sticky;top:0;width:100%;height:50vh;max-height:50vh;overflow-y:auto;padding:12px;background:var(--bg);border-bottom:1px solid var(--border);z-index:50;order:-1;flex:none}.canvas-wrap{min-height:auto;padding:12px}.controls{width:calc(100% - 24px);margin-left:12px;margin-right:12px;margin-top:0}}.engine-btn{background:var(--bg);color:var(--muted)}.engine-btn.active{background:var(--primary);color:#fff}.engine-btn:hover:not(.active){background:var(--border)}.medium-btn{padding:6px 10px;font-size:12px;font-weight:500;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}.medium-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.medium-btn:hover:not(.active){background:var(--border)}