:root{--ink:#183b35;--muted:#53685e;--cream:#f7f5ee;--orange:#c65030;--line:#d9ded3;--surface:#e8ecdf;--radius:20px}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.5 system-ui,-apple-system,sans-serif}button,input,select{font:inherit}button,a,summary,select{-webkit-tap-highlight-color:transparent}button,summary{cursor:pointer}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--orange);outline-offset:3px}a{color:var(--ink)}p{color:var(--muted)}button,select,input,summary{min-height:48px}button{border-radius:12px}header{max-width:920px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}header>a{font-size:24px;font-weight:800;text-decoration:none;display:flex;align-items:center;gap:8px;min-height:48px}.logo{background:var(--ink);color:white;border-radius:10px;padding:0 9px}.settings{position:relative}.settings summary{display:flex;align-items:center;font-size:14px;padding:8px}.settings[open] button{position:absolute;right:0;top:100%;white-space:nowrap;background:white;border:1px solid var(--line);z-index:3;padding:12px 18px}main{max-width:760px;padding:0 24px;margin:24px auto 64px}h1{font-size:clamp(36px,7vw,58px);line-height:1.1;letter-spacing:-1.8px;margin:12px 0 16px}h1.small{font-size:clamp(30px,5vw,42px);letter-spacing:-1px}h2{font-size:23px;line-height:1.25;letter-spacing:-.5px}h3{font-size:20px;line-height:1.3}em{font:italic 1em Georgia,serif;color:var(--orange)}.eyebrow{font-size:12px;font-weight:750;letter-spacing:1.3px}.intro{font-size:17px;max-width:520px;margin:12px 0 20px}.primary,.secondary{padding:12px 20px;font-weight:650;border:1px solid transparent}.primary{background:var(--ink);color:white}.secondary{background:transparent;color:var(--ink);border-color:#a8b8a9}.text{background:none;border:0;color:var(--ink);padding:10px 12px}.small-note,.disclosure,.match-note{font-size:14px;line-height:1.5}.disclosure{margin:20px 0}.welcome{text-align:center;max-width:560px;margin:auto}.welcome img{display:block;width:144px;height:144px;object-fit:contain;margin:0 auto 4px}.welcome .intro{margin:16px auto 24px}.welcome .primary{min-width:240px}.welcome .small-note{margin:10px 0 0}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:36px 0 24px;padding-top:24px;border-top:1px solid var(--line)}.steps b{background:var(--surface);border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:14px}.steps h3{font-size:17px;margin:10px 0 6px}.steps p{font-size:14px;margin:0}.about{border-bottom:1px solid var(--line)}summary{padding:12px 0;font-size:14px;color:var(--muted)}.about p{font-size:14px;margin:0 0 16px}#assessment{max-width:560px;margin:auto}.assessment-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}.assessment-nav .text{padding-left:0}.scale-example{margin:12px 0}.scale-example button{width:100%}.scale-example p{margin:8px 0}.meter-card{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;column-gap:12px;background:var(--surface);border-radius:var(--radius);padding:16px;margin:16px 0}.pip{grid-column:1;grid-row:1/5;margin:0;width:128px;height:128px}.pip img{display:block;width:100%;height:100%;object-fit:contain}.live-note{font-size:34px;font-weight:750;line-height:1.2}#mic-state{font-size:13px;font-weight:650}#mic-state.active{color:#9b3825}#freq{font-size:13px}.trace{height:24px;display:flex;gap:3px;align-items:center;overflow:hidden;justify-content:center}.trace i{background:var(--orange);width:4px;min-width:4px;border-radius:3px}progress{grid-column:1/-1;width:100%;height:6px;accent-color:var(--orange);margin-top:12px}#status{grid-column:1/-1;font-size:14px;min-height:21px;margin:8px 0 0}.actions{display:flex;gap:10px}.actions .primary{flex:1}#confirmation{padding:18px;border-radius:var(--radius);background:var(--surface)}#confirmation h2{font-size:20px;margin:0 0 8px}#confirmation button{margin:6px 4px 0 0}#sample-summary{font-size:14px}.results-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.results-heading img{object-fit:contain;flex:none}.results-heading h1{margin-bottom:18px}.profile{background:var(--surface);padding:16px 20px;border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.profile span{font-size:14px}.profile h2{font-size:26px;margin:4px 0 0}.catalog-head h2{font-size:21px;margin:24px 0 12px}.view-buttons{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:14px;margin-bottom:16px}.view-buttons button{flex:1;min-width:0;border:0;padding:10px;font-size:14px}.view-buttons button[aria-pressed=true]{background:var(--ink);color:white}.browse-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:start}.song-search{flex:1;min-width:160px}input[type=search],select{width:100%;border:1px solid #a8b8a9;border-radius:10px;padding:10px;background:transparent;color:var(--ink);min-width:0}#filter-panel{min-width:88px}#filter-panel>summary{border:1px solid #a8b8a9;border-radius:10px;padding:12px;color:var(--ink)}#filter-panel[open]{flex-basis:100%;background:var(--surface);padding:12px;border-radius:14px}#filter-panel[open]>summary{border:0;padding:0 0 10px}.catalog-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalog-filters label{font-size:14px}.catalog-filters select{display:block;margin-top:4px}.voice-filters{border:0;padding:0;margin:16px 0 0;display:flex;gap:6px;flex-wrap:wrap}.voice-filters legend{font-size:14px;margin-bottom:8px}.voice-filters label{position:relative;cursor:pointer}.voice-filters input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.voice-filters span{display:block;border:1px solid #a8b8a9;border-radius:10px;padding:12px;font-size:14px;min-height:48px}.voice-filters input:checked+span{background:var(--ink);color:white}.voice-filters input:focus-visible+span{outline:3px solid var(--orange);outline-offset:3px}.filter-hint{font-size:14px;margin:10px 0}#song-count{font-size:14px;font-weight:650;margin:16px 0 4px}.match-note{margin:0 0 16px}.song{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fffefa;margin:0 0 14px}.number{display:none}.song h3{margin:0 0 5px;padding-right:56px}.song p{font-size:14px;margin:6px 0;overflow-wrap:anywhere}.song .artist{margin-bottom:12px}.song .tag{display:inline-block;background:var(--surface);padding:6px 10px;border-radius:8px;font-size:14px;font-weight:650;margin:8px 0}.song .key-advice{color:var(--ink);font-size:16px}.song-actions{display:flex;align-items:center;gap:12px;margin-top:16px}.song-actions a{display:flex;align-items:center;min-height:48px;text-decoration:none;font-size:14px;font-weight:650;padding:10px 14px;border:1px solid #a8b8a9;border-radius:10px}.save{position:absolute;right:14px;top:14px;width:48px;height:48px;border:1px solid var(--line);background:transparent;font-size:23px;color:var(--ink)}.save.selected{background:var(--ink);color:white}.song-details{margin-top:8px}.song-details summary{min-height:48px}.range-source{display:inline-flex;align-items:center;min-height:48px;font-size:14px}.song-feedback{border:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}.song-feedback legend{font-size:14px;padding-top:12px}.song-feedback button{padding:10px;background:transparent;border:1px solid #a8b8a9;color:var(--ink);font-size:14px}.song-feedback button[aria-pressed=true]{background:var(--ink);color:white}.feedback-note{flex-basis:100%}.notice{background:var(--surface);padding:20px;border-radius:14px}#more-songs{width:100%;margin-top:8px}#saved-status:empty{display:none}#saved-status{font-size:14px}footer{max-width:920px;margin:auto;padding:20px 24px;border-top:1px solid var(--line);display:flex;gap:16px;justify-content:space-between;font-weight:750}footer span{font-size:13px;font-weight:400;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pip.is-listening img:not([hidden]){transform-origin:50% 85%;animation:pip-happy-listen 2.4s ease-in-out infinite}@keyframes pip-happy-listen{0%,100%{transform:translateY(0) rotate(0)}15%{transform:translateY(-3px) rotate(-4deg)}30%{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-5px) rotate(3deg)}60%{transform:translateY(0) rotate(4deg)}78%{transform:translateY(-3px) rotate(-2deg)}}@media(prefers-reduced-motion:reduce){.pip.is-listening img:not([hidden]){animation:none;transform:none}}@media(max-width:480px){header{padding:10px 16px}main{padding:0 16px;margin:14px auto 40px}.welcome img{width:112px;height:112px}.steps{grid-template-columns:1fr;gap:16px;margin-top:24px}.steps article{display:grid;grid-template-columns:28px 1fr;gap:0 12px}.steps b{grid-row:1/3}.steps h3{margin:0 0 4px}.steps p{grid-column:2}.results-heading img{width:72px;height:72px}.profile{padding:12px 14px}.song{padding:16px}.catalog-head h2{margin-top:20px}.meter-card{grid-template-columns:104px minmax(0,1fr);padding:12px;gap:6px 10px}.pip{width:104px;height:104px}footer{padding:18px 16px}footer span{max-width:180px;text-align:right}}@media(max-width:340px){.catalog-filters{grid-template-columns:1fr}.results-heading img{width:56px;height:56px}.profile h2{font-size:23px}.view-buttons button{font-size:13px}.meter-card{grid-template-columns:88px minmax(0,1fr)}.pip{width:88px;height:88px}}

/* Keep results announcements accessible without a visible summary block. */
#song-count.sr-only{margin:-1px}#song-list{margin-top:16px}

.song-feedback{flex-wrap:nowrap;gap:6px}.song-feedback legend.sr-only{padding:0}.song-feedback button{flex:1;min-width:0;padding:10px 6px;font-size:14px}
@media(max-width:340px){.song-feedback button{font-size:13px;padding:10px 3px}}

.voice-highlight{padding:16px 4px}.voice-highlight h2{font-size:19px;margin:0 0 6px}.voice-highlight p{font-size:15px;margin:0}.assessment-choice{margin:16px 0}.assessment-choice label{flex:1}.assessment-choice span{text-align:center;padding:12px 6px}.assessment-choice .small-note{flex-basis:100%;margin:4px 0}


/* Persistent library navigation, with room for phone home indicators. */
.bottom-menu{position:fixed;z-index:10;bottom:0;left:0;right:0;max-width:760px;margin:0 auto;gap:0;padding:4px 16px calc(4px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:#f7f5ee;box-shadow:0 -4px 18px #183b350a}
.bottom-menu button{position:relative;min-height:48px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:16px;line-height:1.25;font-weight:500;padding:12px 8px}.bottom-menu button[aria-pressed=true]{background:transparent;color:var(--ink);font-weight:700}.bottom-menu button[aria-pressed=true]::after{content:"";position:absolute;bottom:3px;left:calc(50% - 12px);width:24px;height:3px;border-radius:3px;background:var(--ink)}
body.has-bottom-menu{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
html{scroll-padding-bottom:calc(80px + env(safe-area-inset-bottom))}
.catalog-head{scroll-margin-top:16px}

#karaoke-title:focus{outline:none}

.key-confirm{margin-top:12px;padding:12px;background:var(--surface);border-radius:12px}.key-confirm label{display:grid;gap:8px;font-size:14px;font-weight:650}.key-confirm select{width:100%;min-height:48px;font:inherit}.key-confirm button{min-height:48px}.forget-feedback{font-size:13px}.pip-reaction{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:440px;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f3f4e9;border:1px solid #bec9b8;border-radius:16px;box-shadow:0 4px 20px #193a2520;font-size:14px;color:var(--ink)}.pip-reaction[hidden]{display:none}.pip-reaction img{flex:none;width:48px;height:48px;object-fit:contain}.pip-reaction span{flex:1}.pip-reaction button{flex:none;width:44px;min-height:44px;padding:0;background:transparent;color:var(--ink);font-size:24px}.pip-hop{animation:pip-hop .75s ease-out}@keyframes pip-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-8px) rotate(-7deg)}65%{transform:translateY(0) rotate(5deg)}}@media(prefers-reduced-motion:reduce){.pip-hop{animation:none}}
.catalog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.catalog-head h2{flex:1}.catalog-head #new-mix{flex:none;min-height:44px;font-size:14px;white-space:nowrap;padding:8px 0}
.genre-preferences{margin:0 0 16px;text-align:left;border-bottom:1px solid var(--line)}.welcome .genre-preferences{max-width:400px;margin:16px auto}.genre-preferences summary{font-size:14px;color:var(--ink);min-height:44px;line-height:1.5}.genre-chips{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:4px 0}.genre-chips legend{font-size:16px;font-weight:650;margin-bottom:12px}.genre-chips button{min-height:44px;padding:8px 14px;border:1px solid #a8b8a9;border-radius:24px;background:white;color:var(--ink);font-size:14px}.genre-chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.genre-chips button:disabled{cursor:default}.genre-status{margin:10px 0 0}.genre-preferences>.text{font-size:14px;padding-left:0}.pin-song{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:24px;background:transparent;color:var(--ink);font-size:14px;font-weight:600}.pin-song[aria-pressed=true]{background:#f8e4cc;border-color:#d6af83}.pin-song::before{content:'↑';font-size:17px}

/* Direction A: warm ivory, forest teal and purposeful apricot accents. */
:root{--cream:#faf8f2;--surface:#eef2e8;--line:#e3e4dc;--apricot:#f8e4cc;--card:#fff;--radius:18px}
h1,h2,h3{font-family:ui-rounded,'SF Pro Rounded',system-ui,-apple-system,sans-serif}
header{max-width:808px}main{margin-top:16px}.logo{background:transparent;color:var(--ink);padding:0;font-size:30px}
.results-heading{justify-content:flex-start;gap:16px;margin:4px 0 12px}.results-heading img{width:100px;height:100px}.results-heading-copy{flex:1;min-width:0}.results-heading h1.small{font-size:32px;line-height:1.08;letter-spacing:-1px;margin:0 0 8px}
.profile{background:none;padding:0;border-radius:0;justify-content:flex-start;gap:4px 8px;flex-wrap:wrap}.profile span{font-size:13px}.profile h2{font-size:16px;margin:0;letter-spacing:0}.profile #retest{font-size:13px;min-height:44px;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.voice-highlight{padding:0 0 18px}.voice-highlight h2{font-size:16px;margin-bottom:4px}.voice-highlight p{font-size:14px;line-height:1.45}
.browse-tools{gap:8px}.song-search{min-width:130px}input[type=search]{background:#f0f1ef;border-color:transparent;border-radius:12px;padding:12px}#filter-panel>summary{border-color:#c6cec6;background:var(--card);border-radius:12px}
#results>.genre-preferences{margin:8px 0 0;border-bottom:0}.genre-preferences summary{font-weight:600}.genre-chips button[aria-pressed=true]{color:var(--ink);background:var(--apricot);border-color:#bb8b59}.genre-chips button[aria-pressed=true]::before{content:'✓ ';font-weight:700}
.catalog-head{margin:12px 0 0}.catalog-head h2{font-size:19px;margin:8px 0}.catalog-head #new-mix{padding:8px 14px;border-radius:18px;background:var(--apricot);font-weight:650}#song-list{margin-top:12px}
.song{background:var(--card);border-color:#ecebe4;box-shadow:0 3px 12px #183b3505;padding:18px}.song h3{font-size:21px;letter-spacing:-.4px}.song .artist{margin-bottom:10px}.song .tag{display:block;background:var(--apricot);color:var(--ink);padding:8px 12px;border-radius:10px;margin:10px 0 6px;line-height:1.4}.song .key-advice{font-size:15px;font-weight:550;margin:6px 0 10px}.save{border:0;background:transparent;border-radius:14px}.save.selected{background:var(--apricot);color:var(--ink)}.song-feedback{border-top:0;padding-top:4px;margin-top:10px}.song-feedback button{background:white;border-color:#c6cec6;border-radius:12px}.song-feedback button[aria-pressed=true]{background:var(--ink);color:white}.pin-song{margin-top:8px}
.meter-card{background:#fff3e4;border:1px solid #f0e4d4}.steps b{background:var(--apricot)}.notice,.key-confirm{background:var(--surface)}.pip-reaction{background:#fff7ec;border-color:#e5c9aa}.bottom-menu{background:#fffdf8;border-top-color:var(--line);box-shadow:0 -4px 16px #183b3505}footer{border-top-color:var(--line)}
@media(max-width:480px){.results-heading{gap:12px}.results-heading img{width:84px;height:84px}.results-heading h1.small{font-size:29px}.song{padding:16px}.voice-highlight{padding-bottom:14px}}
@media(max-width:340px){.results-heading img{width:84px;height:84px}.results-heading h1.small{font-size:26px}.profile{gap:0 6px}.profile h2{font-size:15px}.profile span{font-size:12px}}

/* Responsive layered listening pose; all movement is visual and silent. */
.pip-rig{width:100%;height:100%;--pip-nod:0deg;--pip-lift:0px;--pip-wing-angle:0deg}.pip-rig>svg{display:block;width:100%;height:100%;overflow:visible}.pip-head{transform-origin:120px 130px;transform:rotate(var(--pip-nod));transition:transform 120ms linear}.pip-body-rig{transform:translateY(var(--pip-lift));transition:transform 120ms linear}.pip-left-wing{transform-origin:65px 145px;transform:rotate(var(--pip-wing-angle));transition:transform 120ms linear}.pip-right-wing{transform-origin:178px 142px;transform:rotate(calc(-1 * var(--pip-wing-angle)));transition:transform 120ms linear}.pip-eyes{transform-origin:120px 106px;animation:pip-blink 4.8s ease-in-out infinite}@keyframes pip-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
@media(prefers-reduced-motion:reduce){.pip-rig *{animation:none!important;transition:none!important;transform:none!important}}

.pip-rig .pip-head{transform-origin:650px 600px}.pip-rig .pip-left-wing{transform-origin:390px 680px}.pip-rig .pip-right-wing{transform-origin:1010px 730px}

.pip-body-rig{transform-origin:650px 1080px;transform:translateY(var(--pip-lift)) rotate(var(--pip-sway,0deg))}

/* Approved articulated rig: nested viewports isolate real parts, not whole-bird copies. */
.pip-rig.articulated>svg{width:100%;height:100%;overflow:visible}.pip-rig.articulated svg svg{overflow:hidden}.articulated .head{transform-origin:170px 205px;transform:rotate(var(--pip-nod,0deg));transition:transform 100ms linear}.articulated .near{transform-origin:102px 187px;transform:rotate(var(--pip-near,0deg));transition:transform 100ms linear}.articulated .far{transform-origin:223px 184px;transform:rotate(var(--pip-far,0deg));transition:transform 100ms linear}.pip.is-listening img:not([hidden]){animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.pip-rig.articulated *{animation:none!important;transition:none!important;transform:none!important}}


/* PitchMelo identity: Style A preserved; one quiet rhythm mark beside the wordmark. */
:root{--brand-teal:#183b35;--brand-apricot:#f8e4cc;--brand-ivory:#faf8f2;--ease-feedback:cubic-bezier(.23,1,.32,1)}
#brand{gap:9px;flex-shrink:0}.brand-mark{width:34px;height:34px;flex:none}.wordmark{font-family:ui-rounded,system-ui,-apple-system,sans-serif;font-size:23px;line-height:1.2;letter-spacing:-.8px;font-weight:800}.wordmark>span{font-weight:600}
.welcome .eyebrow{font-size:11px;letter-spacing:1.5px;color:var(--muted);margin-top:12px}.welcome h1{text-wrap:balance;letter-spacing:-1.5px}.welcome h1 em{font:inherit;color:var(--orange)}.welcome .intro{max-width:390px;text-wrap:pretty}.welcome img{width:144px;height:144px}.footer-brand{font-size:16px;letter-spacing:-.4px}footer{align-items:center}
.primary,.secondary,.save,.pin-song,.genre-chips button,.song-feedback button{transition:background-color 160ms var(--ease-feedback),transform 140ms var(--ease-feedback)}
button:not(:disabled):active{transform:scale(.98)}
@media(hover:hover) and (pointer:fine){.primary:hover{background:#26564b}.secondary:hover{background:var(--surface)}}
@media(max-width:480px){.welcome h1{font-size:clamp(34px,9vw,42px);line-height:1.12}.welcome img{width:120px;height:120px}header{gap:8px}.wordmark{font-size:22px}.brand-mark{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.primary,.secondary,.save,.pin-song,.genre-chips button,.song-feedback button{transition:none}button:not(:disabled):active{transform:none}}