/* Persistent, paper-cut music shelf. It lives outside the seven-step renderer. */
body{padding-bottom:calc(108px + env(safe-area-inset-bottom))}
.sample-player{position:fixed;z-index:24;left:50%;bottom:max(12px,env(safe-area-inset-bottom));width:min(1050px,calc(100% - 28px));transform:translateX(-50%);color:#173b73;font-family:var(--font,Arial,sans-serif)}
.sample-player-inner{background:#fffdf6;border:1.5px solid #173b73;border-radius:21px;box-shadow:0 11px 36px #173b732b,5px 5px 0 #f85b46;overflow:hidden}
.player-mini{display:flex;align-items:center;gap:15px;padding:8px 12px 8px 9px;min-height:75px}
.player-cover{width:58px;height:58px;flex:none;object-fit:cover;border:1px solid #173b73;border-radius:12px;box-shadow:2px 2px 0 #173b73;transform:rotate(-3deg)}
.player-identity{display:flex;flex-direction:column;min-width:0;line-height:1.16;gap:3px}.player-identity strong{font-size:15px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-identity #player-style{font-size:11px;color:#475470;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;color:#ad392b}.player-mini-actions{display:flex;align-items:center;gap:5px;margin-left:auto;flex:none}.player-icon{width:40px;height:40px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#173b73;flex:none}.player-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.player-icon:hover:not(:disabled){background:#b8ddec}.player-icon:focus-visible,.player-track:focus-visible,.player-timeline input:focus-visible,.player-volume input:focus-visible{outline:3px solid #173b73;outline-offset:2px}.player-play{width:44px;height:44px;background:#f85b46;border:1.5px solid #173b73;box-shadow:2px 2px 0 #173b73}.player-play:disabled{opacity:.62;background:#e6e0d6;box-shadow:none}.player-icon:disabled{cursor:not-allowed}.player-expand{border-left:1px solid #d5d8df;border-radius:0;width:38px;margin-left:3px}.player-expand svg{transition:transform .22s}.sample-player[data-expanded=true] .player-expand svg{transform:rotate(180deg)}
.player-details{padding:8px 20px 17px;border-top:1px dashed #a6b2c4;max-height:min(67dvh,570px);overflow:auto;overscroll-behavior:contain}.player-details-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.player-details-heading p{margin:4px 0 0;font-size:14px;font-weight:650}.player-stamp{font-size:11px;font-weight:800;white-space:nowrap;background:#f6c95c;padding:6px 10px;transform:rotate(4deg);border:1px solid #173b73}.player-status{font-size:12px;line-height:1.45;background:#eef4f4;border-left:3px solid #173b73;padding:8px 11px;margin:12px 0}.player-timeline,.player-volume{display:flex;align-items:center;gap:11px}.player-timeline{font-size:11px;font-variant-numeric:tabular-nums}.player-timeline input,.player-volume input{accent-color:#f85b46;min-width:0;flex:1}.player-timeline input:disabled,.player-volume input:disabled{opacity:.45;cursor:not-allowed}.player-volume{margin-top:8px}.player-volume .player-icon{width:30px;height:30px}.player-volume label{font-size:12px;font-weight:650;min-width:83px}.player-volume input{max-width:180px}.player-track-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}.player-track{display:flex;align-items:center;gap:7px;text-align:left;min-width:0;padding:7px;border:1px solid #ccd4dd;border-radius:12px;background:#fff;color:#173b73}.player-track:hover{border-color:#173b73;transform:translateY(-2px)}.player-track.is-current{background:#fff0db;border-color:#173b73;box-shadow:2px 2px 0 #173b73}.player-track img{width:39px;height:39px;border-radius:6px;object-fit:cover}.player-track span{min-width:0;display:block}.player-track strong,.player-track small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-track strong{font-size:11px}.player-track small{font-size:9px;color:#485372}.player-track i{display:none}.player-footnote{font-size:10px;color:#485372;margin:13px 0 0}.sample-player[data-ready=false] .player-play{position:relative}
@media(max-width:700px){body{padding-bottom:calc(101px + env(safe-area-inset-bottom))}.sample-player{width:calc(100% - 20px);bottom:max(8px,env(safe-area-inset-bottom))}.player-mini{gap:9px;padding:7px;min-height:70px}.player-cover{width:51px;height:51px;border-radius:9px}.player-identity{flex:1}.player-identity strong{font-size:13px}.player-identity #player-style{font-size:10px}.player-eyebrow{font-size:8px}.player-mini-actions{gap:0}.player-icon{width:34px;height:38px}.player-icon svg{width:17px;height:17px}.player-play{width:38px;height:38px}.player-expand{width:31px;margin-left:0}.player-details{padding:9px 14px 14px}.player-track-list{display:flex;overflow-x:auto;padding:2px 2px 7px;scroll-snap-type:x proximity}.player-track{min-width:150px;scroll-snap-align:start}.player-details-heading p{font-size:12px}}
@media(max-width:390px){.player-mini{gap:6px}.player-cover{width:44px;height:44px}.player-identity strong{font-size:12px}.player-identity #player-style{font-size:9px}.player-eyebrow{font-size:7px}.player-icon{width:30px}.player-play{width:35px;height:35px}.player-expand{width:27px}}
/* The player steps aside while a phone keyboard is in use; form actions remain reachable. */
@media(max-width:700px){body:has(.studio-form input:focus, .studio-form textarea:focus) .sample-player{display:none}body:has(.studio-form input:focus, .studio-form textarea:focus){padding-bottom:env(safe-area-inset-bottom)}}
@media(prefers-reduced-motion:reduce){.player-expand svg,.player-track{transition:none!important}}
/* QA follow-up: 44px touch targets and a compact two-row shelf on narrow phones. */
@media(max-width:700px){.sample-player .player-icon,.sample-player .player-play,.sample-player .player-expand{width:44px;height:44px}}
@media(max-width:420px){body{padding-bottom:calc(132px + env(safe-area-inset-bottom))}.sample-player .player-mini{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-rows:44px 44px;gap:3px 8px;min-height:0;padding:2px 8px}.sample-player .player-cover{width:42px;height:42px;grid-row:1;grid-column:1}.sample-player .player-identity{grid-row:1;grid-column:2}.sample-player .player-expand{grid-row:1;grid-column:3;border-left:0;margin:0}.sample-player .player-mini-actions{grid-row:2;grid-column:1/-1;justify-content:center;margin:0;gap:7px}.sample-player .player-mini-actions .player-icon{width:52px;height:44px}}
/* On spacious desktops the open shelf sits beside the hero action. */
@media(min-width:1500px){.sample-player[data-expanded=true]{width:650px;left:auto;right:max(14px,calc((100% - 1050px)/2));transform:none}.sample-player[data-expanded=true] .player-track-list{grid-template-columns:repeat(3,minmax(0,1fr))}}