*,*:before,*:after{box-sizing:border-box}:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#fffd;background-color:#0d0d1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0}a{color:#4a90d9;text-decoration:none}a:hover{color:#5aa0e9}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;border-bottom:1px solid #ffffff10}.app-nav{display:flex;gap:1rem}.nav-link{font-size:.85rem;color:#888;text-decoration:none;transition:color .15s}.nav-link:hover{color:#4a90d9}.app-logo{font-size:1.25rem;font-weight:700;color:#4a90d9;text-decoration:none;letter-spacing:.05em}.app-logo:hover{color:#5aa0e9}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1;padding:1rem 1.5rem;max-width:1200px;width:100%;margin:0 auto}.song-card{display:flex;flex-direction:column;background:#1a1a2e;border:1px solid #ffffff10;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s;text-align:left;color:inherit;font:inherit;padding:0}.song-card:hover{transform:translateY(-2px);border-color:#4a90d9}.song-card-cover{width:100%;aspect-ratio:1;background:#0d0d1a;display:flex;align-items:center;justify-content:center;overflow:hidden}.song-card-cover img{width:100%;height:100%;object-fit:cover}.song-card-placeholder{font-size:3rem;color:#ffffff20}.song-card-info{padding:.75rem}.song-card-title{margin:0;font-size:.95rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card-artist{margin:.25rem 0 0;font-size:.8rem;color:#ffffff60}.song-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.song-difficulty{font-size:.7rem;text-transform:uppercase;padding:2px 6px;border-radius:3px;font-weight:600}.song-difficulty.easy{background:#2d6a2d;color:#8bff8b}.song-difficulty.medium{background:#6a5a2d;color:gold}.song-difficulty.hard{background:#6a2d2d;color:#ff8b8b}.song-duration{font-size:.75rem;color:#ffffff40}.song-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;padding:1rem 0}.song-list-empty{text-align:center;padding:4rem 2rem;color:#ffffff60}.song-list-hint{font-size:.8rem;color:#ffffff30;margin-top:.5rem}.loading-spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#ffffff80}.spinner{width:32px;height:32px;border:3px solid #ffffff20;border-top-color:#4a90d9;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-spinner p{margin-top:1rem;font-size:.875rem}.lyrics-display{text-align:center;padding:1rem;min-height:80px}.lyrics-current{font-size:1.5rem;font-weight:600;color:#fff;min-height:2rem;line-height:2rem}.lyrics-word{transition:color .1s;color:#ffffff60}.lyrics-word.active{color:gold;text-shadow:0 0 10px #ffd70080}.lyrics-word.past{color:#4a90d9}.lyrics-next{font-size:1rem;color:#ffffff30;margin-top:.5rem}.lyrics-placeholder{color:transparent}.score-hud{position:absolute;top:1rem;right:1.5rem;text-align:right}.score-value{font-size:2.5rem;font-weight:700;color:#fff;line-height:1;font-variant-numeric:tabular-nums}.score-streak{font-size:.875rem;color:gold;margin-top:.25rem;animation:pulse .6s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.7}to{opacity:1}}.audio-controls{padding:.5rem 1rem}.audio-progress-bar{width:100%;height:4px;background:#ffffff15;border-radius:2px;margin-bottom:.5rem;overflow:hidden}.audio-progress-fill{height:100%;background:#4a90d9;transition:width .25s linear}.audio-controls-row{display:flex;align-items:center;gap:1rem}.audio-btn{background:#4a90d9;color:#fff;border:none;padding:.4rem 1rem;border-radius:4px;cursor:pointer;font-size:.875rem}.audio-btn:hover{background:#5aa0e9}.audio-time{font-size:.8rem;color:#ffffff80;font-variant-numeric:tabular-nums}.audio-volume{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#ffffff60}.audio-volume input[type=range]{width:80px}.audio-mic-level{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#ffffff60}.mic-meter{width:60px;height:6px;background:#ffffff15;border-radius:3px;overflow:hidden}.mic-meter-fill{height:100%;background:#6bff6b;transition:width .05s linear}.mic-permission{text-align:center;padding:2rem;background:#1a1a2e;border-radius:8px;max-width:400px;margin:2rem auto}.mic-permission h3{color:#ff6b6b;margin:0 0 1rem}.mic-permission p{color:#ffffff80;font-size:.875rem;margin-bottom:1.5rem}.mic-retry-btn{background:#4a90d9;color:#fff;border:none;padding:.5rem 1.5rem;border-radius:4px;cursor:pointer}.karaoke-view{display:flex;flex-direction:column;align-items:center;width:100%}.karaoke-song-info{text-align:center;margin-bottom:1rem}.karaoke-song-info h2{margin:0;font-size:1.25rem;color:#fff}.karaoke-song-info span{font-size:.875rem;color:#ffffff60}.karaoke-canvas-container{position:relative;border-radius:8px;overflow:hidden;border:1px solid #ffffff15}.karaoke-loading,.karaoke-error{display:flex;align-items:center;justify-content:center;min-height:300px;color:#ffffff80}.karaoke-error{color:#ff6b6b}.karaoke-start{text-align:center;margin-top:2rem}.karaoke-start-btn{background:#4a90d9;color:#fff;border:none;padding:.75rem 2rem;border-radius:8px;font-size:1.25rem;cursor:pointer;transition:background .2s}.karaoke-start-btn:hover{background:#5aa0e9}.karaoke-mic-hint{font-size:.75rem;color:#ffffff40;margin-top:.5rem}.karaoke-stop{margin-top:.5rem}.karaoke-stop-btn{background:#f44;color:#fff;border:none;padding:.4rem 1.5rem;border-radius:4px;cursor:pointer;font-size:.875rem}.karaoke-stop-btn:hover{background:#f55}.score-breakdown{width:100%;max-width:360px;margin:0 auto}.breakdown-row{display:flex;justify-content:space-between;padding:.5rem 0;font-size:1rem;color:#fffc}.breakdown-row.detail{font-size:.85rem;color:#ffffff60}.breakdown-divider{border:none;border-top:1px solid #ffffff15;margin:.5rem 0}.results-view{display:flex;flex-direction:column;align-items:center;padding:2rem;max-width:480px;margin:0 auto}.results-header{text-align:center;margin-bottom:1.5rem}.results-header h2{margin:0;color:#fff}.results-artist{color:#ffffff60;margin:.25rem 0 0}.results-grade{font-size:4rem;font-weight:800;line-height:1;margin-bottom:.5rem}.grade-s{color:gold;text-shadow:0 0 20px #ffd70060}.grade-a{color:#4a90d9}.grade-b{color:#6bff6b}.grade-c{color:#fff}.grade-d{color:#fa4}.grade-f{color:#f44}.results-total-score{font-size:2rem;font-weight:600;color:#fffc;margin-bottom:2rem}.results-saving{font-size:.75rem;color:#ffffff40;margin-top:1rem}.results-actions{display:flex;gap:1rem;margin-top:2rem}.results-btn{padding:.6rem 1.5rem;border:none;border-radius:6px;cursor:pointer;font-size:.95rem}.results-btn.primary{background:#4a90d9;color:#fff}.results-btn.primary:hover{background:#5aa0e9}.results-btn.secondary{background:#ffffff15;color:#fffc}.results-btn.secondary:hover{background:#ffffff25}.pitch-test{max-width:720px;margin:0 auto;padding:1rem}.pitch-test h1{font-size:1.5rem;color:#fff;margin-bottom:.25rem}.pitch-test .subtitle{color:#888;font-size:.85rem;margin-bottom:1.25rem}.pitch-test-controls{display:flex;gap:.75rem;margin-bottom:1.25rem}.pitch-test-controls button{padding:.5rem 1.25rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s}.btn-start{background:#4a90d9;color:#fff}.btn-start:hover{background:#5aa0e9}.btn-stop{background:#d94a4a;color:#fff}.btn-stop:hover{background:#e95a5a}.btn-start:disabled,.btn-stop:disabled{opacity:.4;cursor:not-allowed}.status-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.25rem}.status-item{background:#1a1a2e;border-radius:6px;padding:.5rem .75rem}.status-item .label{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.05em}.status-item .value{font-size:.95rem;color:#ddd;font-variant-numeric:tabular-nums}.status-item .value.active{color:#4ade80}.status-item .value.inactive{color:#888}.meters{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}.meter-card{background:#1a1a2e;border-radius:8px;padding:.75rem}.meter-card .meter-label{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}.meter-card .meter-value{font-size:1.5rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}.meter-card .meter-value.dim{color:#555}.meter-card .meter-unit{font-size:.75rem;color:#888;font-weight:400;margin-left:.25rem}.rms-bar-container{height:8px;background:#111;border-radius:4px;margin-top:.4rem;overflow:hidden}.rms-bar-fill{height:100%;border-radius:4px;transition:width .05s linear;background:linear-gradient(90deg,#4a90d9,#4ade80)}.detection-rate-bar{height:8px;background:#111;border-radius:4px;margin-top:.4rem;overflow:hidden}.detection-rate-fill{height:100%;border-radius:4px;transition:width .1s linear}.pitch-canvas-container{background:#1a1a2e;border-radius:8px;padding:.75rem}.pitch-canvas-container .meter-label{font-size:.7rem;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.pitch-test-canvas{width:100%;height:200px;display:block;border-radius:4px;background:#111}