@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f4f4f4;--ink:#282828;--muted:#7e7e7e;--accent:#dfdfdf;--line:#dedede}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}header{max-width:1380px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:31px;font-weight:700;letter-spacing:-2px;text-decoration:none;color:var(--ink)}.mark{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--accent);width:34px;height:34px;border-radius:50%;margin-right:10px;font-size:28px}.dot{color:#000}.tag,.private,.eyebrow,.section-label,.small,.profile-head,footer{font-size:10px;letter-spacing:1.5px}.private{letter-spacing:.2px;font-size:12px;color:#5f5f5f}main{max-width:1170px;padding:52px 35px 0;margin:auto}.eyebrow{color:#7d7d7d;margin-bottom:20px}h1{font-family:Manrope,sans-serif;font-size:clamp(44px,5.2vw,70px);font-weight:500;line-height:1.09;letter-spacing:-3.5px;margin:0}h1 em{font-family:Georgia,serif;font-weight:400} .intro{color:var(--muted);font-size:15px;line-height:1.8;margin:22px 0 32px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{border:1px solid var(--line);border-radius:18px;padding:25px;background:#fcfcfc;min-width:0}.section-label{display:flex;justify-content:space-between;color:#808080;font-size:9px}.drop{border:1px dashed #c8c8c8;border-radius:12px;margin-top:26px;padding:26px 15px;display:flex;flex-direction:column;align-items:center;cursor:pointer;background:#f7f7f7;transition:.2s}.drop:hover,.drop.drag{background:#f1f1f1;border-color:#868686}.upload-icon{font-size:33px;display:grid;place-items:center;background:#ececec;width:55px;height:55px;border-radius:50%;margin-bottom:15px}.drop strong{font-size:17px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drop>span:not(.upload-icon){font-size:12px;color:var(--muted);margin-top:7px}.drop .formats{font-size:9px!important;letter-spacing:1px;margin-top:22px!important}button{font:inherit;cursor:pointer;border:0}#analyze{margin-top:19px;padding:17px 20px;border-radius:9px;width:100%;background:var(--ink);color:var(--accent);text-align:left;font-size:14px;display:flex;justify-content:space-between}#analyze:disabled{opacity:.4;cursor:default}.text-button{display:block;background:none;font-size:12px;color:#6b6b6b;margin:18px auto 0}.text-button span{padding-left:8px}.status{text-align:center;font-size:10px;line-height:1.6;color:var(--muted);min-height:16px;margin:18px 0 0}.result{background:#ededed;position:relative}#empty{text-align:center;padding:29px 0 40px}.record{width:162px;height:162px;border-radius:50%;background:repeating-radial-gradient(circle,#dddddd 0px,#dddddd 1px,#e9e9e9 2px,#e9e9e9 5px);display:grid;place-items:center;margin:0 auto 27px;box-shadow:0 8px 24px #69696917}.record-label{width:61px;height:61px;border-radius:50%;background:var(--accent);border:1px solid #cacaca;display:grid;place-items:center;font-size:36px}#empty h2{font-size:19px;letter-spacing:-.5px;font-weight:500}#empty p{font-size:12px;color:var(--muted)}.key-line{display:flex;justify-content:space-between;align-items:center;margin-top:38px}.small{color:#7d7d7d;font-size:9px}#key{font-family:Manrope,sans-serif;font-size:43px;letter-spacing:-2px;font-weight:500;margin:8px 0}.camelot{border:1px solid #cecece;border-radius:10px;padding:13px;text-align:center}.camelot strong{display:block;font-size:25px}.camelot span{font-size:8px;letter-spacing:1px}.certainty{font-size:12px;color:#6d6d6d;margin:10px 0 27px}.profile-head{display:flex;justify-content:space-between;font-size:8px;color:#818181}.bars{display:flex;align-items:end;gap:6px;height:95px;padding-top:12px}.bar{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:6px}.bar i{background:#b2b2b2;width:100%;border-radius:3px 3px 0 0;min-height:2px}.bar span{font-size:8px;color:#767676}.alternatives{margin-top:24px;border-top:1px solid #d6d6d6;padding-top:16px}#alternatives{display:flex;gap:8px;margin-top:9px}#alternatives span{padding:7px 10px;background:#f6f6f6;border-radius:5px;font-size:12px}.note{font-size:10px;line-height:1.6;color:#808080;margin-top:15px}footer{display:flex;justify-content:space-between;color:#8d8d8d;font-size:8px;border-top:1px solid var(--line);margin-top:38px;padding:23px 0 28px}footer span:nth-child(2){letter-spacing:0;font-size:11px}.file-detail{margin-top:12px}.file-detail canvas{width:100%;height:65px}audio{width:100%;height:35px}button:focus-visible,.drop:focus-visible{outline:3px solid #9f9f9f;outline-offset:4px}[hidden]{display:none!important}@media(min-width:1000px){main{position:relative}.intro{position:absolute;right:65px;top:118px}}@media(max-width:700px){header{padding:20px}.tag{display:none}main{padding:35px 20px 0}.workspace{grid-template-columns:1fr}h1{letter-spacing:-2px}.intro{margin-bottom:25px}.panel{padding:22px}footer span:nth-child(2){display:none}}

.evidence{font-size:11px;color:#6d6d6d;line-height:1.6;margin:-12px 0 22px}.evidence p{margin:5px 0}

#failure{padding:65px 5px;line-height:1.8}#failure h2{font-size:23px}#failure p{font-size:13px;color:#6d6d6d}footer a{color:inherit}

.focus-option{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:12px;cursor:pointer}.focus-option input{accent-color:#636363;width:17px;height:17px}.focus-option small{display:block;color:#808080;font-size:10px;margin-top:4px}

.selection{border:0;border-top:1px solid var(--line);margin:20px 0 0;padding:15px 0 0;min-width:0}.selection legend{font-size:12px;padding:0 8px 0 0;color:#5f5f5f}.selection>label,.range-inputs label{font-size:11px;color:#5f5f5f;display:block}.selection select,.selection input{font:inherit;font-size:13px;color:var(--ink);background:#fff;border:1px solid #c8c8c8;border-radius:6px;padding:9px;width:100%;margin-top:7px}.range-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}.selection-help,.range-error{font-size:11px;line-height:1.6}.selection-help{color:#6d6d6d}.range-error{color:#8d3c20;margin-bottom:0}.selection:disabled{opacity:.6}.analyzed-range{font-size:11px;color:#5d5d5d;margin:-14px 0 24px}#alternatives{flex-wrap:wrap}#alternatives span{flex:1 1 135px}#alternatives strong{font-weight:500;display:block}#alternatives small{display:block;color:#6d6d6d;font-size:9px;line-height:1.5;margin-top:4px}.result-actions{display:flex;gap:12px;flex-wrap:wrap}.result-actions button{margin:16px 0 0;font-size:11px}.drop[aria-disabled="true"]{opacity:.65;cursor:wait}select:focus-visible,input:focus-visible{outline:3px solid #9f9f9f;outline-offset:2px}

/* Compact introduction after the branding refresh. */
.finder .intro{position:static;margin:0 0 28px}

/* One compact workspace: key and comparisons first, supporting detail on demand. */
.finder header{padding:18px 5%}.finder .tag{display:none}.finder main{max-width:820px;padding:24px 20px 0}.finder .workspace{display:block;border:1px solid var(--line);border-radius:16px;background:#fcfcfc;overflow:hidden}.finder .panel{border:0;border-radius:0;background:none;padding:18px 22px}.finder .upload{padding-bottom:12px}.finder .section-label{justify-content:flex-end;font-size:8px}.finder .drop{margin-top:10px;padding:13px 16px;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:2px;text-align:left;background:#f7f7f7}.finder .upload-icon{grid-row:1/4;width:36px;height:36px;font-size:23px;margin:0}.finder .drop strong{font-size:15px}.finder .drop>span:not(.upload-icon){margin-top:0;font-size:11px}.finder .drop .formats{margin-top:3px!important;font-size:8px!important}.finder .file-detail{margin-top:8px}.finder .file-detail canvas{height:24px;display:block}.finder audio{height:32px;margin-top:4px}.finder .status{margin:8px 0 0;font-size:10px;min-height:0}.finder .result{border-top:1px solid var(--line);padding-top:12px}.finder .key-line{margin-top:10px}.finder #key{font-size:40px;margin:3px 0}.finder .camelot{padding:8px 12px}.finder .certainty{margin:4px 0 14px;font-size:11px}.finder .alternatives{margin-top:12px;padding-top:10px}.finder #alternatives{gap:6px;margin-top:6px}.finder #alternatives span{flex:1 1 110px;padding:6px 8px;font-size:12px}.finder .result-actions{gap:18px}.finder .result-actions button{margin-top:12px}.finder .note{margin:9px 0 0}.analysis-details{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}.analysis-details summary{font-size:11px;cursor:pointer;color:#666}.analysis-details .evidence{margin:12px 0 16px}.finder #empty{padding:15px 0 20px}.finder .record{width:90px;height:90px;margin-bottom:12px}.finder .record-label{width:45px;height:45px}.finder #empty h2{margin:8px 0}.finder #empty p{margin:5px 0}.finder #failure{padding:15px 0}.finder footer{margin-top:16px;padding:14px 0}@media(max-width:700px){.finder header{padding:16px 20px}.finder main{padding:14px 12px 0}.finder .panel{padding-left:16px;padding-right:16px}.finder .brand{font-size:29px}.finder .private{font-size:10px}.finder .section-label{letter-spacing:1px}.finder .drop strong{font-size:14px}.finder .note{font-size:9px}.finder footer{font-size:7px}.finder #key{font-size:36px}} 

@media(max-width:400px){.finder #alternatives span{flex-basis:85px;min-width:0}.finder #alternatives small{font-size:8px}.finder .panel{padding-left:13px;padding-right:13px}.finder .status{font-size:9px}}

/* Subtle idle expression; transforms keep the layout stationary. */
#empty .record-label svg{animation:smiley-idle 5s ease-in-out infinite;transform-origin:center}
#empty .smiley-eye{transform-box:fill-box;transform-origin:center;animation:smiley-blink 7s ease-in-out infinite}
@keyframes smiley-idle{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes smiley-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@media(prefers-reduced-motion:reduce){#empty .record-label svg,#empty .smiley-eye{animation:none}}

.smiley-gaze{transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));transition:transform 160ms ease-out}
.upload-arrow{display:block}
@media(hover:hover) and (pointer:fine){#drop:hover .upload-arrow{animation:upload-lift 1.2s ease-in-out infinite}}
@keyframes upload-lift{0%,45%,100%{transform:translateY(0)}18%{transform:translateY(-6px)}32%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.smiley-gaze{transform:none;transition:none}.upload-arrow{animation:none}}

/* A soft bevel without changing the neutral palette or overall size. */
.finder .record-label{background:linear-gradient(145deg,#ededed,#d5d5d5);box-shadow:inset 1px 2px 3px #ffffffb3,inset -1px -2px 3px #0000000c,0 2px 4px #0000000a}
@media(prefers-reduced-motion:reduce){#drop:hover .upload-arrow{animation:none}}

#processing{max-width:320px;margin:17px auto 0;padding:0 12px}#analysisProgress{display:block;width:100%;height:5px;border:0;border-radius:10px;overflow:hidden;accent-color:#626262;background:#e5e5e5}#analysisProgress::-webkit-progress-bar{background:#e5e5e5;border-radius:10px}#analysisProgress::-webkit-progress-value{background:#626262;border-radius:10px;transition:width .25s ease}#analysisProgress::-moz-progress-bar{background:#626262;border-radius:10px}.finder #progressStage{font-size:10px;color:#777;margin:8px 0 0}#analysisProgress:indeterminate{background:linear-gradient(90deg,#e5e5e5,#999,#e5e5e5);background-size:200% 100%;animation:progress-wait 1.6s ease-in-out infinite}#analysisProgress:indeterminate::-webkit-progress-bar{background:transparent}@keyframes progress-wait{0%,100%{background-position:100% 0}50%{background-position:0 0}}@media(prefers-reduced-motion:reduce){#analysisProgress{transition:none}#analysisProgress:indeterminate{animation:none}}

.tempo-readout{text-align:center;min-width:66px;margin-left:auto;margin-right:16px}.tempo-readout strong{display:block;font-family:Manrope,sans-serif;font-size:29px;letter-spacing:-1px;font-weight:500;margin-top:3px}.tempo-note{font-size:10px;line-height:1.6;color:#777;margin:0 0 12px}.finder .key-line{gap:10px}.finder .key-line>div:first-child{min-width:0}.finder .key-line #key{overflow-wrap:anywhere}@media(max-width:400px){.tempo-readout{min-width:48px;margin-right:0}.tempo-readout strong{font-size:24px}.finder #key{font-size:30px}.finder .camelot{padding:7px}.finder .key-line{gap:7px}}

.finder footer{gap:12px;flex-wrap:wrap}.finder footer span:last-child{display:inline;font-size:8px;letter-spacing:1.5px}

.bpm-alias{display:block;margin-top:4px;color:#737373;font-size:12px;line-height:1.3;font-weight:400;white-space:nowrap}.bpm-alias[hidden]{display:none}