:root{--cream:#FAF3E0;--cream-deep:#F0E2C4;--cream-card:#FFFDF5;--brown:#8B6F47;--brown-dark:#5C4A35;--brown-light:#C2A878;--forest:#4A7C59;--orange:#E07856;--orange-light:#F5A887;--mic:#2C2C2C;--text:#3d2f1f;--muted:#8a7659;--border-w:3px;--radius:18px;--shadow:6px 6px 0px rgba(92,74,53,0.25);--shadow-hover:8px 8px 0px rgba(92,74,53,0.35);--font-main:"Jua","Gaegu",sans-serif;--font-body:"Gaegu",sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:var(--font-body),system-ui,sans-serif;color:var(--text);background:var(--cream);min-height:100vh;background-image:radial-gradient(circle at 15% 10%,#fff9e8 0,transparent 45%),radial-gradient(circle at 85% 90%,#f5e4c0 0,transparent 45%)}.cb-page{max-width:860px;margin:0 auto;padding:2rem 1.5rem 5rem}.cb-header{text-align:center;margin-bottom:2.5rem;position:relative}.cb-header-logo{display:inline-flex;align-items:center;gap:.5rem;background:var(--brown-dark);color:#fffdf5;font-family:var(--font-main);font-size:2.8rem;font-weight:700;padding:.4rem 1.8rem .5rem;border-radius:999px;border:var(--border-w) solid var(--brown-dark);box-shadow:5px 5px 0 var(--brown);letter-spacing:.01em;margin-bottom:1rem}.cb-header-logo .accent{color:var(--orange-light)}.cb-header-bubble{display:inline-block;background:white;border:var(--border-w) solid var(--brown-dark);border-radius:999px;padding:.5rem 1.4rem;font-size:1.05rem;box-shadow:3px 3px 0 var(--brown-light);position:relative;color:var(--brown-dark)}.cb-header-bubble:before{top:-14px;border:7px solid transparent;border-bottom:7px solid var(--brown-dark)}.cb-header-bubble:after,.cb-header-bubble:before{content:"";position:absolute;left:50%;transform:translateX(-50%)}.cb-header-bubble:after{top:-9px;border:6px solid transparent;border-bottom-color:white}.cb-sticker{display:inline-block;font-size:1.5rem;animation:cb-wiggle 3s ease-in-out infinite}@keyframes cb-wiggle{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}.cb-pickers{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}.cb-picker-card{background:var(--cream-card);border:var(--border-w) solid var(--brown-dark);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem 1.5rem;transition:box-shadow .15s,transform .15s}.cb-picker-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.cb-picker-title{font-family:var(--font-main);font-size:1.3rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.4rem}.cb-file-label{display:inline-flex;align-items:center;gap:.5rem;background:var(--cream-deep);border:2px dashed var(--brown-light);border-radius:10px;padding:.6rem 1.1rem;font-family:var(--font-body);font-size:1rem;color:var(--muted);cursor:pointer;transition:background .12s;width:100%}.cb-file-label:hover{background:#ffe9cf}.cb-file-label input{display:none}.cb-file-chosen{display:inline-flex;align-items:center;gap:.5rem;background:#e8f5ee;border:2px solid var(--forest);border-radius:10px;padding:.5rem 1rem;font-size:.95rem;color:var(--forest);margin-top:.6rem;font-family:var(--font-body)}.cb-mode-tabs{display:flex;gap:.3rem;background:var(--cream-deep);border-radius:999px;padding:.25rem;margin-bottom:.75rem;border:2px solid var(--brown-light)}.cb-mode-tab{flex:1 1;border:none;background:transparent;padding:.4rem .75rem;border-radius:999px;font-family:var(--font-body);font-size:1rem;font-weight:700;color:var(--muted);cursor:pointer;transition:all .12s}.cb-mode-tab.active{background:white;color:var(--brown-dark);border:2px solid var(--brown-light);box-shadow:2px 2px 0 var(--brown-light)}.cb-record-open{width:100%;background:white;border:var(--border-w) dashed var(--orange);border-radius:12px;padding:.8rem 1rem;font-family:var(--font-body);font-size:1.05rem;font-weight:700;color:var(--orange);cursor:pointer;transition:background .12s,transform .12s}.cb-record-open:hover{background:#fff3ee;transform:translateY(-1px)}.cb-submit{display:block;margin:0 auto;padding:1rem 3rem;font-family:var(--font-main);font-size:1.35rem;color:white;background:var(--orange);border:var(--border-w) solid var(--brown-dark);border-radius:999px;cursor:pointer;box-shadow:5px 5px 0 var(--brown-dark);transition:all .12s;letter-spacing:.03em}.cb-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:7px 7px 0 var(--brown-dark)}.cb-submit:active:not(:disabled){transform:translateY(2px);box-shadow:2px 2px 0 var(--brown-dark)}.cb-submit:disabled{background:var(--brown-light);border-color:var(--brown-light);box-shadow:3px 3px 0 rgba(139,111,71,.3);cursor:not-allowed;opacity:.7}.cb-wave-fallback{margin-top:.6rem;height:36px;border-radius:8px;overflow:hidden;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;gap:2px;padding:4px 8px}.cb-wave-fallback-bar{flex:0 0 3px;border-radius:2px;background:var(--brown-light);opacity:.5}.cb-wavesurfer{margin-top:.6rem;border-radius:8px;overflow:hidden;cursor:pointer}.cb-progress-bar{width:100%;height:8px;background:var(--cream-deep);border:1.5px solid var(--brown-light);border-radius:999px;overflow:hidden;margin-top:.5rem}.cb-progress-bar>div{height:100%;background:var(--orange);border-radius:999px;transition:width .15s linear}.cb-error-box{background:#fff5f5;border:2px solid #f5a5a5;border-radius:12px;padding:.75rem 1rem;color:#9b2c2c;font-family:var(--font-body);font-size:1rem;margin-top:1rem}.cb-loading-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 1rem 3rem;animation:cb-fade-in .4s ease}.cb-loading-img-wrap{position:relative;width:min(420px,90vw)}.cb-loading-img-wrap img{width:100%;height:auto;border-radius:var(--radius);display:block}.cb-loading-bubble,.cb-loading-img-wrap img{border:var(--border-w) solid var(--brown-dark);box-shadow:var(--shadow)}.cb-loading-bubble{background:white;border-radius:18px;padding:1rem 1.5rem;font-family:var(--font-main);font-size:1.3rem;color:var(--brown-dark);text-align:center;position:relative;min-width:260px}.cb-loading-bubble:after{bottom:-18px;border:9px solid transparent;border-top:9px solid var(--brown-dark)}.cb-loading-bubble:after,.cb-loading-bubble:before{content:"";position:absolute;left:50%;transform:translateX(-50%)}.cb-loading-bubble:before{bottom:-12px;border:8px solid transparent;border-top-color:white;z-index:1}.cb-loading-dots{display:inline-flex;gap:6px;margin-left:4px}.cb-loading-dots span{width:8px;height:8px;background:var(--orange);border-radius:50%;display:inline-block;animation:cb-dot-bounce 1.2s ease-in-out infinite}.cb-loading-dots span:nth-child(2){animation-delay:.2s}.cb-loading-dots span:nth-child(3){animation-delay:.4s}@keyframes cb-dot-bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-8px)}}.cb-loading-step{font-family:var(--font-body);font-size:1rem;color:var(--muted);text-align:center}.cb-progress-wrap{width:min(380px,80vw)}.cb-progress-track{width:100%;height:14px;background:var(--cream-deep);border:2px solid var(--brown-light);border-radius:999px;overflow:hidden}.cb-progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),#f5a050);border-radius:999px;transition:width .15s linear;position:relative;overflow:hidden}.cb-progress-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:cb-shimmer 1.2s infinite}@keyframes cb-shimmer{0%{left:-100%}to{left:200%}}.cb-result-screen{animation:cb-fade-in .5s ease}@keyframes cb-fade-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.cb-score-hero{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:2rem}.cb-score-tag{background:var(--brown-dark);color:#fffdf5;font-family:var(--font-main);font-size:1.1rem;padding:.35rem 1.2rem;border-radius:999px;border:2px solid var(--brown-dark);box-shadow:3px 3px 0 var(--brown);letter-spacing:.04em}.cb-score-board{background:var(--cream-card);border:var(--border-w) solid var(--brown-dark);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem 2rem;width:100%;display:flex;align-items:center;gap:1.5rem}.cb-radar-wrap{flex:0 0 440px;max-width:440px}.cb-grade-badge{display:flex;flex-direction:column;align-items:center;gap:.2rem;flex:1 1}.cb-grade-letter{font-family:var(--font-main);font-size:5rem;line-height:1;font-weight:700;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.15))}.cb-grade-label{font-family:var(--font-main);font-size:1.4rem;color:var(--brown-dark)}.cb-grade-score{font-family:var(--font-main);font-size:1.1rem;color:var(--muted)}.cb-grade-comment{margin-top:.5rem;background:white;border:2px solid var(--brown-light);border-radius:12px;padding:.5rem 1rem;font-size:1rem;color:var(--brown-dark);text-align:center;max-width:200px;box-shadow:2px 2px 0 var(--brown-light)}.cb-pitch-section{margin-top:1.5rem;background:var(--cream-card);border:var(--border-w) solid var(--brown-dark);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 1.75rem 1.25rem}.cb-section-title{font-family:var(--font-main);font-size:1.4rem;color:var(--brown-dark);margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem}.cb-section-title:after{content:"";flex:1 1;height:2px;background:repeating-linear-gradient(90deg,var(--brown-light) 0,var(--brown-light) 6px,transparent 6px,transparent 12px);margin-left:.5rem}.cb-pitch-legend{display:flex;gap:1.25rem;margin-top:.6rem;font-family:var(--font-body);font-size:1rem}.cb-axis-section{margin-top:1.5rem;background:var(--cream-card);border:var(--border-w) solid var(--brown-dark);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 1.75rem}.cb-axis-list{list-style:none;display:flex;flex-direction:column;gap:1rem}.cb-axis-item{background:white;border:2px solid var(--cream-deep);border-radius:14px;padding:.9rem 1.1rem;transition:transform .12s,box-shadow .12s}.cb-axis-item:hover{transform:translateX(3px);box-shadow:-3px 3px 0 var(--cream-deep)}.cb-axis-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}.cb-axis-emoji{font-size:1.4rem}.cb-axis-name{font-family:var(--font-main);font-size:1.1rem;color:var(--brown-dark)}.cb-axis-meter-row{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.cb-axis-bar-track{flex:1 1;height:12px;background:var(--cream-deep);border-radius:999px;border:1.5px solid var(--brown-light);overflow:hidden}.cb-axis-bar-fill{height:100%;border-radius:999px;transition:width 1s cubic-bezier(.34,1.56,.64,1)}.cb-axis-score-num{font-family:var(--font-main);font-size:1.15rem;min-width:2.5rem;text-align:right}.cb-axis-grade-chip{font-family:var(--font-main);font-size:.85rem;padding:.1rem .55rem;border-radius:999px;border:2px solid;min-width:2rem;text-align:center}.cb-axis-comment{font-family:var(--font-body);font-size:1rem;color:var(--muted);line-height:1.5;padding-top:.1rem}.cb-grade-s{color:#B5450B}.cb-grade-a{color:#2f9e66}.cb-grade-b{color:#2976b5}.cb-grade-c{color:#c77a2b}.cb-grade-d{color:#c44a3a}.cb-bg-s{background:#fff0e8;border-color:#E07856}.cb-bg-a{background:#e8f5ee;border-color:#4A7C59}.cb-bg-b{background:#e8f0f9;border-color:#4A82B5}.cb-bg-c{background:#fff5e0;border-color:#c77a2b}.cb-bg-d{background:#fdecea;border-color:#c44a3a}.cb-bar-s{background:linear-gradient(90deg,#E07856,#f5a050)}.cb-bar-a{background:linear-gradient(90deg,#4A7C59,#6ab87f)}.cb-bar-b{background:linear-gradient(90deg,#4A82B5,#6aaad5)}.cb-bar-c{background:linear-gradient(90deg,#c77a2b,#e8a050)}.cb-bar-d{background:linear-gradient(90deg,#c44a3a,#e07060)}.cb-detail-wrap{margin-top:1.5rem;width:100%}.cb-detail-toggle{display:block;width:100%;padding:.8rem 1.25rem;background:white;border:2px dashed var(--brown-light);border-radius:12px;font-family:var(--font-body);font-size:1.05rem;color:var(--brown-dark);cursor:pointer;transition:background .12s;text-align:center}.cb-detail-toggle:hover{background:var(--cream-deep)}.cb-detail-panel{background:var(--cream-card);border:var(--border-w) solid var(--brown-dark);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem 1.75rem}.cb-detail-panel h3{font-family:var(--font-main);margin-bottom:1rem;color:var(--brown-dark);font-size:1.25rem}.cb-detail-panel h4{font-family:var(--font-main);margin-bottom:.5rem;font-size:1.05rem}.cb-detail-timing{margin-bottom:1.25rem;padding-bottom:1.25rem;border-bottom:2px dashed var(--brown-light)}.cb-detail-timing p{margin:.25rem 0}.cb-detail-sub{color:var(--muted);font-size:.9rem}.cb-detail-peaks-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:1.25rem;gap:1.25rem}.cb-detail-peaks ol{margin:0;padding-left:1.25rem;font-size:.95rem;line-height:1.7}.cb-detail-peaks ol li span{color:var(--muted);font-size:.85rem}.cb-detail-empty{color:var(--muted);font-size:.95rem}.cb-detail-footnote{margin-top:1rem;color:var(--muted);font-size:.88rem;line-height:1.5}.cb-retry-btn{display:block;margin:2rem auto 0;padding:.9rem 2.5rem;font-family:var(--font-main);font-size:1.2rem;background:white;color:var(--brown-dark);border:var(--border-w) solid var(--brown-dark);border-radius:999px;cursor:pointer;box-shadow:4px 4px 0 var(--brown);transition:all .12s}.cb-retry-btn:hover{transform:translateY(-2px);box-shadow:6px 6px 0 var(--brown)}.cb-raw-details{margin-top:1.5rem;width:100%;color:var(--muted);font-family:var(--font-body);font-size:1rem;background:var(--cream-card);border:2px dashed var(--brown-light);border-radius:12px;padding:1rem 1.25rem}.cb-raw-details summary{cursor:pointer;font-weight:700;color:var(--brown-dark)}.cb-raw-details pre{margin-top:.5rem;font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.cb-record-overlay{position:fixed;inset:0;background:rgba(44,28,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2rem 1rem 2.5rem;animation:cb-fade-in .2s ease;overflow-y:auto}@keyframes cb-pop-in{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}.cb-record-title-pill{font-family:var(--font-main);font-size:1.4rem;color:#fffdf5;background:var(--brown-dark);padding:.5rem 1.6rem;border-radius:999px;border:var(--border-w) solid var(--brown-dark);box-shadow:4px 4px 0 var(--brown);text-align:center;flex:0 0 auto}.cb-record-close{position:fixed;top:1rem;right:1rem;width:44px;height:44px;border-radius:50%;border:2px solid var(--brown-light);background:white;font-size:1.1rem;font-weight:700;color:var(--brown-dark);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--brown-light);transition:transform .12s;z-index:110}.cb-record-close:hover:not(:disabled){transform:scale(1.1)}.cb-record-close:disabled{opacity:.4;cursor:not-allowed}.cb-rec-mascot-wrap{flex:1 1 auto;display:flex;justify-content:center;align-items:center;width:100%;max-height:60vh;min-height:0;animation:cb-pop-in .4s cubic-bezier(.34,1.56,.64,1)}.cb-rec-mascot-wrap img{width:auto;height:100%;max-height:60vh;max-width:80vw;object-fit:contain}.cb-rec-controls{flex:0 0 auto;gap:.75rem;width:min(420px,92vw)}.cb-rec-btn-big,.cb-rec-controls{display:flex;flex-direction:column}.cb-rec-btn-big{align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:132px;padding:1rem 1.25rem;border:var(--border-w) solid var(--brown-dark);border-radius:14px;background:white;cursor:pointer;font-family:var(--font-main);font-size:1.15rem;color:var(--brown-dark);box-shadow:3px 3px 0 var(--brown-light)}.cb-rec-btn-big.recording{background:#fdecea;border-color:#c44a3a;box-shadow:3px 3px 0 #c44a3a}.cb-rec-icon{font-size:2.5rem}.cb-rec-timer{font-family:var(--font-main);font-size:1.1rem;color:#c44a3a;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.cb-rec-meter{width:100%;height:10px;background:var(--cream-deep);border:1.5px solid var(--brown-light);border-radius:999px;overflow:hidden;margin-top:.75rem}.cb-rec-meter>div{height:100%;background:var(--orange);border-radius:999px;transition:width 60ms linear}.cb-rec-review{background:var(--cream-card);border:var(--border-w) solid var(--brown-dark);border-radius:var(--radius);box-shadow:8px 8px 0 var(--brown-dark);padding:1.25rem 1.5rem}.cb-rec-review-label{font-family:var(--font-body);font-size:1rem;color:var(--muted);margin-bottom:.75rem;text-align:center}.cb-rec-review audio{width:100%;border-radius:8px}.cb-rec-review-buttons{display:flex;gap:.75rem;margin-top:.75rem}.cb-rec-review-buttons button{flex:1 1;padding:.7rem;border-radius:999px;font-family:var(--font-main);font-size:1rem;cursor:pointer;transition:transform .12s}.cb-rec-review-buttons button:hover{transform:translateY(-1px)}.cb-rec-review-retry{border:var(--border-w) solid var(--brown-light);background:white;color:var(--brown-dark);box-shadow:3px 3px 0 var(--brown-light)}.cb-rec-review-submit{border:var(--border-w) solid var(--brown-dark);background:var(--orange);color:white;box-shadow:3px 3px 0 var(--brown-dark)}@media (max-width:640px){.cb-page{padding:1.5rem 1rem 3rem}.cb-header-logo{font-size:2rem}.cb-score-board{flex-direction:column;align-items:center}.cb-radar-wrap{flex:0 0 auto;max-width:320px}.cb-detail-peaks-grid{grid-template-columns:1fr}}