:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #e9edf2;
  --ink: #15171a;
  --muted: #667085;
  --line: #d8dee7;
  --brand: #6750e6;
  --brand-dark: #4b35c4;
  --accent: #ff6b4a;
  --shadow: 0 18px 55px rgba(22, 28, 45, .1);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="dark"] { color-scheme: dark; --bg:#0f1115; --surface:#171a20; --surface-2:#232833; --ink:#f7f8fa; --muted:#a8b0be; --line:#303745; --shadow:0 18px 55px rgba(0,0,0,.32); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); padding-bottom: 104px; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
img { display: block; max-width: 100%; object-fit: cover; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.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; }
.skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; background:var(--ink); color:var(--surface); padding:.8rem 1rem; border-radius:10px; }
.skip-link:focus { top:1rem; }
.site-header { height:76px; padding:0 clamp(1rem,4vw,4.5rem); display:flex; align-items:center; gap:clamp(1rem,3vw,3rem); background:color-mix(in srgb,var(--surface) 90%,transparent); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:.7rem; font-weight:850; font-size:1.12rem; text-decoration:none; white-space:nowrap; }
.brand-mark { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:white; background:linear-gradient(145deg,var(--brand),#9b65f3); box-shadow:0 8px 18px rgba(103,80,230,.3); }
.header-search { flex:1; max-width:600px; display:flex; }
.header-search input { width:100%; min-width:0; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:.72rem 1rem; border-radius:12px 0 0 12px; outline:none; }
.header-search input:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent); }
.header-search button { border:0; border-radius:0 12px 12px 0; background:var(--ink); color:var(--surface); padding:0 1rem; cursor:pointer; }
.site-header nav { margin-left:auto; display:flex; align-items:center; gap:1.1rem; font-size:.94rem; white-space:nowrap; }
.site-header nav a { text-decoration:none; }
.inline-form { display:inline; margin:0; }
.link-button { border:0; padding:0; color:inherit; background:none; cursor:pointer; }
.button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--brand); background:var(--brand); color:#fff; min-height:44px; padding:.65rem 1rem; border-radius:12px; font-weight:750; cursor:pointer; text-decoration:none; transition:transform .15s, background .15s; }
.button:hover { background:var(--brand-dark); transform:translateY(-1px); }
.button.secondary { background:transparent; border-color:var(--line); color:var(--ink); }
.button.secondary:hover { background:var(--surface-2); }
.button.small { min-height:36px; padding:.45rem .8rem; }
main { min-height:60vh; }
.hero { padding:clamp(4rem,10vw,8rem) clamp(1.25rem,8vw,9rem); background:radial-gradient(circle at 78% 20%,rgba(255,107,74,.25),transparent 25%),radial-gradient(circle at 65% 70%,rgba(103,80,230,.23),transparent 30%),var(--surface); border-bottom:1px solid var(--line); }
.hero > div { max-width:800px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(2.5rem,7vw,5.5rem); letter-spacing:-.055em; line-height:.97; margin-bottom:1.25rem; }
h2 { font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.035em; }
h3 { letter-spacing:-.02em; }
.hero p:not(.eyebrow) { max-width:640px; color:var(--muted); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.6; }
.eyebrow { color:var(--brand); text-transform:uppercase; letter-spacing:.13em; font-weight:850; font-size:.76rem; margin-bottom:.75rem; }
.content-section { max-width:1320px; margin:0 auto; padding:clamp(2rem,5vw,4.5rem) clamp(1rem,4vw,3rem); }
.content-section.narrow { max-width:980px; }
.section-heading,.page-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; }
.section-heading { margin-bottom:1.5rem; }
.section-heading h2 { margin:0; }
.section-heading span,.creator,.duration { color:var(--muted); }
.page-heading { max-width:1180px; margin:0 auto; padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,3rem) 2rem; }
.page-heading h1 { font-size:clamp(2.4rem,5vw,4.2rem); margin:0; }
.podcast-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); }
.podcast-card { min-width:0; text-decoration:none; display:flex; flex-direction:column; gap:.35rem; }
.podcast-card img { width:100%; aspect-ratio:1; border-radius:var(--radius); box-shadow:var(--shadow); background:var(--surface-2); margin-bottom:.55rem; transition:transform .22s; }
.podcast-card:hover img { transform:translateY(-4px); }
.podcast-card strong,.podcast-card span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.podcast-card span { color:var(--muted); font-size:.9rem; }
.podcast-hero { display:grid; grid-template-columns:minmax(180px,280px) minmax(0,720px); gap:clamp(2rem,5vw,5rem); align-items:center; padding:clamp(2.5rem,7vw,6rem) clamp(1rem,8vw,9rem); background:var(--surface); border-bottom:1px solid var(--line); }
.podcast-hero > img,.episode-page-grid > img { width:100%; aspect-ratio:1; border-radius:26px; box-shadow:var(--shadow); }
.podcast-hero h1,.episode-page h1 { font-size:clamp(2.4rem,5vw,4.7rem); }
.podcast-hero p:not(.eyebrow):not(.creator),.episode-page p { color:var(--muted); line-height:1.65; }
.hero-actions,.episode-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.episode-list { border-top:1px solid var(--line); }
.episode-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; padding:1.7rem 0; border-bottom:1px solid var(--line); }
.episode-row h3 { margin:.15rem 0 .65rem; font-size:1.28rem; }
.episode-row h3 a { text-decoration:none; }
.episode-row p { color:var(--muted); line-height:1.55; margin-bottom:.6rem; }
.episode-row .eyebrow { margin:0; font-size:.68rem; }
.episode-actions { align-self:center; justify-content:flex-end; max-width:270px; margin:0; }
.icon-button { border:1px solid var(--line); color:var(--muted); background:transparent; border-radius:10px; padding:.55rem .72rem; cursor:pointer; }
.icon-button.active { color:var(--brand); border-color:var(--brand); background:color-mix(in srgb,var(--brand) 9%,transparent); }
.icon-button.danger { color:#c84040; }
.pagination { display:flex; align-items:center; justify-content:center; gap:1rem; padding:2rem 0; color:var(--muted); }
.pagination a { color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:.55rem .8rem; text-decoration:none; }
.status-card { max-width:950px; margin:2rem auto 0; display:flex; gap:1rem; align-items:center; padding:1rem 1.2rem; border:1px solid var(--line); background:var(--surface); border-radius:14px; }
.status-card p { color:var(--muted); margin:.2rem 0 0; }
.status-card.error { border-color:#d47a7a; }
.spinner { width:24px; height:24px; border:3px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; flex:none; }
.spinner.large { width:54px; height:54px; border-width:5px; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-page,.form-page,.legal-page { max-width:760px; margin:0 auto; padding:clamp(4rem,10vw,8rem) 1rem; }
.loading-page { text-align:center; }
.loading-page .spinner { margin:0 auto 2rem; }
.loading-page h1,.form-page h1 { font-size:clamp(2.5rem,6vw,4.6rem); }
.loading-page p,.legal-page p { color:var(--muted); line-height:1.7; }
.episode-page { max-width:1100px; margin:0 auto; padding:clamp(3rem,8vw,7rem) 1rem; }
.back-link { display:inline-block; margin-bottom:2rem; color:var(--muted); }
.episode-page-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.form-page { max-width:620px; }
.stacked-form { display:flex; flex-direction:column; gap:1.15rem; }
.stacked-form > div { display:flex; flex-direction:column; gap:.4rem; }
.stacked-form input,.stacked-form select { width:100%; border:1px solid var(--line); color:var(--ink); background:var(--surface); border-radius:10px; padding:.75rem .85rem; }
.stacked-form .helptext,.stacked-form ul { color:var(--muted); font-size:.85rem; }
.stacked-form .errorlist { color:#c84040; }
.filter-pills { max-width:1120px; margin:0 auto; padding:0 1rem; display:flex; gap:.6rem; overflow:auto; }
.filter-pills a { border:1px solid var(--line); padding:.55rem .85rem; border-radius:999px; text-decoration:none; white-space:nowrap; }
.filter-pills a.active { color:#fff; background:var(--brand); border-color:var(--brand); }
.two-column { max-width:1100px; margin:0 auto; padding:1rem 1rem 5rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; align-self:start; }
.check-row,.group-row { display:flex; align-items:center; gap:.7rem; padding:.65rem 0; border-bottom:1px solid var(--line); }
.group-row { justify-content:space-between; }
.group-row div { display:flex; flex-direction:column; gap:.25rem; }
.group-row span { color:var(--muted); font-size:.85rem; }
.empty-state { grid-column:1/-1; text-align:center; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:4rem 1rem; }
.messages { position:fixed; z-index:40; top:88px; left:50%; transform:translateX(-50%); width:min(92%,600px); }
.message { background:var(--ink); color:var(--surface); box-shadow:var(--shadow); border-radius:12px; padding:.9rem 1.1rem; }
.site-footer { max-width:1260px; margin:4rem auto 0; padding:2rem 1rem; border-top:1px solid var(--line); color:var(--muted); display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; }
.site-footer nav { display:flex; gap:1rem; }
.player { position:fixed; z-index:30; left:0; right:0; bottom:0; min-height:88px; padding:.7rem clamp(.8rem,3vw,2rem); display:grid; grid-template-columns:64px minmax(120px,240px) auto auto auto minmax(150px,1fr) auto auto; align-items:center; gap:.75rem; color:#fff; background:rgba(20,22,28,.96); box-shadow:0 -12px 50px rgba(0,0,0,.2); backdrop-filter:blur(18px); }
.player[hidden] { display:none; }
.player img { width:64px; height:64px; border-radius:10px; background:#333; }
.player-copy { min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.player-copy strong,.player-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-copy span { color:#b7becb; font-size:.82rem; }
.player button { width:38px; height:38px; border:0; border-radius:50%; color:#fff; background:#343945; cursor:pointer; }
.player button.play-toggle { width:48px; height:48px; background:var(--brand); }
.player button.skip-control { display:grid; place-content:center; line-height:.75; }
.player button.skip-control span { font-size:1.15rem; }
.player button.skip-control small { font-size:.58rem; font-weight:800; }
.player-timeline { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem; min-width:0; font-size:.75rem; color:#b7becb; }
.player-timeline input { width:100%; min-height:32px; margin:0; accent-color:var(--brand); cursor:pointer; }
.player-timeline input:disabled { cursor:wait; opacity:.65; }
.speed-label { color:#b7becb; font-size:.7rem; display:flex; flex-direction:column; gap:.2rem; }
.speed-label select { background:#343945; color:#fff; border:0; border-radius:8px; padding:.3rem; }
.player button.queue-toggle { width:auto; min-width:64px; padding:0 .65rem; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:.3rem; }
.queue-count { min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; color:#fff; background:var(--brand); font-size:.7rem; font-weight:800; }
.queue-panel { position:fixed; z-index:29; right:1rem; bottom:100px; width:min(430px,calc(100vw - 2rem)); max-height:min(620px,calc(100vh - 130px)); overflow:auto; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 70px rgba(0,0,0,.28); }
.queue-panel[hidden] { display:none; }
.queue-panel-heading { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1rem .8rem; background:var(--surface); border-bottom:1px solid var(--line); }
.queue-panel-heading .eyebrow { margin:0 0 .15rem; }
.queue-panel-heading h2 { margin:0; font-size:1.35rem; }
.queue-panel-heading button { width:40px; height:40px; border:0; border-radius:50%; color:var(--ink); background:var(--surface-2); cursor:pointer; font-size:1.5rem; }
.queue-list { padding:.35rem 1rem 1rem; }
.queue-empty { margin:0; padding:2rem .5rem; color:var(--muted); text-align:center; line-height:1.5; }
.queue-item { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:.7rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.queue-item img { width:52px; height:52px; border-radius:9px; background:var(--surface-2); }
.queue-item-copy { min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.queue-item-copy strong,.queue-item-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.queue-item-copy span { color:var(--muted); font-size:.78rem; }
.queue-item-actions { display:flex; flex-direction:column; gap:.3rem; }
.queue-item-actions button { border:0; padding:.35rem .5rem; border-radius:7px; color:var(--brand); background:transparent; cursor:pointer; font-size:.75rem; font-weight:750; }
@media (max-width:980px) { .podcast-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.site-header nav a:not(.button){display:none}.player{grid-template-columns:48px minmax(60px,1fr) auto auto auto auto;grid-template-areas:"art copy rewind toggle forward queue" "timeline timeline timeline timeline timeline timeline";gap:.35rem .65rem;padding:.6rem .8rem}.player img{grid-area:art;width:48px;height:48px}.player-copy{grid-area:copy}.player #player-rewind{grid-area:rewind}.player #player-toggle{grid-area:toggle}.player #player-forward{grid-area:forward}.player #queue-toggle{grid-area:queue}.player-timeline{grid-area:timeline;display:grid}.player button{width:44px;height:44px}.player button.queue-toggle{min-width:44px;padding:0}.queue-label{display:none}.speed-label{display:none}.episode-actions{max-width:190px}.episode-actions .button{min-height:40px;padding:.5rem .7rem}.two-column{grid-template-columns:1fr} }
@media (max-width:680px) { body{padding-bottom:138px}.site-header{height:auto;min-height:70px;flex-wrap:wrap;padding:.75rem 1rem;gap:.7rem}.brand{font-size:1rem}.brand-mark{width:32px;height:32px}.header-search{order:3;flex-basis:100%}.site-header nav{gap:.6rem}.site-header nav a.button{font-size:.82rem}.podcast-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem .8rem}.hero{padding:4rem 1rem}.podcast-hero{grid-template-columns:110px minmax(0,1fr);align-items:start;gap:1rem;padding:2rem 1rem}.podcast-hero h1{font-size:2rem}.podcast-hero div > p:not(.eyebrow):not(.creator){grid-column:1/-1}.episode-row{grid-template-columns:1fr}.episode-actions{justify-content:flex-start;max-width:none}.episode-page-grid{grid-template-columns:1fr}.episode-page-grid>img{max-width:220px}.page-heading{align-items:start;flex-direction:column}.player{min-height:118px;grid-template-columns:36px minmax(36px,1fr) 42px 46px 42px 42px;gap:.25rem .3rem;padding:.5rem .5rem max(.45rem,env(safe-area-inset-bottom))}.player img{width:36px;height:36px}.player-copy strong{font-size:.8rem}.player-copy span{font-size:.68rem}.player-timeline{gap:.35rem}.queue-panel{left:.5rem;right:.5rem;bottom:128px;width:auto;max-height:calc(100vh - 150px);border-radius:16px}.site-footer{flex-direction:column} }