@charset "utf-8";
.vocal-panel{border-bottom:1px solid var(--line);padding-bottom:14px}.vocal-panel .quality-row{border:0;padding-bottom:10px}.vocal-strength{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.vocal-strength input{flex:1;min-width:40px}.vocal-strength output{min-width:32px;text-align:right}.vocal-note{font-size:11px;line-height:1.7;color:var(--muted);margin:8px 0}.vocal-panel .button{margin-top:8px;background:#f0f4ed}
:root{--ink:#243b38;--muted:#74817b;--green:#285e58;--line:#e2e6df;--cream:#f7f8f3;--soft:#edf1e9;--red:#bf6455;font-family:"Segoe UI","Malgun Gothic",sans-serif;color:var(--ink);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--cream);line-height:1.6}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #93bdb2;outline-offset:4px}a{color:inherit;text-decoration:none}button{color:inherit}button,input,select{accent-color:var(--green)}[hidden]{display:none!important}.app-shell{max-width:1120px;margin:auto;padding:0 48px}.masthead{height:112px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:28px}.brand{display:flex;align-items:center;gap:12px;font-size:27px;font-weight:750;letter-spacing:-1px}.brand small{font-size:10px;display:block;letter-spacing:2.4px;font-weight:600;margin-top:-4px}.local-badge{margin-left:auto;font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center}.local-badge>span{width:6px;height:6px;border-radius:50%;background:#6f9983}.help-link{font-size:12px}.help-link span{margin-left:7px}.intro{padding:43px 0 32px}.eyebrow{font-size:10px;letter-spacing:2.7px;color:#82978a;margin:0 0 10px;font-weight:700}h1{font-size:38px;letter-spacing:-1.7px;font-weight:650;margin:0 0 10px;line-height:1.3}.lead{color:var(--muted);font-size:14px;margin:0}.mobile-break{display:none}.workspace{display:grid;grid-template-columns:340px 1fr;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 12px 40px #233a3410}.source-panel{padding:29px 28px;background:#f0f3ec;border-right:1px solid var(--line)}.panel-heading{display:flex;align-items:center;gap:10px}.step-label{font-size:10px;color:#91a093;border:1px solid #cfd9ce;border-radius:50%;width:22px;height:22px;text-align:center;line-height:20px;flex-shrink:0}h2{font-size:14px;font-weight:650;margin:0;letter-spacing:-.3px}.source-tabs{display:flex;background:#e4e9df;border-radius:9px;padding:4px;margin-top:23px;gap:4px}.source-tabs button{flex:1;border:0;background:none;border-radius:6px;font-size:12px;padding:8px 5px;color:#7a887d}.source-tabs button[aria-selected=true]{background:#fff;color:var(--green);font-weight:650;box-shadow:0 2px 4px #00000006}.record-art{height:174px;display:grid;place-items:center;position:relative;overflow:hidden;margin:16px 0 9px}.disc{width:155px;height:155px;border-radius:50%;background:repeating-radial-gradient(circle at center,#283e36 0 1px,#31483e 1px 3px,#253c32 3px 4px);box-shadow:0 10px 16px #233a3426;display:grid;place-items:center;transform:rotate(-12deg)}.disc-label{width:69px;height:69px;border-radius:50%;background:#d9b995;display:grid;place-items:center;align-content:center;gap:3px;color:#4d5745;font-size:7px;letter-spacing:1.3px;text-align:center;line-height:1.4}.disc-label img{width:18px;height:18px;border-radius:6px;opacity:.8}.disc-shine{position:absolute;width:150px;height:150px;border-radius:50%;background:conic-gradient(from -60deg,transparent,#ffffff25,transparent 35%,transparent 65%,#ffffff18,transparent);pointer-events:none}h3{font-size:16px;text-align:center;font-weight:650;letter-spacing:-.5px;margin:0 0 8px}.source-description{font-size:12px;color:var(--muted);text-align:center;margin:0 0 17px;line-height:1.8}.button{border:1px solid transparent;border-radius:9px;padding:12px 18px;font-size:12px;display:inline-flex;gap:10px;align-items:center;justify-content:center;font-weight:600;transition:background .15s,transform .15s}.button:hover:not(:disabled){transform:translateY(-1px)}.full{width:100%}.primary{background:var(--green);color:white;box-shadow:0 4px 8px #285e581a}.primary:hover{background:#1d4c47}.text-link{display:block;text-align:center;font-size:11px;color:#768c7d;padding:14px 0 7px}.subtle{background:none;border-color:#d4ded0;color:#70836f;margin-top:9px;padding:9px}.studio-panel{padding:29px 34px 25px}.engine-badge{margin-left:auto;font-size:8px;font-weight:700;letter-spacing:1px;color:#91a08f}.track-status{display:flex;align-items:center;gap:9px;background:#f6f8f3;border:1px solid #eaf0e5;padding:13px;border-radius:10px;margin-top:23px;min-height:66px}.status-dot{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:#b9c4b7}.status-dot.active{background:#578d71;box-shadow:0 0 0 4px #578d7112}.status-dot.recording{background:var(--red);animation:pulse 1.4s infinite}.track-status>div{min-width:0}.track-status strong{font-size:12px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:350px}.track-status span:not(.status-dot){display:block;font-size:10px;color:#89968a;margin-top:2px}.icon-button{background:none;border:0;padding:0;width:28px;height:28px;flex-shrink:0;font-size:20px;line-height:1}.track-status .icon-button{margin-left:auto;color:#8d9e90}.pitch-control{display:flex;align-items:center;justify-content:center;gap:35px;margin:25px 0 20px}.pitch-step{width:45px;height:45px;border:1px solid #dce5d9;background:white;border-radius:50%;font-size:26px;color:var(--green);font-weight:300;line-height:1}.pitch-step:hover:not(:disabled){background:var(--soft)}.pitch-value{min-width:110px;text-align:center}.pitch-value output{display:block;font-size:80px;font-weight:350;letter-spacing:-4px;line-height:1.12;font-variant-numeric:tabular-nums}.pitch-value>span{font-size:11px;color:var(--muted);display:block;margin-top:8px}.pitch-slider{padding:0 3px}.pitch-slider input{width:100%;height:4px;cursor:pointer;display:block;margin:12px 0}.pitch-slider>div{display:flex;justify-content:space-between;align-items:center;color:#9ba79d;font-size:10px}.pitch-slider button{background:none;border:0;padding:0 8px;font-size:10px;color:#698575}.pitch-presets{display:flex;justify-content:center;gap:7px;margin:22px 0 24px}.pitch-presets button{border:1px solid #e2e9df;background:white;border-radius:7px;min-width:36px;height:30px;font-size:11px;font-variant-numeric:tabular-nums}.pitch-presets .selected{background:var(--soft);border-color:#b6cbb9;color:#35654c;font-weight:700}.quality-row{border-top:1px solid #edf0e9;padding:18px 0 17px;display:flex;align-items:center;justify-content:space-between}.quality-row strong{display:block;font-size:12px;font-weight:600}.quality-row>div>span{display:block;font-size:10px;color:#929e92;margin-top:2px}.switch{position:relative;width:32px;height:19px;display:inline-block;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch>span:not(.sr-only){position:absolute;inset:0;background:#c4cec1;border-radius:20px;cursor:pointer}.switch>span:not(.sr-only):before{content:"";position:absolute;height:13px;width:13px;left:3px;top:3px;border-radius:50%;background:white;transition:transform .15s}.switch input:checked+span{background:var(--green)}.switch input:checked+span:before{transform:translateX(13px)}.switch:focus-within{outline:3px solid #93bdb2;outline-offset:4px;border-radius:20px}.volume-row{display:flex;gap:10px;align-items:center}.volume-row input{flex:1;min-width:50px;height:3px}.volume-row output{font-size:10px;min-width:28px;color:#839080;font-variant-numeric:tabular-nums}.volume-row .icon-button{font-size:20px;color:#6c826a}.meter{width:48px;height:5px;background:#e6ece1;border-radius:3px;overflow:hidden;margin-left:7px}.meter>span{display:block;height:100%;background:#7da879;width:0;transition:width .12s}.quality-note{display:flex;gap:9px;margin-top:22px;color:#98a58f;font-size:15px}.quality-note p{font-size:10px;color:#7c8e79;margin:0;line-height:1.9}.quality-note small{font-size:9px;color:#a4afa1}.transport{display:flex;align-items:center;gap:8px;margin:0 0 13px}.transport span{font-size:10px;font-variant-numeric:tabular-nums;color:#82917f}.transport input{min-width:40px;flex:1;height:3px}.round-play{width:28px;height:28px;background:var(--soft);border:0;border-radius:50%;font-size:11px;color:var(--green)}.drop-zone{height:234px;border:1px dashed #becdb6;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:24px 0 18px;cursor:pointer;text-align:center;gap:8px}.drop-zone:hover,.drop-zone.dragover{background:#e4eddc;border-color:var(--green)}.file-icon{font-size:38px;color:#6f8e72;margin-bottom:3px}.drop-zone strong{font-size:13px;font-weight:600}.drop-zone>span:not(.file-icon){font-size:11px;color:#81947e}.drop-zone small{font-size:10px;color:#98a391;line-height:1.8;margin-top:8px}.save-panel{background:#fff;border:1px solid var(--line);border-radius:16px;margin-top:20px;padding:25px 28px 18px}.save-top{display:flex;justify-content:space-between;align-items:center}.wav-badge{font-size:10px;color:#879782;background:#f3f6ee;border-radius:5px;padding:4px 8px}.save-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:32px;margin-top:20px}.record-section{border-right:1px solid #edf0e8}.record-section>p{font-size:11px;color:var(--muted);margin:0 0 11px}.record-actions{display:flex;align-items:center;gap:16px}.record{background:#fbf6f1;color:#916551;border-color:#eee4d8;padding:9px 14px}.record-dot{width:7px;height:7px;background:#bf7760;border-radius:50%}.record.is-recording{background:#b75a4e;color:white;border-color:#b75a4e}.record.is-recording .record-dot{background:white;border-radius:1px;animation:pulse 1.4s infinite}#record-time{font-size:19px;font-weight:300;color:#80917f;font-variant-numeric:tabular-nums}.record-section>small{font-size:9px;color:#a0ab99;display:block;margin-top:10px}.export-section{display:flex;align-items:flex-end;gap:12px}.export-fields{display:flex;gap:10px;flex:1;min-width:0}.export-fields label{font-size:10px;color:#8b9787;flex:1;min-width:0}.export-fields select{display:block;width:100%;border:1px solid #e1e7da;border-radius:7px;background:#fcfdf9;font-size:10px;color:#657b5e;padding:10px 5px;margin-top:7px;height:39px}.dark{color:white;background:#344b3a;padding:11px 15px;white-space:nowrap;height:39px}.save-footnote{font-size:9px;color:#a4ad9d;border-top:1px solid #f0f2ed;padding-top:12px;margin:18px 0 0}.render-progress{padding-top:18px}.render-progress>div{display:flex;justify-content:space-between;font-size:11px;color:var(--green)}.render-progress button{background:none;border:0;font-size:11px;color:#a27364}.render-progress progress{width:100%;height:5px;margin-top:9px}.capture-note{font-size:10px;color:#9aa593;text-align:center;margin:20px 0 35px;line-height:1.8}.capture-note strong{font-weight:600;color:#7b8f72}.notice{border:1px solid #d3e1cb;background:#eff5e9;border-radius:10px;padding:13px 18px;font-size:12px;margin-top:16px;white-space:pre-line}.notice.error{border-color:#edcdc0;background:#fff4ef;color:#9b604c}footer{display:flex;justify-content:space-between;color:#a8b1a0;font-size:10px;padding:0 0 30px;gap:15px}.footer-dot{padding:0 6px;color:#c3cbbd}.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.guide{max-width:800px;margin:50px auto;padding:0 30px 60px}.guide h1{font-size:30px}.guide h2{font-size:18px;margin:32px 0 12px}.guide p,.guide li{font-size:14px;color:#697e70}.guide li{margin:10px 0}.guide a{color:var(--green);text-decoration:underline}.guide code{background:#e7eee1;padding:2px 5px;border-radius:3px;font-size:12px}@keyframes pulse{50%{opacity:.4}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:1000px){.app-shell{padding:0 30px}.workspace{grid-template-columns:300px 1fr}.studio-panel{padding:29px 24px 25px}.source-panel{padding:29px 22px}.save-grid{grid-template-columns:1fr;gap:18px}.record-section{border:0;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.record-section p,.record-section small{margin:0}.export-section{border-top:1px solid #edf0e8;padding-top:16px}.track-status strong{max-width:270px}}@media(max-width:700px){.app-shell{padding:0 18px}.masthead{height:86px;gap:14px}.brand{font-size:23px}.local-badge{font-size:10px}.help-link{font-size:10px}.intro{padding:32px 3px 24px}h1{font-size:31px}.lead{font-size:12px}.workspace{grid-template-columns:1fr}.source-panel{border-right:0;border-bottom:1px solid var(--line);padding:23px}.record-art{height:130px}.disc{width:115px;height:115px}.disc-shine{width:115px;height:115px}.disc-label{width:54px;height:54px;font-size:6px}.source-description br{display:none}.source-tabs{margin-top:16px}.studio-panel{padding:23px}.pitch-value output{font-size:73px}.pitch-control{margin:22px 0}.save-panel{padding:21px}.save-grid{gap:17px}.record-section{gap:12px}.record-section>p{width:100%}.export-section{flex-wrap:wrap}.export-fields{width:100%;flex:auto}.export-section>.button{width:100%}.wav-badge{font-size:8px}.save-footnote{line-height:1.9}footer{font-size:8px;flex-wrap:wrap}.track-status strong{max-width:calc(100vw - 180px)}.capture-note{font-size:9px}.mobile-break{display:block}.drop-zone{height:210px}}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;z-index:2;cursor:pointer}
/* Native Android live controls share the studio's existing form styles. */
.android-help { margin: 14px 0; text-align: left; font-size: 12px; line-height: 1.7; color: #526158; }
.android-help summary { cursor: pointer; font-weight: 700; }
.android-help ol { padding-left: 20px; }
.android-help li { margin: 7px 0; }
#android-source { width: 100%; margin-bottom: 8px; }
#android-bugs { margin-top: 8px; }
.brand { font-size: 22px; }
.brand small { display: block; margin: 0; font-size: 9px; letter-spacing: 2px; }
.source-panel h3 { margin-top: 22px; }
.source-panel select { border: 1px solid var(--line); background: white; border-radius: 8px; padding: 10px; color: var(--ink); }
.track-list { margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.track-list { background: white; }
.track-list > .panel-heading { padding: 17px 14px; margin: 0; border-bottom: 1px solid var(--line); justify-content: space-between; }
.track-list > .panel-heading .vocal-note { margin: 0; }
.track-row { padding: 12px; border-bottom: 1px solid var(--line); }
.track-row:last-child { border-bottom: 0; }
.track-row.selected { background: #f0f5ef; }
.track-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.track-row-heading span { color: var(--muted); font-size: 10px; }
.track-row .transport { margin: 0; }
.round-play { width: 36px; height: 36px; flex-shrink: 0; }
#record-open { margin: 0; font-size: 11px; }
@media(max-width:700px) { .brand { font-size: 18px; } .local-badge { display: none; } .intro { padding-top: 23px; } .intro h1 { font-size: 27px; } .source-panel, .studio-panel { padding: 20px; } }