:root{--bg-color: #0f172a;--card-bg: #1e293b;--accent-color: #38bdf8;--text-color: #f1f5f9;--text-muted: #94a3b8;--border-color: #334155}*{box-sizing:border-box}body{margin:0;padding:20px;background:var(--bg-color);color:var(--text-color);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center}.container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:24px}header{text-align:center}h1{font-size:2.5rem;font-weight:800;margin:0 0 8px;display:flex;align-items:center;justify-content:center;gap:16px;letter-spacing:-.025em}.logo-icon{width:48px;height:48px}.subtitle{color:var(--text-muted);font-size:1.1rem;margin:0}.upload-area{background:var(--card-bg);border:2px dashed var(--border-color);border-radius:16px;padding:60px 40px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:20px}.upload-area.dragover{border-color:var(--accent-color);background:#38bdf80d;transform:translateY(-2px)}.upload-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.upload-icon{font-size:48px;background:#38bdf81a;width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:50%;margin-bottom:8px}.upload-text{font-size:1.2rem;font-weight:600}.upload-hint{color:var(--text-muted);font-size:.9rem}#canvas{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 20px 25px -5px #0000004d,0 10px 10px -5px #0003;background:#000}.controls{background:var(--card-bg);border-radius:16px;padding:24px;border:1px solid var(--border-color);display:flex;flex-direction:column;gap:20px}.control-group{display:flex;flex-direction:column;gap:8px}.control-header{display:flex;justify-content:space-between;align-items:center}label{font-weight:500;font-size:.95rem;color:var(--text-color)}input[type=range]{width:100%;height:6px;background:var(--border-color);border-radius:3px;appearance:none;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.value-display{font-family:monospace;font-weight:600;color:var(--accent-color);background:#38bdf81a;padding:2px 8px;border-radius:4px;font-size:.9rem}#status{width:100%;padding:12px 20px;border-radius:12px;font-size:.95rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .3s}.status-loading{background:#f59e0b1a;color:#fbbf24;border:1px solid rgba(245,158,11,.2)}.status-ready{background:#10b9811a;color:#34d399;border:1px solid rgba(16,185,129,.2)}.status-error{background:#ef44441a;color:#f87171;border:1px solid rgba(239,68,68,.2)}.hidden{display:none!important}.actions{display:flex;justify-content:center;margin-top:8px}.btn{background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color);padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.btn:hover{background:var(--border-color);border-color:var(--text-muted)}.btn-primary{background:var(--accent-color);color:var(--bg-color);border:none}.btn-primary:hover{background:#7dd3fc;transform:translateY(-1px)}#info{text-align:center;color:var(--text-muted);font-size:.8rem;font-family:monospace}.debug-toggle{font-size:.8rem;color:var(--text-muted);cursor:pointer;text-align:center;margin-top:20px;opacity:.5;transition:opacity .2s}.debug-toggle:hover{opacity:1}#debugSection{display:none;margin-top:16px;padding:16px;background:#0003;border-radius:8px;font-size:.9rem}#debugSection.visible{display:block}.spinner{width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:640px){body{padding:16px}h1{font-size:2rem}.upload-area{padding:40px 20px}}