.spotify-hero { background: var(--navy-deep); color: white; }
.spotify-case .case-header { color:white; }
.spotify-case .case-header.is-scrolled { background:rgba(10,28,49,.95); border-color:#53665e; }
.spotify-hero h1 { color: white; }.spotify-hero h1 em { color: #91e7ae; }
.spotify-hero .case-kicker, .spotify-hero .case-summary dt { color: #c0cec9; border-color: #53665e; }
.spotify-hero .company-badge { background: #1a4c37; }.spotify-hero .case-summary dl div { border-color: #53665e; }
.spotify-use-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px; padding-top: 60px; padding-bottom: 80px; background: #e5f0e7; }
.spotify-use-cases article { border-top: 1px solid #778b7e; padding-top: 24px; }
.spotify-use-cases article > span { font-size: .875rem; color: #34523f; }
.spotify-use-cases h2 { font: 500 clamp(32px,3vw,48px)/1.1 var(--display); letter-spacing: -.04em; }
.spotify-use-cases p { max-width: 420px; }
@media(max-width:900px) { .spotify-use-cases { grid-template-columns:1fr; } }
.spotify-use-cases { grid-template-columns: repeat(2,minmax(0,1fr)); }
.spotify-sources { display:flex; flex-wrap:wrap; gap:12px 25px; margin:32px 0 0; padding:0; list-style:none; }
.spotify-sources a { display:inline-block; border-bottom:1px solid currentColor; font-size:.875rem; min-height:32px; }
.spotify-concept-section { padding-top:100px; padding-bottom:100px; background:#e5f0e7; }
.spotify-concept-heading { max-width:900px; margin-bottom:60px; }
.spotify-concept-heading h2 { font:500 clamp(42px,6vw,80px)/1.04 var(--display); letter-spacing:-.055em; margin:28px 0; color:var(--navy); }
.spotify-concept-heading > p:last-child { max-width:620px; }
.spotify-sketch { width:min(100%,760px); margin:0 auto; padding:clamp(24px,4vw,44px); border:1px solid #3e5147; border-radius:12px; background:#121b17; color:#f2f7f2; }
.sketch-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:28px; border-bottom:1px solid #53665e; }
.sketch-topbar span, .sketch-note { font-size:.875rem; color:#bbc9c1; }
.sketch-topbar h3 { margin:6px 0 0; font:500 28px/1.2 var(--display); }
.learn-button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:56px; min-height:56px; padding:7px; border:1px solid #809389; border-radius:8px; background:none; color:white; cursor:pointer; }
.learn-button > span { font-size:24px; line-height:1.2; }.learn-button small { font-size:.75rem; }
.learn-panel { padding:24px; margin-top:24px; background:#22362b; border:1px solid #647d6c; border-radius:8px; }
.learn-panel[hidden], .mix-result[hidden], .spotify-sketch [hidden] { display:none !important; }
.learn-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; }.learn-heading h4 { margin:0; font-size:22px; }
.spotify-sketch button:not(.learn-button) { min-height:44px; border-radius:5px; cursor:pointer; }
.learn-heading button, .practice-buttons button, .mix-result button { padding:9px 14px; border:1px solid #809389; background:transparent; color:inherit; }
.spotify-sketch input, .spotify-sketch select { min-height:48px; width:100%; margin-top:8px; padding:10px 12px; border:1px solid #809389; border-radius:5px; background:#17271e; color:white; font:inherit; }
.spotify-sketch label { display:block; font-size:1rem; }
.spotify-sketch input::placeholder { color:#adbeb2; }
.practice-lesson { margin-top:30px; padding-top:25px; border-top:1px solid #647d6c; }.practice-lesson h5 { margin:0; font-size:18px; }
.practice-track { display:flex; flex-direction:column; gap:6px; padding:24px; margin:24px 0 16px; border:1px dashed #91e7ae; border-radius:6px; background:#15231b; touch-action:pan-y; user-select:none; }
.practice-track small { color:#b6cbbf; font-size:.875rem; }
.practice-buttons { display:flex; gap:12px; }.practice-status { min-height:48px; color:#c2edcd; font-size:.875rem; }
.beta-option { display:flex !important; align-items:flex-start; gap:12px; margin-top:25px; }.beta-option input { flex:0 0 20px; min-height:20px; height:20px; width:20px; margin-top:4px; accent-color:#91e7ae; }
.favfive-heading { padding:36px 0 26px; }.favfive-heading > span { color:#91e7ae; letter-spacing:.08em; font-size:.875rem; font-weight:600; }
.favfive-heading h4 { margin:20px 0; font:500 clamp(38px,5vw,58px)/1.08 var(--display); letter-spacing:-.04em; }
.favfive-heading p { color:#c0d1c6; }
.seed-fieldset { margin:0; padding:0; border:0; }.seed-fieldset legend { font-weight:600; margin-bottom:16px; }
.seed-fieldset label { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; align-items:center; margin-bottom:12px; }.seed-fieldset label > span { color:#91e7ae; font-size:.875rem; }.seed-fieldset input { margin:0; }
.simple-guidance { display:none; padding:18px; border-left:3px solid #91e7ae; background:#22362b; color:#dcf0e2; }
.spotify-sketch[data-interface-level="simple"] .simple-guidance { display:block; }
.mix-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin:32px 0; }.mix-controls > * { min-width:0; }
.discovery-control { grid-column:1/-1; }.discovery-control output { float:right; font-size:.875rem; color:#91e7ae; }
.spotify-sketch input[type="range"] { padding:0; min-height:28px; accent-color:#91e7ae; }.range-labels { display:flex; justify-content:space-between; }.range-labels small { font-size:.875rem; color:#c0d1c6; }
.mix-preview-button { margin-top:18px; padding:14px 24px; background:#91e7ae; color:#12261a; border:0; font-weight:600; width:100%; }
.mix-feedback { min-height:24px; color:#c2edcd; font-size:.875rem; }
.mix-result { margin-top:28px; border-top:1px solid #647d6c; padding-top:28px; }.mix-result h4 { font:500 28px/1.2 var(--display); margin:18px 0; }.mix-result .case-label { color:#91e7ae; }
.mix-result li { padding:6px 0; overflow-wrap:anywhere; }.beta-off-message { padding:25px 0; }
@media(max-width:760px) { .spotify-use-cases { grid-template-columns:1fr; }.spotify-concept-section { padding-top:75px; padding-bottom:75px; }.mix-controls { grid-template-columns:1fr; }.learn-panel { padding:18px; }.learn-heading { align-items:flex-start; } }

.genre-focus-control { grid-column: 1 / -1; }
.sample-seeds { padding-left: 24px; }.sample-seeds li { padding: 5px 0; }

/* A compact listening demo, with advanced exploration available on request. */
.spotify-concept-section { padding-top:64px; padding-bottom:64px; }
.spotify-concept-heading { margin-bottom:28px; }
.spotify-concept-heading h2 { font-size:clamp(32px,4vw,52px); margin:16px 0; }
.favfive-demo { width:min(100%,1100px); margin:auto; padding:clamp(20px,3vw,36px); background:#121b17; color:#f2f7f2; border:1px solid #53665e; border-radius:12px; }
.demo-top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.demo-kicker,.song-pool { font-size:.75rem; color:#c5d6cd; letter-spacing:.06em; text-transform:uppercase; }
.demo-top h3 { font:500 clamp(22px,2.5vw,30px)/1.15 var(--display); letter-spacing:-.025em; margin:10px 0; }
.demo-target { flex-shrink:0; border:1px solid #53665e; border-radius:30px; padding:8px 14px; font-size:.875rem; }
.demo-seeds { margin:12px 0 20px; }.favfive-demo summary { cursor:pointer; min-height:44px; padding:10px 0; }
.demo-seeds summary { color:#b7cdc0; font-size:.875rem; }.demo-seeds ol { padding-left:24px; }.demo-seeds li { padding:4px 0; }
.pool-choices { display:flex; flex-wrap:wrap; gap:8px; }.pool-choices button { min-height:44px; padding:8px 16px; border:1px solid #809389; border-radius:24px; background:transparent; color:white; font-size:.875rem; cursor:pointer; }
.pool-choices button[aria-pressed="true"] { background:#91e7ae; color:#12261a; border-color:#91e7ae; }
.demo-status { min-height:24px; color:#c5d6cd; font-size:.875rem; margin:20px 0; }
.song-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.song-card { min-width:0; padding:18px; background:#22362b; border:1px solid #53665e; border-radius:8px; }
.song-tile { display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:16px; font:500 24px/1 var(--display); border-radius:4px; background:#91e7ae; color:#142b24; }
.pool-hiphop .song-tile { background:#e8ab90; }.pool-rnb .song-tile { background:#c9b8e2; }
.song-card h4,.song-card strong { display:block; font-size:1.125rem; line-height:1.35; margin:10px 0 6px; overflow-wrap:anywhere; }
.song-card p { font-size:.875rem; color:#c5d6cd; margin:0 0 12px; }.song-card a { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; color:#a4e8b9; text-decoration:underline; text-underline-offset:4px; }
.more-songs { margin-top:16px; }.more-songs > summary { position:relative; display:flex; align-items:center; justify-content:center; min-height:110px; list-style:none; border-radius:8px; overflow:hidden; }
.more-songs > summary::-webkit-details-marker { display:none; }.blurred-songs { position:absolute; inset:0; padding:8px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; filter:blur(5px); opacity:.65; user-select:none; pointer-events:none; }
.ghost-song { display:flex; align-items:center; padding:18px; background:#22362b; border:1px solid #647d6c; border-radius:8px; overflow:hidden; }
.more-label { position:relative; z-index:1; padding:12px 20px; border:1px solid #91e7ae; border-radius:24px; background:#15271d; font-size:.875rem; }
.more-songs[open] > summary { min-height:60px; }.more-songs[open] .blurred-songs { display:none; }
.song-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; list-style:none; padding:12px 0 0; margin:0; }.song-list .song-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; }.song-list .song-tile { margin:0; }
.demo-method { margin-top:16px; border-top:1px solid #53665e; font-size:.875rem; color:#c5d6cd; }.demo-method p { max-width:850px; }.demo-method a { text-decoration:underline; }.demo-method summary { color:#f2f7f2; }
.spotify-controls-details { width:min(100%,1100px); margin:24px auto 0; }.spotify-controls-details > summary { padding:16px 0; min-height:44px; font-size:1rem; cursor:pointer; }.spotify-controls-details .spotify-sketch { margin-top:20px; }
@media(max-width:760px) { .song-preview,.song-list { grid-template-columns:1fr; }.song-preview .song-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; }.song-preview .song-tile { margin:0; }.song-card h4 { margin-top:6px; }.demo-top { align-items:flex-start; }.blurred-songs { grid-template-columns:1fr; }.ghost-song:nth-child(n+2) { display:none; } }