/* Audiobook player: dark card, gold progress and play button. */
#listen{width:min(480px,calc(100vw - 24px));padding:0;border-radius:26px;background:#0b0b0b;color:#fff;overflow:visible;box-shadow:0 40px 100px rgba(0,0,0,.6)}
#listen .close{border-color:#3a3a3a;color:#fff;right:16px;top:16px}
.lp{padding:26px 26px 24px;border-radius:26px;background:linear-gradient(160deg,#171717,#0a0a0a);border:1px solid #262626}
.lp-eyebrow{margin:0 0 18px;font-size:10px;letter-spacing:.22em;color:var(--cobalt-on-dark)}
.lp-top{display:flex;gap:18px;align-items:center;margin-bottom:24px;padding-right:30px}
.lp-art{position:relative;flex:0 0 74px;height:104px;border-radius:8px;overflow:hidden;background:#222;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.lp-art img{display:block;width:100%;height:100%;object-fit:cover}
.lp-bars{position:absolute;left:0;right:0;bottom:0;height:26px;display:flex;justify-content:center;align-items:flex-end;gap:3px;padding-bottom:5px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);opacity:0;transition:opacity .3s}
.lp-bars i{display:block;width:3px;height:4px;border-radius:2px;background:var(--cobalt-on-dark)}
.lp.playing .lp-bars{opacity:1}
.lp.playing .lp-bars i{animation:lp-bar 1s ease-in-out infinite}
.lp-bars i:nth-child(2){animation-delay:-.3s!important}.lp-bars i:nth-child(3){animation-delay:-.6s!important}.lp-bars i:nth-child(4){animation-delay:-.15s!important}
@keyframes lp-bar{0%,100%{height:4px}50%{height:16px}}
.lp-meta h2{margin:0 0 6px;font:22px/1.2 Georgia,serif;font-weight:400}
.lp-meta p{margin:0;font-size:13px;color:#9a9a9a}
.lp-scrub{margin-bottom:18px}
.lp input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:none;cursor:pointer;--p:0%}
.lp input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--cobalt-on-dark) var(--p),#2c2c2c var(--p))}
.lp input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#2c2c2c}
.lp input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--cobalt-on-dark)}
.lp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 0 rgba(127,140,240,.35);transition:box-shadow .2s}
.lp input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.lp input[type=range]:hover::-webkit-slider-thumb,.lp input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(127,140,240,.35)}
.lp input[type=range]:focus-visible{outline:2px solid var(--cobalt-on-dark);outline-offset:2px;border-radius:4px}
.lp-times{display:flex;justify-content:space-between;margin-top:2px;font-size:11px;color:#8d8d8d;font-variant-numeric:tabular-nums}
.lp-ctrl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.lp button{font:inherit;color:#fff;cursor:pointer}
.lp-vol{display:flex;align-items:center;gap:6px}
.lp-vol button{display:grid;place-items:center;width:34px;height:34px;background:none;border:0;border-radius:50%;color:#bdbdbd}
.lp-vol input{width:64px;height:20px}
.lp-main{display:flex;align-items:center;gap:14px}
.lp-main button{display:flex;align-items:center;gap:2px;background:none;border:0;padding:8px;color:#cfcfcf;border-radius:50%}
.lp-main button small{font-size:10px;letter-spacing:.04em}
#lp-play{width:56px;height:56px;justify-content:center;padding:0;background:var(--cobalt);color:#fff;border:1px solid var(--cobalt-on-dark);box-shadow:0 8px 22px rgba(var(--cobalt-rgb),.5);transition:transform .15s,background .2s}
#lp-play:hover{background:var(--cobalt-hover)}#lp-play:active{transform:scale(.94)}
#lp-play .q{display:none}.lp.playing #lp-play .p{display:none}.lp.playing #lp-play .q{display:inline}
#lp-rate{justify-self:end;min-width:48px;height:30px;padding:0 10px;background:#1b1b1b;border:1px solid #2c2c2c;border-radius:8px;font-size:12px;color:#ddd}
.lp button:hover:not(#lp-play):not(#lp-rate){color:var(--cobalt-on-dark)}
.lp button:focus-visible{outline:2px solid var(--cobalt-on-dark);outline-offset:2px}
#lp-rate:hover{border-color:var(--cobalt-on-dark);color:var(--cobalt-on-dark)}
.lp.muted .w{display:none}
.lp-parts{list-style:none;margin:22px 0 0;padding:14px 0 0;border-top:1px solid #262626;display:grid;gap:2px;max-height:160px;overflow:auto;overscroll-behavior:contain}
.lp-parts button{display:flex;justify-content:space-between;width:100%;padding:9px 10px;background:none;border:0;border-radius:8px;text-align:left;font-size:13px;color:#bbb}
.lp-parts button[aria-current=true]{background:#1c1c1c;color:var(--cobalt-on-dark)}
.lp-parts button:hover{background:#171717}
.lp-err{margin:12px 0 0;font-size:13px;color:#e8a29d;min-height:0}
.lp-err:empty{display:none}
#listen-btn{margin-left:8px;padding:8px 14px;background:var(--cobalt);border:1px solid var(--cobalt-on-dark);color:#fff;font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer}
#listen-btn[hidden]{display:none}
@media(max-width:700px){.lp{padding:22px 18px 20px}.lp-vol input{display:none}.lp-main{gap:6px}}
@media(prefers-reduced-motion:reduce){.lp.playing .lp-bars i{animation:none;height:10px}}

/* Buying and signing in */
.listen-account{display:inline-block;margin-left:12px;font-size:12px;color:#555}
.listen-account[hidden]{display:none}
.listen-account button{background:none;border:0;border-bottom:2px solid var(--cobalt);padding:0;font:inherit;color:#111;cursor:pointer}
#account{width:min(440px,calc(100vw - 24px))}
#account h2{margin:8px 40px 10px 0;font:26px Georgia,serif;font-weight:400}
.acct-note{margin:0 0 18px;font-size:14px;line-height:1.6;color:#555}
#account form{display:grid;gap:10px}
#account input{width:100%;padding:13px 14px;border:1px solid #d9d8d2;border-radius:10px;font:inherit;font-size:16px;background:#fff}
#account input:focus{outline:2px solid var(--cobalt);outline-offset:1px}
#account form button{height:46px;border:0;border-radius:100px;background:var(--cobalt);color:#fff;font:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
#account form button:disabled{opacity:.6;cursor:default}
.acct-msg{min-height:1.4em;margin:14px 0 0;font-size:13px;line-height:1.6;color:#444}
.acct-msg.err{color:#b3261e}
#purchase-note{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;width:min(560px,calc(100vw - 24px));margin:0;padding:14px 44px 14px 18px;background:#111;color:#fff;border:1px solid var(--cobalt-on-dark);border-radius:14px;font-size:14px;line-height:1.5;box-shadow:0 20px 50px rgba(0,0,0,.4)}
#purchase-note[hidden]{display:none}
#purchase-note button{background:none;border:0;border-bottom:2px solid var(--cobalt-on-dark);padding:0;font:inherit;color:#fff;cursor:pointer}
#purchase-note .x{position:absolute;right:10px;top:10px;border:0;color:#bbb;font-size:14px}
.lp-parts[hidden]{display:none}