@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#1a1a2e;--bg-input:#0f0f1a;--border:#2a2a3e;--border-glow:#00e5ff26;--text-primary:#e8e8f0;--text-secondary:#88a;--text-muted:#555570;--accent:#00e5ff;--accent-dim:#00e5ff1f;--pink:#ff4081;--pink-dim:#ff40811f;--yellow:#ffea00;--green:#4caf50;--danger:#ef5350;--radius:10px;--radius-sm:6px;--shadow:0 4px 24px #0006;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,-apple-system,sans-serif;overflow-x:hidden}#root{min-height:100vh}.app-layout{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);align-items:baseline;gap:1.2rem;padding:1.2rem 2rem;display:flex}.app-header h1{background:linear-gradient(135deg, var(--accent), var(--pink));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.app-header .subtitle{color:var(--text-muted);font-size:.85rem;font-weight:400}.app-main{flex:1;gap:0;display:flex}.canvas-wrapper{background:radial-gradient(ellipse at center, #111118 0%, var(--bg-primary) 70%);flex:1;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative}.drawing-canvas{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow), 0 0 40px #00e5ff0a;cursor:crosshair;max-width:100%;height:auto}.canvas-hint{color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border);pointer-events:none;border-radius:20px;padding:.4rem 1rem;font-size:.8rem;animation:2s ease-in-out infinite pulse;position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%)}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.error-bar{color:var(--danger);border-radius:var(--radius-sm);background:#ef535026;border:1px solid #ef53504d;max-width:90%;padding:.5rem 1.2rem;font-family:JetBrains Mono,monospace;font-size:.8rem;position:absolute;top:1rem;left:50%;transform:translate(-50%)}.control-panel{background:var(--bg-secondary);border-left:1px solid var(--border);flex-direction:column;gap:.8rem;width:300px;min-width:300px;max-height:calc(100vh - 60px);padding:1.2rem;display:flex;overflow-y:auto}.control-panel h2{color:var(--text-secondary);margin-bottom:.2rem;font-size:1rem;font-weight:600}.control-panel fieldset{border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.6rem;padding:.8rem;display:flex}.control-panel legend{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:0 .4rem;font-size:.7rem;font-weight:600}.control-panel label{color:var(--text-secondary);flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.78rem;display:flex}.control-panel label .val{color:var(--accent);text-align:right;min-width:3rem;margin-left:auto;font-family:JetBrains Mono,monospace;font-size:.72rem}input[type=range]{appearance:none;background:var(--border);border-radius:2px;outline:none;flex:1;min-width:60px;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg-secondary);width:14px;height:14px;transition:transform var(--transition);border-radius:50%;box-shadow:0 0 6px #00e5ff4d}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.shape-buttons{gap:.4rem;display:flex}.shape-buttons button{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);flex:1;padding:.4rem;font-family:Inter,sans-serif;font-size:.75rem;font-weight:500}.shape-buttons button:hover{border-color:var(--accent);color:var(--text-primary)}.shape-buttons button.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.actions{flex-direction:column;gap:.5rem;margin-top:.4rem;display:flex}.actions button{border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:all var(--transition);letter-spacing:.02em;border:none;padding:.65rem;font-family:Inter,sans-serif;font-size:.82rem;font-weight:600}.actions button:disabled{opacity:.4;cursor:not-allowed}.btn-primary{color:#90caf9;background:linear-gradient(135deg,#1a237e,#283593);border:1px solid #90caf933!important}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#283593,#3949ab);box-shadow:0 2px 12px #90caf926}.btn-accent{color:var(--accent);background:linear-gradient(135deg,#004d40,#00695c);border:1px solid #00e5ff33!important}.btn-accent:hover:not(:disabled){background:linear-gradient(135deg,#00695c,#00897b);box-shadow:0 2px 12px #00e5ff26}.btn-danger{color:#ef9a9a;background:linear-gradient(135deg,#b71c1c,#c62828);border:1px solid #ef9a9a33!important}.btn-danger:hover{box-shadow:0 2px 12px #ef535033}.btn-muted{background:var(--bg-input);color:var(--text-muted);border:1px solid var(--border)!important}.btn-muted:hover:not(:disabled){color:var(--text-secondary);border-color:var(--text-muted)!important}.frame-info{text-align:center;color:var(--accent);background:var(--accent-dim);border-radius:var(--radius-sm);margin-top:.3rem;padding:.4rem;font-family:JetBrains Mono,monospace;font-size:.72rem}.control-panel::-webkit-scrollbar{width:5px}.control-panel::-webkit-scrollbar-track{background:0 0}.control-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.help-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.help-modal-content{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;width:500px;max-width:90vw;max-height:80vh;display:flex}.help-modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.help-modal-header h2{color:var(--text-primary);margin:0;font-size:1.1rem}.close-btn{color:var(--text-muted);cursor:pointer;transition:color var(--transition);background:0 0;border:none;font-size:1.2rem}.close-btn:hover{color:var(--text-primary)}.help-modal-body{color:var(--text-secondary);flex-direction:column;gap:1rem;padding:1.5rem;font-size:.85rem;line-height:1.5;display:flex;overflow-y:auto}.help-item{background:#ffffff08;border:1px solid #ffffff0d;border-radius:6px;flex-direction:column;padding:.8rem 1rem;display:flex}.help-label{color:var(--accent);justify-content:space-between;align-items:center;margin-bottom:.2rem;font-size:.95rem;font-weight:600;display:flex}.range-hint{color:var(--text-muted);background:#0003;border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.75rem;font-weight:400}.help-desc{color:var(--text-secondary);line-height:1.4}