:root{font-family:Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at top left,#fff,#f2f7ff 45%,#eaf2ff);color:#1d2433}*{box-sizing:border-box}body{margin:0;min-height:100vh}#root{min-height:100vh}.app{width:min(960px,100%);margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}header h1{margin:0;font-size:clamp(1.3rem,3vw,2rem)}.target-panel,.mic-panel,.settings-panel,.note-suggestion,.levels-panel,.completion-banner{border-radius:16px;padding:1rem;background:#fff;box-shadow:0 8px 24px #0c162c14}.levels-panel{background:linear-gradient(135deg,#fff,#f4f9ff 55%,#f0fff6);border:2px solid #d7e4f7}.levels-top{display:flex;justify-content:space-between;gap:1rem;align-items:center}.levels-top h2{margin:0}.auto-advance-toggle{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.92rem}.levels-grid{margin-top:.8rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem}.level-card{text-align:left;border-radius:12px;border:1px solid #c9d9f0;background:#fff;padding:.7rem;display:flex;flex-direction:column;gap:.25rem}.level-card strong{font-size:1rem}.level-card span{font-size:.86rem;color:#40506f}.level-card.active{border:2px solid #1b7fda;background:#eef6ff}.current-level-meta{margin:.8rem 0 0;font-weight:700}.completion-banner{border:2px solid #3ca95a;background:linear-gradient(90deg,#edfdf2,#f7fff1,#edfffa);font-weight:800;line-height:1.35}.target-panel{border:3px solid var(--target-color, #7edc54)}.target-header{display:flex;justify-content:space-between;gap:1rem;align-items:center}.target-header h2,.mic-header h2,.settings-panel h3{margin:0}.mode-toggle{display:flex;gap:.4rem}.mode-toggle button,.target-actions button,.mic-header button,.settings-panel input,.settings-panel select{border-radius:10px;border:1px solid #ccd8ec;padding:.5rem .8rem;font-size:.95rem;background:#fff}.mode-toggle button.active{border-color:var(--target-color, #7edc54);background:color-mix(in srgb,var(--target-color, #7edc54) 15%,white)}.bell-button{margin-top:1rem;width:100%;background:transparent;border:none;cursor:pointer}.bell-image{width:min(260px,70vw);height:auto}.bell-placeholder{margin:0 auto;width:min(260px,70vw);border:2px dashed #c4cedf;border-radius:12px;padding:3rem 1rem;color:#6d7585}.target-actions{margin-top:1rem;display:flex;gap:.6rem;justify-content:center}.note-suggestion{border:2px solid #ccd8ec;display:flex;align-items:center;justify-content:space-between;gap:.8rem}.note-suggestion p{margin:0;font-weight:700}.note-suggestion-actions{display:flex;gap:.5rem}.note-suggestion-actions button{border-radius:10px;border:1px solid #ccd8ec;padding:.45rem .8rem;background:#fff}.mic-header{display:flex;justify-content:space-between;align-items:center}.pitch-lane{position:relative;height:220px;margin-top:1rem;border-radius:12px;background:linear-gradient(180deg,#f9fbff,#f0f5ff);border:1px solid #d5e0f1;overflow:hidden}.pitch-canvas{width:100%;height:100%;display:block}.range-guidance{position:absolute;right:.7rem;top:.7rem;background:#141f37d1;color:#fff;font-weight:700;font-size:.82rem;padding:.4rem .55rem;border-radius:8px}.status-row{margin-top:.8rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.status-row p{margin:0;font-weight:600}.progress-track{width:100%;height:16px;background:#e6ebf5;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;transition:width 80ms linear}.success-banner{margin-top:.8rem;padding:.6rem .8rem;border-radius:10px;background:#eafdf0;border:1px solid #57cb74;font-weight:700;display:flex;align-items:center;gap:.5rem;position:relative}.checkmark{color:#22a543;font-size:1.2rem}.confetti{position:absolute;right:.6rem;top:-8px;width:54px;height:28px;background:radial-gradient(circle,#ff2f31 0 3px,transparent 3px),radial-gradient(circle,#fffb6d 0 3px,transparent 3px),radial-gradient(circle,#79e59b 0 3px,transparent 3px),radial-gradient(circle,#2297ea 0 3px,transparent 3px);background-size:20px 20px;background-position:0 0,16px 8px,26px -2px,40px 8px}.settings-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}.settings-panel label{display:flex;flex-direction:column;gap:.4rem;font-weight:600}@media (max-width: 640px){.app{padding:.75rem}.target-header,.mic-header,.levels-top,.note-suggestion{flex-direction:column;align-items:flex-start}}