@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400&display=swap";:root{--bg-dark: #0d1117;--bg-glass: rgba(13, 17, 23, .9);--border-glass: rgba(255, 255, 255, .1);--border-hover: #58a6ff;--primary: #58a6ff;--text-main: #e6edf3;--text-sub: #8b949e;--item-bg: rgba(255, 255, 255, .04);--fixed-width: 400px;--control-h: 60px;--row-h: 56px;--radius-outer: 16px;--radius-inner: 8px;--pad-container: 32px;--gap-layout: 24px;--gap-grid: 12px}body{margin:0;padding:0;width:100%;height:100vh;overflow:hidden;background:var(--bg-dark);font-family:JetBrains Mono,monospace;color:var(--text-main);display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}.App{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at 50% 50%,#161b22,#0d1117)}.blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:0;opacity:.4}.blob-1{top:10%;left:10%;width:300px;height:300px;background:var(--primary);animation:float 10s ease-in-out infinite}.blob-2{bottom:10%;right:10%;width:350px;height:350px;background:#3fb950;animation:float 12s ease-in-out infinite reverse}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(20px,-40px)}}.glass-container{z-index:10;width:var(--fixed-width);max-width:95vw;max-height:92vh;display:flex;flex-direction:column;padding:var(--pad-container);gap:var(--gap-layout);background:var(--bg-glass);box-shadow:0 30px 60px #0009;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid var(--border-glass);border-radius:var(--radius-outer);box-sizing:border-box}.header{text-align:center;flex-shrink:0}.title{margin:0;font-size:2.2rem;font-weight:700;color:#fff;line-height:1;letter-spacing:-1px;text-transform:uppercase}.subtitle{margin:10px 0 0;font-size:.85rem;color:var(--text-sub);font-style:italic;opacity:.8}.std-btn,.std-input{width:100%;height:var(--control-h);background:var(--item-bg);border:1px solid var(--border-glass);border-radius:var(--radius-inner);color:#fff;font-family:inherit;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-sizing:border-box;text-decoration:none;outline:none;flex-shrink:0}.std-btn:hover{background:#ffffff14;border-color:var(--border-hover);transform:translateY(-2px)}.std-btn:active{transform:translateY(0);background:#58a6ff33}.input-group{position:relative;width:100%;flex-shrink:0}.std-input{text-align:left;padding:0 50px 0 20px;font-weight:500;text-transform:uppercase;cursor:text}.std-input:focus{border-color:var(--primary);background:#0000004d}.std-input::placeholder{color:#fff3}.char-counter{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:.75rem;color:var(--primary);pointer-events:none;opacity:.8}.grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);width:100%}.grid-btn{aspect-ratio:1 / 1;background:var(--item-bg);border:1px solid var(--border-glass);border-radius:var(--radius-inner);color:var(--text-main);font-size:1.4rem;font-weight:700;cursor:pointer;transition:all .1s ease;display:flex;align-items:center;justify-content:center;position:relative}.grid-btn:hover{border-color:var(--primary);background:#ffffff14}.grid-btn:active,.grid-btn.playing{background:#58a6ff33;border-color:var(--primary);box-shadow:0 0 20px #58a6ff26}.list-container{flex:1;overflow-y:auto;width:100%;display:flex;flex-direction:column;gap:10px;padding-right:4px}.list-container::-webkit-scrollbar{width:4px}.list-container::-webkit-scrollbar-track{background:transparent}.list-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.track-row{height:var(--row-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#ffffff05;border:1px solid transparent;border-radius:var(--radius-inner);flex-shrink:0;transition:background .2s}.track-row:hover{background:#ffffff0d}.track-label{font-size:.95rem;font-weight:500;opacity:.9}.btn-upload{display:flex;justify-content:center;align-items:center;cursor:pointer;height:40px;width:100px;border:1px solid rgba(255,255,255,.2);border-radius:5px;background-color:#ffffff0d;color:#fff;font-weight:700;font-size:14px;transition:all .3s ease}.btn-upload:hover{background:var(--primary);border-color:var(--primary);color:#0d1117}.btn-upload.uploaded{background-color:#4caf504d;border-color:#4caf50;color:#4caf50}.text-body{font-size:.95rem;line-height:1.6;color:var(--text-sub);text-align:center;margin:0;opacity:.9}