/* Spirit Pathways Meditation Library v0.23.0
   Brand: Raleway, slate blue, dark slate, gold, warm off-white, misty blue.
   Typography and spacing on text elements use !important so Divi module styles cannot override them. */

.spml-lib, .spml-player {
  --sp-font: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --sp-heading: #4b7490;
  --sp-slate: #3b5b6d;
  --sp-deep: #304654;
  --sp-night: #22323c;
  --sp-gold: #b89a5e;
  --sp-gold-dark: #9f8248;
  --sp-gold-soft: #e3d2ac;
  --sp-cream: #f7f5f2;
  --sp-mist: #c3d7de;
  --sp-mist-2: #afc4c6;
  --sp-ink: #3a4248;
  --sp-muted: #6b757b;
  --sp-line: #e6e1d8;
  --sp-radius: 6px;
  --sp-shadow: 0 10px 30px rgba(48, 70, 84, .12);
}
.spml-lib { width: 100%; max-width: 1180px; margin: 0 auto; color: var(--sp-ink); font-family: var(--sp-font) !important; font-size: 16px; line-height: 1.6; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
.spml-lib *, .spml-lib *::before, .spml-lib *::after, .spml-player *, .spml-player *::before, .spml-player *::after { box-sizing: border-box; }
.spml-lib [hidden], .spml-player[hidden] { display: none !important; }
.spml-lib :is(h1, h2, h3, h4, p), .spml-player :is(p, strong) { margin: 0 !important; padding: 0 !important; font-family: var(--sp-font) !important; text-transform: none; }
:where(.spml-lib, .spml-player) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; }
.spml-lib button:focus-visible, .spml-player button:focus-visible, .spml-lib input:focus-visible, .spml-player select:focus-visible, .spml-player input:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 3px; }
.spml-lib button:disabled { cursor: default; }
.spml-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.spml-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }

/* Eyebrow labels, in the letter-spaced style of the site's hero */
.spml-lib .spml-eyebrow { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .26em !important; text-transform: uppercase !important; color: var(--sp-gold) !important; line-height: 1.4 !important; margin-bottom: 10px !important; }
.spml-lib .spml-eyebrow--light { color: var(--sp-gold-soft) !important; }

/* Artwork and the soft brand-coloured placeholder used until an image is added */
.spml-lib .spml-art, .spml-player .spml-art { position: relative; display: block; overflow: hidden; background: var(--sp-slate); }
.spml-lib .spml-art__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; margin: 0 !important; transition: transform .6s ease; }
.spml-art--tone-0 { background: radial-gradient(120% 90% at 20% 15%, rgba(195,215,222,.55), transparent 60%), linear-gradient(150deg, #3b5b6d, #6f93a8) !important; }
.spml-art--tone-1 { background: radial-gradient(110% 90% at 80% 20%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, #afc4c6, #6f8f9f) !important; }
.spml-art--tone-2 { background: radial-gradient(120% 90% at 75% 10%, rgba(184,154,94,.45), transparent 60%), linear-gradient(160deg, #304654, #4b7490) !important; }
.spml-art--tone-3 { background: radial-gradient(110% 90% at 25% 20%, rgba(255,255,255,.5), transparent 60%), linear-gradient(155deg, #d9c49a, #a88c55) !important; }
.spml-art--tone-4 { background: radial-gradient(110% 90% at 70% 15%, rgba(255,255,255,.6), transparent 60%), linear-gradient(160deg, #c3d7de, #7f9fb0) !important; }
.spml-art--tone-5 { background: radial-gradient(120% 90% at 30% 10%, rgba(195,215,222,.45), transparent 60%), linear-gradient(150deg, #22323c, #3b5b6d 70%, #6f8f9f) !important; }
.spml-art__ring { position: absolute; left: 50%; top: 42%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; }
.spml-art__ring::before { content: ""; position: absolute; inset: 22%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; }
.spml-art__ring::after { content: ""; position: absolute; inset: 42%; background: rgba(255,255,255,.7); border-radius: 50%; }

/* Hero */
.spml-lib .spml-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(64px, 8vw, 96px); border-radius: var(--sp-radius); overflow: hidden; color: #fff; background:
  radial-gradient(60% 80% at 8% 0%, rgba(195,215,222,.22), transparent 70%),
  radial-gradient(50% 70% at 100% 100%, rgba(184,154,94,.18), transparent 70%),
  radial-gradient(40% 60% at 70% 20%, rgba(175,196,198,.14), transparent 70%),
  linear-gradient(150deg, var(--sp-deep) 0%, var(--sp-slate) 100%); }
.spml-lib .spml-hero__title { font-size: clamp(34px, 5vw, 54px) !important; font-weight: 300 !important; letter-spacing: .03em !important; line-height: 1.12 !important; color: #fff !important; margin-bottom: 18px !important; }
.spml-lib .spml-hero__intro { font-size: clamp(16px, 1.6vw, 18px) !important; line-height: 1.7 !important; color: rgba(255,255,255,.86) !important; max-width: 34em; font-weight: 400 !important; }
.spml-lib .spml-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px !important; font-size: 12px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: rgba(255,255,255,.7) !important; font-weight: 500 !important; }
.spml-lib .spml-hero__stats span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--sp-gold); margin: 0 22px 2px -13px; vertical-align: middle; }

.spml-lib .spml-feature { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--sp-radius); overflow: hidden; backdrop-filter: blur(2px); }
.spml-lib .spml-feature__art { aspect-ratio: 16 / 10; }
.spml-lib .spml-feature__art .spml-art { position: absolute; inset: 0; }
.spml-lib .spml-feature__art { position: relative; }
.spml-lib .spml-feature__body { padding: 22px 24px 24px; }
.spml-lib .spml-feature__label { font-size: 11px !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--sp-gold-soft) !important; font-weight: 600 !important; margin-bottom: 8px !important; }
.spml-lib .spml-feature__title { font-size: 24px !important; font-weight: 400 !important; line-height: 1.25 !important; color: #fff !important; letter-spacing: .01em !important; }
.spml-lib .spml-feature__excerpt { font-size: 14.5px !important; line-height: 1.6 !important; color: rgba(255,255,255,.78) !important; margin-top: 8px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spml-lib .spml-feature__row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.spml-lib .spml-feature__play { width: 58px; height: 58px; border-radius: 50%; background: var(--sp-gold); color: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: background .2s, transform .2s; }
.spml-lib .spml-feature__play .spml-icon { margin-left: 3px; }
.spml-lib .spml-feature__play:hover { background: var(--sp-gold-dark); transform: scale(1.04); }
.spml-lib .spml-feature__meta { font-size: 13px; letter-spacing: .08em; color: rgba(255,255,255,.75); }

/* Search, sitting on the edge of the hero */
.spml-lib .spml-search { position: relative; z-index: 2; display: flex; align-items: center; max-width: 640px; margin: -30px auto 0; background: #fff; border: 1px solid var(--sp-line); border-radius: 999px; box-shadow: var(--sp-shadow); padding: 0 8px 0 22px; height: 60px; }
.spml-lib .spml-search > .spml-icon { font-size: 20px; color: var(--sp-heading); }
.spml-lib .spml-search__input { flex: 1; min-width: 0; height: 58px !important; border: 0 !important; background: transparent !important; padding: 0 14px !important; margin: 0 !important; font-family: var(--sp-font) !important; font-size: 16px !important; color: var(--sp-ink) !important; box-shadow: none !important; outline: none; -webkit-appearance: none; appearance: none; }
.spml-lib .spml-search__input::placeholder { color: #8e979c; }
.spml-lib .spml-search__input::-webkit-search-cancel-button { display: none; }
.spml-lib .spml-search__clear { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--sp-muted); font-size: 18px; }
.spml-lib .spml-search__clear:hover { background: var(--sp-cream); }

/* Sections */
.spml-lib .spml-view { padding-top: clamp(40px, 6vw, 64px); }
.spml-lib .spml-section + .spml-section { margin-top: clamp(48px, 7vw, 80px); }
.spml-lib .spml-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--sp-line); }
.spml-lib .spml-section__title { font-size: clamp(26px, 3vw, 34px) !important; font-weight: 400 !important; color: var(--sp-heading) !important; line-height: 1.2 !important; letter-spacing: .01em !important; }
.spml-lib .spml-section__note { font-size: 15px !important; color: var(--sp-muted) !important; line-height: 1.5 !important; max-width: 22em; text-align: right; }
.spml-lib .spml-empty { color: var(--sp-muted) !important; font-size: 15px !important; padding: 28px 0 !important; }

/* Meditation tiles */
.spml-lib .spml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 18px; }
.spml-lib .spml-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.spml-lib .spml-row .spml-tile { scroll-snap-align: start; }
.spml-lib .spml-tile__btn { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: var(--sp-radius); overflow: hidden; color: #fff; box-shadow: 0 2px 10px rgba(48,70,84,.08); transition: transform .3s ease, box-shadow .3s ease; }
.spml-lib .spml-tile__art { position: absolute !important; inset: 0; }
.spml-lib .spml-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,50,60,0) 35%, rgba(34,50,60,.82) 100%); }
.spml-lib .spml-tile__play { position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--sp-slate); display: grid; place-items: center; font-size: 15px; transition: background .25s, color .25s, transform .25s; }
.spml-lib .spml-tile__play .spml-icon { margin-left: 2px; }
.spml-lib .spml-tile__text { position: absolute; left: 14px; right: 14px; bottom: 13px; display: flex; flex-direction: column; gap: 3px; }
.spml-lib .spml-tile__meta { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sp-gold-soft); }
.spml-lib .spml-tile__title { font-size: 15.5px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: #fff; }
.spml-lib .spml-tile__btn:not(:disabled):hover { transform: translateY(-3px); box-shadow: var(--sp-shadow); }
.spml-lib .spml-tile__btn:not(:disabled):hover .spml-art__img { transform: scale(1.05); }
.spml-lib .spml-tile__btn:not(:disabled):hover .spml-tile__play, .spml-lib .spml-tile.is-playing .spml-tile__play { background: var(--sp-gold); color: #fff; }
.spml-lib .spml-tile.is-unavailable .spml-tile__btn { opacity: .72; }

/* Collections */
.spml-lib .spml-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.spml-lib .spml-collection { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--sp-radius); overflow: hidden; color: #fff; transition: transform .3s ease, box-shadow .3s ease; }
.spml-lib .spml-collection__art { position: absolute !important; inset: 0; }
.spml-lib .spml-collection__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34,50,60,0) 30%, rgba(34,50,60,.88) 100%); }
.spml-lib .spml-collection__text { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.spml-lib .spml-collection__count { font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--sp-gold-soft); }
.spml-lib .spml-collection__name { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: .01em; }
.spml-lib .spml-collection__desc { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spml-lib .spml-collection:hover { transform: translateY(-3px); box-shadow: var(--sp-shadow); }
.spml-lib .spml-collection:hover .spml-art__img { transform: scale(1.05); }

/* Journeys */
.spml-lib .spml-journeys { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.spml-lib .spml-journey { display: grid; grid-template-columns: 136px 1fr; width: 100%; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease; }
.spml-lib .spml-journey__cover { position: relative; min-height: 136px; }
.spml-lib .spml-journey__cover .spml-art { position: absolute; inset: 0; }
.spml-lib .spml-journey__body { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; }
.spml-lib .spml-journey__count { font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--sp-gold); }
.spml-lib .spml-journey__name { font-size: 19px; font-weight: 500; color: var(--sp-heading); line-height: 1.3; }
.spml-lib .spml-journey__desc { font-size: 14px; line-height: 1.5; color: var(--sp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spml-lib .spml-journey__link { margin-top: auto; padding-top: 6px; font-size: 13.5px; color: var(--sp-slate); display: inline-flex; align-items: center; gap: 6px; }
.spml-lib .spml-journey:hover { box-shadow: var(--sp-shadow); border-color: transparent; transform: translateY(-2px); }
.spml-lib .spml-journey:hover .spml-art__img { transform: scale(1.05); }

/* Detail views */
.spml-lib .spml-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sp-slate); padding: 8px 0; margin-bottom: 18px; letter-spacing: .02em; }
.spml-lib .spml-back:hover { color: var(--sp-gold-dark); }
.spml-lib .spml-banner { position: relative; min-height: 280px; border-radius: var(--sp-radius); overflow: hidden; display: flex; align-items: flex-end; margin-bottom: 32px; }
.spml-lib .spml-banner__art { position: absolute !important; inset: 0; }
.spml-lib .spml-banner__art .spml-art__ring { width: 16%; left: 82%; top: 45%; }
.spml-lib .spml-banner__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(34,50,60,.86) 0%, rgba(34,50,60,.45) 60%, rgba(34,50,60,.1) 100%); }
.spml-lib .spml-banner__text { position: relative; padding: clamp(24px, 4vw, 44px); max-width: 640px; color: #fff; }
.spml-lib .spml-banner__title { font-size: clamp(28px, 4vw, 42px) !important; font-weight: 300 !important; letter-spacing: .02em !important; line-height: 1.15 !important; color: #fff !important; }
.spml-lib .spml-banner__desc { font-size: 16px !important; line-height: 1.6 !important; color: rgba(255,255,255,.85) !important; margin-top: 10px !important; }
.spml-lib .spml-banner__meta { font-size: 12px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: rgba(255,255,255,.7) !important; margin-top: 16px !important; }

.spml-lib .spml-journey-head { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; margin-bottom: 32px; }
.spml-lib .spml-journey-head__cover { position: relative; aspect-ratio: 1; border-radius: var(--sp-radius); overflow: hidden; box-shadow: var(--sp-shadow); }
.spml-lib .spml-journey-head__cover .spml-art { position: absolute; inset: 0; }
.spml-lib .spml-journey-head__title { font-size: clamp(28px, 4vw, 40px) !important; font-weight: 300 !important; color: var(--sp-heading) !important; line-height: 1.15 !important; letter-spacing: .02em !important; }
.spml-lib .spml-journey-head__desc { font-size: 16.5px !important; line-height: 1.65 !important; color: var(--sp-ink) !important; margin-top: 12px !important; max-width: 34em; }
.spml-lib .spml-journey-head__meta { font-size: 12px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--sp-muted) !important; margin: 16px 0 22px !important; }

.spml-lib .spml-btn, .spml-lib a.spml-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-family: var(--sp-font) !important; font-size: 14px !important; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; line-height: 1.2; transition: background .2s, color .2s, border-color .2s; }
.spml-lib .spml-btn--gold { background: var(--sp-gold); color: #fff !important; }
.spml-lib .spml-btn--gold:hover { background: var(--sp-gold-dark); }
.spml-lib .spml-btn--ghost { border: 1px solid var(--sp-gold); color: var(--sp-gold-dark) !important; background: transparent; }
.spml-lib .spml-btn--ghost:hover { background: var(--sp-gold); color: #fff !important; }

.spml-lib .spml-tracks { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid var(--sp-line); }
.spml-lib .spml-track { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid var(--sp-line); list-style: none !important; }
.spml-lib .spml-track__btn { display: grid; grid-template-columns: 36px 52px 1fr auto 40px; gap: 16px; align-items: center; width: 100%; padding: 12px 8px; border-radius: 4px; transition: background .2s; }
.spml-lib .spml-track__btn:not(:disabled):hover, .spml-lib .spml-track.is-playing .spml-track__btn { background: #fff; }
.spml-lib .spml-track__num { font-size: 13px; letter-spacing: .1em; color: var(--sp-gold); font-weight: 600; }
.spml-lib .spml-track__thumb { position: relative; width: 52px; height: 52px; border-radius: 4px; overflow: hidden; }
.spml-lib .spml-track__thumb .spml-art { position: absolute; inset: 0; }
.spml-lib .spml-track__thumb .spml-art__ring { width: 46%; top: 50%; }
.spml-lib .spml-track__title { font-size: 16px; color: var(--sp-ink); font-weight: 500; }
.spml-lib .spml-track__dur { font-size: 13px; color: var(--sp-muted); letter-spacing: .04em; }
.spml-lib .spml-track__play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sp-line); color: var(--sp-slate); display: grid; place-items: center; font-size: 13px; transition: background .2s, color .2s, border-color .2s; }
.spml-lib .spml-track__play .spml-icon { margin-left: 2px; }
.spml-lib .spml-track__btn:not(:disabled):hover .spml-track__play, .spml-lib .spml-track.is-playing .spml-track__play { background: var(--sp-gold); border-color: var(--sp-gold); color: #fff; }
.spml-lib .spml-track.is-unavailable { opacity: .6; }

/* Dashboard card */
.spml-lib--card { max-width: none; margin: 0 0 24px; }
.spml-lib .spml-dash { display: grid; grid-template-columns: 220px 1fr; background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-radius); overflow: hidden; box-shadow: 0 2px 10px rgba(48,70,84,.06); }
.spml-lib .spml-dash__art { position: relative; display: block; min-height: 190px; }
.spml-lib .spml-dash__art .spml-art { position: absolute; inset: 0; }
.spml-lib .spml-dash__body { padding: 24px 28px; display: flex; flex-direction: column; justify-content: center; }
.spml-lib .spml-dash__title { font-size: 22px !important; font-weight: 400 !important; color: var(--sp-heading) !important; line-height: 1.3 !important; }
.spml-lib .spml-dash__text { font-size: 15px !important; line-height: 1.6 !important; color: var(--sp-muted) !important; margin-top: 8px !important; }
.spml-lib .spml-dash__actions { margin-top: 18px !important; display: flex; gap: 10px; flex-wrap: wrap; }
.spml-lib .spml-dash__actions .spml-btn { padding: 11px 20px; font-size: 12.5px !important; }
.spml-lib .spml-dash--invite { background: var(--sp-cream); }
@media (max-width: 600px) {
  .spml-lib .spml-dash { grid-template-columns: 1fr; }
  .spml-lib .spml-dash__art { min-height: 150px; }
  .spml-lib .spml-dash__body { padding: 20px; }
}

/* Signed out / no access */
.spml-lib--locked .spml-locked { max-width: 620px; margin: 40px auto; padding: clamp(32px, 6vw, 56px); text-align: center; background: var(--sp-cream); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); }
.spml-lib .spml-locked__title { font-size: clamp(26px, 3.4vw, 34px) !important; font-weight: 400 !important; color: var(--sp-heading) !important; margin-bottom: 12px !important; line-height: 1.2 !important; }
.spml-lib .spml-locked p { font-size: 16px !important; line-height: 1.65 !important; color: var(--sp-ink); }
.spml-lib .spml-locked__actions { margin-top: 24px !important; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Player: moved to <body> by the script so it stays fixed inside Divi layouts */
.spml-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000; background: var(--sp-deep); color: #fff; font-family: var(--sp-font) !important; border-top: 1px solid rgba(184,154,94,.55); box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.spml-player__inner { max-width: 1180px; margin: 0 auto; padding: 12px 20px; display: grid; grid-template-columns: 52px minmax(140px, 1.1fr) auto minmax(160px, 2fr) auto 36px; gap: 16px; align-items: center; }
.spml-player__art { width: 52px; height: 52px; border-radius: 4px; background-size: cover !important; background-position: center !important; }
.spml-player__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.spml-player__label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--sp-gold-soft); font-weight: 600; }
.spml-player .spml-player__title { font-size: 15px !important; font-weight: 500 !important; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35 !important; }
.spml-player__meta { font-size: 12px; color: rgba(255,255,255,.65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spml-player__controls { display: flex; align-items: center; gap: 10px; }
.spml-player__skip { width: 40px; height: 40px; display: grid; place-items: center; font-size: 26px; color: rgba(255,255,255,.85); border-radius: 50%; }
.spml-player__skip:hover { background: rgba(255,255,255,.1); }
.spml-player__toggle { width: 48px; height: 48px; border-radius: 50%; background: var(--sp-gold); color: #fff; display: grid; place-items: center; font-size: 18px; transition: background .2s; }
.spml-player__toggle:hover { background: var(--sp-gold-dark); }
.spml-player__toggle .spml-icon--play { margin-left: 2px; }
.spml-player__toggle .spml-icon--pause, .spml-player.is-playing .spml-player__toggle .spml-icon--play { display: none; }
.spml-player.is-playing .spml-player__toggle .spml-icon--pause { display: inline-block; }
.spml-player__progress { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spml-player__time { font-size: 12px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; min-width: 36px; }
.spml-player__seek { flex: 1; min-width: 0; height: 4px; margin: 0; -webkit-appearance: none; appearance: none; background: linear-gradient(90deg, var(--sp-gold) var(--spml-progress, 0%), rgba(255,255,255,.22) var(--spml-progress, 0%)); border-radius: 4px; cursor: pointer; }
.spml-player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.spml-player__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.spml-player__speed { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.3) !important; border-radius: 999px !important; padding: 6px 10px !important; font-family: var(--sp-font) !important; font-size: 13px !important; height: auto !important; margin: 0 !important; }
.spml-player__speed option { color: #222; }
.spml-player__close { width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; color: rgba(255,255,255,.7); border-radius: 50%; }
.spml-player__close:hover { background: rgba(255,255,255,.1); color: #fff; }
body.spml-player-open { padding-bottom: 84px; }

/* Tablet */
@media (max-width: 900px) {
  .spml-lib .spml-hero { grid-template-columns: 1fr; }
  .spml-lib .spml-feature { display: grid; grid-template-columns: 42% 1fr; }
  .spml-lib .spml-feature__art { aspect-ratio: auto; min-height: 100%; }
  .spml-player__inner { grid-template-columns: 48px minmax(0, 1fr) auto 36px; grid-template-areas: "art info controls close" "progress progress progress progress"; row-gap: 8px; padding: 10px 14px 12px; }
  .spml-player__art { grid-area: art; width: 48px; height: 48px; }
  .spml-player__info { grid-area: info; }
  .spml-player__controls { grid-area: controls; }
  .spml-player__progress { grid-area: progress; }
  .spml-player__speed { display: none; }
  .spml-player__close { grid-area: close; }
  body.spml-player-open { padding-bottom: 120px; }
}
/* Phone */
@media (max-width: 600px) {
  .spml-lib .spml-hero { padding: 32px 20px 64px; }
  .spml-lib .spml-hero__stats { flex-direction: column; gap: 4px; }
  .spml-lib .spml-hero__stats span + span::before { display: none; }
  .spml-lib .spml-banner__art .spml-art__ring { display: none; }
  .spml-lib .spml-feature { grid-template-columns: 1fr; }
  .spml-lib .spml-feature__art { aspect-ratio: 16 / 10; }
  .spml-lib .spml-search { margin: -28px 12px 0; height: 54px; }
  .spml-lib .spml-search__input { height: 52px !important; }
  .spml-lib .spml-section__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .spml-lib .spml-section__note { text-align: left; }
  .spml-lib .spml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .spml-lib .spml-row { grid-auto-columns: 62%; gap: 12px; }
  .spml-lib .spml-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .spml-lib .spml-collection { aspect-ratio: 3 / 4; }
  .spml-lib .spml-collection__text { left: 14px; right: 14px; bottom: 14px; }
  .spml-lib .spml-collection__name { font-size: 16.5px; }
  .spml-lib .spml-collection__desc { display: none; }
  .spml-lib .spml-journeys { grid-template-columns: 1fr; }
  .spml-lib .spml-journey { grid-template-columns: 108px 1fr; }
  .spml-lib .spml-journey__cover { min-height: 120px; }
  .spml-lib .spml-tile__title { font-size: 14px; }
  .spml-lib .spml-tile__play { width: 32px; height: 32px; top: 10px; left: 10px; }
  .spml-lib .spml-journey-head { grid-template-columns: 1fr; }
  .spml-lib .spml-journey-head__cover { max-width: 240px; }
  .spml-lib .spml-banner { min-height: 240px; }
  .spml-lib .spml-track__btn { grid-template-columns: 44px 1fr auto 34px; gap: 12px; }
  .spml-lib .spml-track__num { display: none; }
  .spml-lib .spml-track__thumb { width: 44px; height: 44px; }
  .spml-lib .spml-track__title { font-size: 15px; }
  .spml-player__skip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .spml-lib *, .spml-player * { transition: none !important; scroll-behavior: auto !important; }
}