@keyframes spin{to{transform:rotate(360deg)}}.page{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px 60px;position:relative;overflow:hidden}.grain{position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0}.orb1{position:fixed;top:-20vh;left:-10vw;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(74,123,255,.06) 0%,transparent 70%);pointer-events:none;z-index:0}.orb2{position:fixed;bottom:-20vh;right:-10vw;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 70%);pointer-events:none;z-index:0}.container{width:100%;max-width:780px;background:var(--surface);border:1px solid var(--border);border-radius:0;position:relative;z-index:1;box-shadow:0 4px 24px #0000004d}.app-header{display:flex;align-items:center;gap:16px;padding:28px 32px}.logo-mark{font-size:32px;color:var(--text);line-height:1}.app-title{font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:.1em;color:var(--text);line-height:1}.app-subtitle{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.05em}.badge{padding:6px 12px;border:1px solid var(--border2);border-radius:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--muted);white-space:nowrap}.divider{height:1px;background:var(--border)}.form{padding:28px 32px;display:flex;flex-direction:column;gap:28px}.app-footer{padding:16px 32px;border-top:1px solid var(--border);display:flex;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--muted)}.footer-dot{color:var(--border2)}.section-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--muted)}.artist-grid-wrapper{display:flex;flex-direction:column;gap:8px}.artist-hint{font-size:11px;color:var(--muted);font-family:var(--font-mono);font-style:italic;margin-top:-4px;margin-bottom:4px}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}.chip{display:flex;align-items:center;gap:8px;padding:10px 14px;background:transparent;border:1px solid var(--border);border-radius:0;cursor:pointer;text-align:left;transition:all .15s ease;color:var(--muted);font-family:var(--font-mono)}.chip.active{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:none}.chip-check{font-size:16px;color:inherit;width:12px;flex-shrink:0}.chip-name{font-size:12px;font-weight:700;flex:1}.chip-tag{font-size:10px;color:var(--muted);letter-spacing:.05em}.bars-wrapper{display:flex;flex-direction:column;gap:8px}.bars-row{display:flex;gap:6px;flex-wrap:wrap}.bars-btn{display:flex;flex-direction:column;align-items:center;padding:12px 18px;background:transparent;border:1px solid var(--border);border-radius:0;cursor:pointer;color:var(--muted);font-family:var(--font-mono);transition:all .15s ease;min-width:72px}.bars-btn.active{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:none}.bars-num{font-size:22px;font-weight:700;line-height:1;color:inherit}.bars-sub{font-size:9px;letter-spacing:.15em;margin-top:2px}.bars-time{font-size:10px;margin-top:6px;color:var(--muted)}.options-wrapper{display:flex;flex-direction:column;gap:10px}.options-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.toggle{display:flex;align-items:center;gap:10px;padding:10px 16px;background:transparent;border:1px solid var(--border);border-radius:0;cursor:pointer;color:var(--muted);font-family:var(--font-mono);font-size:12px;transition:all .15s}.toggle.on{border-color:var(--accent);color:var(--bg);background:var(--accent)}.toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all .15s;flex-shrink:0}.toggle-dot.on{background:var(--bg);box-shadow:none}.bpm-group{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}.bpm-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--muted)}.bpm-row{display:flex;gap:10px;align-items:center}.bpm-slider{flex:1;accent-color:var(--accent);cursor:pointer}.bpm-toggle{padding:6px 12px;background:transparent;border:1px solid var(--border);border-radius:0;cursor:pointer;color:var(--muted);font-family:var(--font-mono);font-size:11px;min-width:64px;transition:all .15s;white-space:nowrap}.bpm-toggle.on{border-color:var(--accent);color:var(--bg);background:var(--accent)}.generate-wrapper{display:flex;flex-direction:column;gap:14px}.generate-btn{width:100%;padding:18px 32px;background:var(--accent);border:1px solid var(--accent);border-radius:0;color:var(--bg);font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.12em;cursor:pointer;transition:opacity .2s,transform .1s;box-shadow:none}.generate-btn.loading{opacity:.7;cursor:not-allowed}.generate-btn-inner{display:flex;align-items:center;justify-content:center;gap:8px}.spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.generate-error{padding:12px 16px;background:transparent;border:1px solid var(--border2);border-radius:0;color:var(--error);font-family:var(--font-mono);font-size:12px;display:flex;align-items:flex-start;gap:8px}.error-icon{flex-shrink:0;margin-top:1px}.generate-result{padding:14px 16px;background:transparent;border:1px solid var(--border2);border-radius:0;display:flex;flex-direction:column;gap:6px}.result-top{display:flex;align-items:center;gap:10px}.result-icon{color:var(--success);font-size:12px;flex-shrink:0}.result-title{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text);flex:1}.result-bpm{font-size:11px;color:var(--muted);font-family:var(--font-mono)}.result-desc{font-size:12px;color:var(--muted);font-family:var(--font-mono);font-style:italic;line-height:1.5}.result-file{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:2px}.mode-group{display:flex;flex-direction:column;gap:6px}.mode-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;color:var(--muted)}.mode-buttons{display:flex;gap:6px}.mode-btn{padding:8px 14px;background:transparent;border:1px solid var(--border);border-radius:0;cursor:pointer;color:var(--muted);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;transition:all .15s;white-space:nowrap}.mode-btn.active{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:none}.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.theme-toggle{padding:6px 12px;background:transparent;border:1px solid var(--border2);border-radius:0;cursor:pointer;color:var(--muted);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;transition:all .15s;white-space:nowrap}.theme-toggle:hover{border-color:var(--text);color:var(--text)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0a;--surface: #111111;--border: #272727;--border2: #3f3f3f;--text: #e0e0e0;--muted: #606060;--accent: #e0e0e0;--success: #e0e0e0;--error: #aaaaaa;--font-head: "Syne", sans-serif;--font-mono: "Space Mono", monospace}[data-theme=light]{--bg: #f0ede8;--surface: #faf9f7;--border: #c8c4be;--border2: #a8a49e;--text: #111111;--muted: #888880;--accent: #111111;--success: #111111;--error: #555550}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}::selection{background:#c8c8c840}