:root{--washi:#1c1a17;--washi-deep:#26221d;--sumi:#f2ecdc;--sumi-soft:#a89e8c;--shu:#d9654c;--menu-accent:#46ffb2;--menu-text-on-fill:#151515;--rule:#f2ecdc24}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--washi);color:var(--sumi);-webkit-font-smoothing:antialiased;background-image:url(/noise-overlay.svg),radial-gradient(circle at 12% 8%,#f2ecdc09,#0000 40%),radial-gradient(circle at 88% 92%,#f2ecdc09,#0000 40%);background-repeat:repeat,no-repeat,no-repeat;background-size:250px 250px,auto,auto;font-family:Inter,system-ui,sans-serif}#app{max-width:720px;margin:0 auto;padding:3rem 1.25rem 4rem}header h1{letter-spacing:.01em;text-align:center;margin:0 0 .4rem;font-family:Shippori Mincho,serif;font-size:1.8rem;font-weight:700}.subtitle{color:var(--sumi-soft);text-align:center;margin:0 0 2rem;font-size:.9rem}.controls,.vibe,.transport{flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;margin-bottom:1.5rem;display:flex}label{color:var(--sumi-soft);align-items:center;gap:.5rem;font-size:.85rem;display:flex}select,input[type=text],input[type=number]{background:var(--washi-deep);color:var(--sumi);border:1px solid var(--rule);border-radius:200px;padding:.55rem 1rem;font-family:Inter,sans-serif;font-size:.9rem}select:focus,input:focus{outline:2px solid var(--menu-accent);outline-offset:1px}input[type=text]{flex:1;min-width:220px}input[type=number]{text-align:center;width:4.5rem}button{cursor:pointer;color:var(--sumi);border:1px solid var(--rule);opacity:.9;background:0 0;border-radius:200px;padding:.55rem 1.1rem;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500;transition:opacity .15s,border-color .15s}button:hover{opacity:1;border-color:var(--menu-accent)}#randomize-btn,#play-btn,#vibe-btn{background:var(--menu-accent);color:var(--menu-text-on-fill);border-color:var(--menu-accent);font-weight:600}#stop-btn{border-color:var(--shu);color:var(--shu)}#vibe-status{color:var(--sumi-soft);font-size:.8rem}#vibe-status.error{color:var(--shu)}.progression{background:var(--washi-deep);border:1px solid var(--rule);border-radius:24px;flex-wrap:wrap;justify-content:center;gap:.75rem;min-height:100px;padding:1.5rem;display:flex}.chord-card{background:var(--washi);border:1px solid var(--rule);border-radius:16px;flex-direction:column;align-items:center;gap:.3rem;min-width:92px;padding:1rem .75rem .6rem;transition:border-color .15s,background .15s;display:flex;position:relative}.chord-card.playing{border-color:var(--menu-accent);background:var(--washi-deep)}.chord-symbol{color:var(--sumi);opacity:1;background:0 0;border:none;border-radius:0;padding:.2rem;font-family:Shippori Mincho,serif;font-size:1.35rem;font-weight:700}.chord-roman{color:var(--sumi-soft);font-size:.75rem}.swap-toggle{color:var(--sumi-soft);opacity:1;background:0 0;border:none;border-radius:0;padding:.1rem;font-size:.75rem}.swap-menu{z-index:10;background:var(--washi-deep);border:1px solid var(--menu-accent);border-radius:12px;flex-direction:column;min-width:170px;margin-top:.35rem;display:none;position:absolute;top:100%;left:0;overflow:hidden}.swap-menu.open{display:flex}.swap-menu button{text-align:left;opacity:1;background:0 0;border:none;border-radius:0;width:100%;padding:.6rem .9rem}.swap-menu button:hover{background:var(--rule);border-color:#0000}