/* Apple HIG-inspired web interface. System typography; original artwork and branding. */
:root {
  color-scheme: light;
  --ink:#263a2e; --muted:#62695e; --purple:#80542a; --purple-dark:#603819;
  --bg:#f5f1e9; --raised:#fcfaf5; --surface:#ebe7dd; --pale:#e9dfcd;
  --line:#dcd8cc; --border-strong:#a4a797; --track:#c5c6b8;
  --on-accent:#fffaf1; --hover:#e1d3bb; --subtle-hover:#eeeadf;
  --transcript-ink:#364234; --highlight:#e7d1a5;
  --male-bg:#e7dcc4; --male-ink:#73512a; --female-bg:#dfe6d9;
  --toast-bg:#263a2e; --toast-ink:#fffaf1; --scrim:#10221977;
  --glass:rgba(245,241,233,.94); --shadow:0 12px 34px #25332414;
  --ease-out:cubic-bezier(.22,1,.36,1); --motion-press:120ms; --motion-state:220ms; --motion-sheet:300ms;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang HK","Noto Sans TC",sans-serif;
  font-synthesis:none;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#f4efe3; --muted:#b1b8a9; --purple:#deb77b; --purple-dark:#f0c996;
  --bg:#14201c; --raised:#1b2923; --surface:#25332b; --pale:#354035;
  --line:#344136; --border-strong:#728371; --track:#516153;
  --on-accent:#26351f; --hover:#3c4a3a; --subtle-hover:#293c30;
  --transcript-ink:#dfE5d5; --highlight:#5a5434;
  --male-bg:#403d29; --male-ink:#e3bb7d; --female-bg:#334c3a;
  --toast-bg:#eee7d5; --toast-ink:#203326; --scrim:#08100ad1;
  --glass:rgba(20,32,28,.95); --shadow:0 12px 40px #07140a33;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; scroll-padding-top:96px; }
body { margin:0; color:var(--ink); background:var(--bg); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,input,select,label { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { color:inherit; cursor:pointer; border:0; background:none; }
button,input,select { min-height:44px; }
button:disabled { cursor:default; opacity:.4; }
a { color:inherit; text-decoration:none; }
a:hover,button:hover { color:var(--purple-dark); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--purple); outline-offset:4px; border-radius:8px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
img { max-width:100%; height:auto; display:block; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.35; letter-spacing:-.025em; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
.icon-defs { position:absolute; width:0; height:0; overflow:hidden; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; z-index:100; left:20px; top:-80px; padding:12px 16px; background:var(--raised); border-radius:12px; }
.skip-link:focus { top:12px; }
/* Navigation belongs to the control layer; the content stays opaque and calm. */
.site-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:24px; height:88px; padding:12px max(32px,calc((100vw - 1160px)/2)); background:var(--glass); border-bottom:1px solid var(--line); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.brand { display:flex; align-items:center; gap:12px; font-size:21px; font-weight:750; line-height:1.25; white-space:nowrap; }
.brand-mark { width:46px; height:46px; flex-shrink:0; }
.brand-mark img { width:100%; height:100%; object-fit:contain; }
.brand-caption { display:block; margin-top:4px; font-size:14px; font-weight:450; color:var(--muted); }

.primary-nav { display:flex; align-items:center; gap:4px; padding:4px; background:var(--surface); border-radius:999px; }
.nav-link { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 18px; border-radius:999px; font-size:15px; font-weight:600; color:var(--muted); white-space:nowrap; }
.nav-link svg { width:19px; height:19px; }
.nav-link[aria-current] { background:var(--raised); color:var(--purple); box-shadow:0 1px 4px #1813200d; }
#saved-count { display:inline-grid; place-items:center; margin-left:5px; font-size:14px; }
.settings-button { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--surface); font-size:14px; font-weight:600; }
.settings-button svg { width:20px; height:20px; }
main { max-width:1224px; padding:0 32px; margin:auto; }
.show-hero { display:grid; grid-template-columns:264px minmax(0,1fr); gap:52px; align-items:center; padding:52px 20px 40px; }
.show-art { width:264px; border-radius:24px; overflow:hidden; box-shadow:0 14px 32px #18132026; }
.show-art img { width:100%; aspect-ratio:1; object-fit:cover; }
.eyebrow { color:var(--purple); font-size:14px; font-weight:600; line-height:1.6; }
h1 { font-size:clamp(36px,4.2vw,52px); font-weight:780; margin:8px 0; }
.hosts { color:var(--purple); font-size:16px; font-weight:600; }
.hosts span { padding:0 6px; color:var(--muted); }
.show-description { color:var(--muted); margin-top:16px; font-size:17px; line-height:1.8; }
.show-meta { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:16px; color:var(--muted); font-size:14px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:24px; }
.primary-button,.secondary-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:12px 22px; min-height:48px; border-radius:999px; font-weight:650; font-size:16px; }
.primary-button { color:var(--on-accent); background:var(--purple); }
.primary-button:hover { color:var(--on-accent); background:var(--purple-dark); }
.secondary-button { color:var(--purple); background:var(--pale); }
.secondary-button:hover { background:var(--hover); }
.primary-button svg,.secondary-button svg { width:20px; height:20px; }
.resume-note { margin-top:12px; color:var(--muted); font-size:14px; }
.editorial-line { display:flex; align-items:center; gap:12px; margin:0 0 32px; padding:18px 0; border-block:1px solid var(--line); color:var(--muted); font-size:14px; }
.editorial-line svg { color:var(--purple); width:20px; height:20px; }
.editorial-line>span { margin-left:auto; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 272px; align-items:start; gap:36px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.section-heading h2 { font-size:28px; font-weight:750; margin-top:3px; }
.section-heading h2 span { color:var(--muted); font-size:18px; font-weight:500; margin-left:6px; }
.sequence-note { color:var(--muted); font-size:14px; white-space:nowrap; padding-bottom:4px; }
.episode-tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.segmented { position:relative; display:flex; isolation:isolate; padding:3px; border-radius:12px; background:var(--surface); }
.segmented::before { content:""; position:absolute; inset:3px auto 3px 3px; width:calc((100% - 6px)/2); border-radius:9px; background:var(--raised); box-shadow:0 1px 4px #1813201a; z-index:-1; transition:transform var(--motion-state) var(--ease-out); }
.segmented[data-selected=saved]::before { transform:translateX(100%); }
.segmented label { position:relative; display:grid; place-items:center; min-width:84px; min-height:44px; padding:8px 12px; border-radius:9px; cursor:pointer; }
.segmented input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.segmented span { font-size:14px; font-weight:650; color:var(--muted); }
.segmented input:checked+span { color:var(--ink); }
.segmented label:has(input:focus-visible) { outline:3px solid var(--purple); outline-offset:2px; }
.search-box { display:flex; align-items:center; min-width:0; gap:8px; padding:0 12px; background:var(--surface); border-radius:12px; color:var(--muted); }
.episode-tools .search-box { flex:1; max-width:290px; }
.search-box svg { width:19px; height:19px; }
.search-box input { color:var(--ink); background:transparent; border:0; width:100%; min-width:0; padding:8px 0; font-size:16px; }
.search-box input::placeholder { color:var(--muted); opacity:1; }
.search-box:focus-within { outline:3px solid var(--purple); outline-offset:2px; }
.search-box input:focus-visible { outline:none; }
.episode-list { background:var(--raised); padding:0 22px; border:1px solid var(--line); border-radius:20px; }
.episode { position:relative; display:grid; grid-template-columns:180px minmax(0,1fr); gap:20px; padding:24px 0; border-bottom:1px solid var(--line); scroll-margin-top:112px; }
.episode:last-child { border-bottom:0; }
.episode:target { background:var(--subtle-hover); box-shadow:12px 0 var(--subtle-hover),-12px 0 var(--subtle-hover); border-radius:12px; }
.episode-cover { width:100%; aspect-ratio:1.65; border-radius:12px; padding:0; overflow:hidden; align-self:start; background:#0d172a; }
.episode-cover img { width:100%; height:100%; object-fit:cover; transition:transform var(--motion-sheet) var(--ease-out); }
.episode-body { min-width:0; }
.episode-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; color:var(--muted); font-size:14px; line-height:1.5; margin-bottom:6px; }
.playing-label { color:var(--purple); font-weight:600; }
.episode-title { font-size:19px; font-weight:650; line-height:1.5; }
.is-playing .episode-title { color:var(--purple-dark); }
.episode-description { margin-top:7px; color:var(--muted); font-size:15px; line-height:1.7; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.episode-actions { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:12px; }
.episode-play { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:6px 12px; min-height:44px; background:var(--surface); color:var(--purple); font-size:14px; font-weight:650; }
.episode-play svg { width:18px; height:18px; }
.episode-progress { color:var(--muted); font-size:14px; }
.episode-progress:empty { display:none; }
.read-button { display:flex; align-items:center; gap:5px; margin-left:auto; font-size:14px; color:var(--muted); padding:6px 4px; }
.read-button svg { width:18px; height:18px; }
.icon-button { display:inline-grid; place-items:center; width:44px; height:44px; min-width:44px; padding:10px; border-radius:50%; }
.icon-button:hover { background:var(--surface); }
.save-button { color:var(--muted); }
.save-button[aria-pressed=true],#now-save[aria-pressed=true] { color:var(--purple); background:var(--pale); }
.empty-state { text-align:center; padding:40px 16px; color:var(--muted); font-size:16px; }
.empty-state .text-button { margin:16px auto 0; }
.list-note { color:var(--muted); font-size:14px; padding:20px 4px; }
.show-sidebar { padding-top:6px; }
.spotlight { border-radius:20px; background:var(--raised); overflow:hidden; border:1px solid var(--line); }
.spotlight-art { position:relative; }
.spotlight-art img { width:100%; aspect-ratio:1.2; object-fit:cover; }
.spotlight-art>span { position:absolute; top:12px; left:16px; padding:5px 10px; background:#161322d9; color:#faf8ff; border-radius:999px; font-size:14px; }
.spotlight-copy { padding:20px; }
.spotlight h2 { font-size:23px; line-height:1.5; margin-top:6px; }
.spotlight-copy>p:not(.eyebrow) { color:var(--muted); font-size:15px; margin:12px 0 4px; }
.text-button { display:inline-flex; align-items:center; gap:5px; min-height:44px; color:var(--purple); font-size:15px; font-weight:650; padding:6px 0; }
.text-button svg { width:18px; height:18px; }
.about-card { margin-top:28px; padding:0 4px; scroll-margin-top:112px; }
.about-card h2 { font-size:25px; line-height:1.5; margin:6px 0 16px; }
.about-card>p:not(.eyebrow) { color:var(--muted); font-size:15px; line-height:1.85; margin:12px 0; }
.host-pair { display:flex; align-items:center; gap:12px; margin:20px 0; }
.avatar { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; font-size:17px; font-weight:650; background:var(--male-bg); color:var(--male-ink); }
.avatar.female { background:var(--female-bg); color:var(--purple); }
.host-pair strong { font-size:16px; font-weight:650; }
.host-pair small { display:block; font-size:14px; color:var(--muted); }
.about-card .disclosure { border-top:1px solid var(--line); padding-top:16px; font-size:14px!important; }
.source-card { margin-top:24px; border-top:1px solid var(--line); padding:16px 4px; }
.source-card summary { cursor:pointer; min-height:44px; padding:8px 0; font-size:16px; font-weight:600; }
.source-card summary span { color:var(--muted); margin-left:4px; }
.source-card p,.source-card ol { color:var(--muted); font-size:14px; margin:12px 0; }
.source-card ol { padding-left:20px; }
.source-card li { margin:12px 0; overflow-wrap:anywhere; }
.source-card a,.transcript-sources a { text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--border-strong); }
.site-footer { display:flex; align-items:center; flex-wrap:wrap; gap:24px; border-top:1px solid var(--line); margin-top:32px; padding:24px 0 136px; color:var(--muted); font-size:14px; }
.footer-brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:16px; font-weight:600; }
.footer-brand small { display:block; color:var(--muted); font-size:14px; font-weight:400; }
.site-footer>p:last-child { margin-left:auto; }
/* One floating player, with complete controls in the Now Playing sheet. */
.mini-player { position:fixed; z-index:40; bottom:max(16px,env(safe-area-inset-bottom)); left:max(24px,calc((100vw - 1160px)/2)); right:max(24px,calc((100vw - 1160px)/2)); display:flex; align-items:center; gap:20px; min-height:80px; padding:12px 18px; border:1px solid var(--border-strong); border-radius:24px; background:var(--glass); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:var(--shadow); }
.now-summary { display:flex; align-items:center; flex:1; gap:12px; min-width:0; text-align:left; padding:0; }
.now-summary img { width:52px; height:52px; object-fit:cover; border-radius:10px; }
.now-summary>span { min-width:0; }
.now-summary small { display:block; color:var(--muted); font-size:14px; line-height:1.5; }
.now-summary strong { display:block; max-width:264px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-size:15px; font-weight:600; line-height:1.7; }
.mini-controls,.mini-extras { display:flex; align-items:center; gap:6px; }
.play-control svg { width:30px; height:30px; }
.mini-progress { display:flex; align-items:center; gap:10px; flex:1; max-width:270px; }
.mini-progress span { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mini-progress input { width:100%; min-width:40px; }
.speed-control select { min-width:58px; font-size:16px; font-weight:650; color:var(--purple); border:0; background:transparent; cursor:pointer; border-radius:9px; padding:0 4px; }
select option { color:var(--ink); background:var(--raised); }
input[type=range] { appearance:none; -webkit-appearance:none; height:44px; background:transparent; cursor:pointer; accent-color:var(--purple); margin:0; }
input[type=range]::-webkit-slider-runnable-track { height:5px; border-radius:999px; background:linear-gradient(to right,var(--purple) var(--progress,0%),var(--track) var(--progress,0%)); }
input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; background:var(--raised); width:17px; height:17px; border-radius:50%; margin-top:-6px; border:1px solid var(--border-strong); box-shadow:0 1px 4px #18132026; }
input[type=range]::-moz-range-track { height:5px; border-radius:999px; background:var(--track); }
input[type=range]::-moz-range-progress { height:5px; background:var(--purple); }
input[type=range]::-moz-range-thumb { background:var(--raised); width:17px; height:17px; border-radius:50%; border:1px solid var(--border-strong); }
.mini-track { display:none; position:absolute; bottom:0; left:18px; right:18px; height:2px; background:var(--line); overflow:hidden; }
.mini-track span { display:block; height:100%; width:100%; background:var(--purple); transform:scaleX(0); transform-origin:left; }
.toast { position:fixed; z-index:60; left:50%; bottom:112px; transform:translateX(-50%); width:max-content; max-width:min(90vw,560px); padding:12px 18px; background:var(--toast-bg); color:var(--toast-ink); border-radius:16px; box-shadow:var(--shadow); font-size:14px; }
.audio-status { color:var(--purple-dark); font-size:14px; line-height:1.5; white-space:normal; }
dialog { border:1px solid var(--line); padding:0; color:var(--ink); background:var(--raised); box-shadow:0 24px 100px #17132038; overscroll-behavior:contain; }
dialog::backdrop { background:var(--scrim); }
dialog>.toast { bottom:max(20px,env(safe-area-inset-bottom)); }
.player-dialog { width:min(464px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); border-radius:32px; background:var(--bg); }
.now-playing { padding:18px 32px 28px; }
.sheet-header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:20px; }
.sheet-header>span { color:var(--muted); font-size:14px; font-weight:600; }
.sheet-header .icon-button { background:var(--surface); }
.sheet-header svg { width:20px; height:20px; }
.now-art { width:min(100%,320px); height:auto; aspect-ratio:1; object-fit:cover; margin:auto; border-radius:20px; box-shadow:0 14px 28px #18132026; }
.now-copy { margin-top:24px; }
.now-copy>p { color:var(--muted); font-size:15px; }
.now-copy>p:first-child { color:var(--purple); font-size:14px; margin-bottom:5px; }
.now-copy h2 { font-size:24px; line-height:1.45; margin-bottom:6px; }
.now-copy .audio-status { margin-top:8px; }
.now-timeline { margin:12px 0 8px; }
.now-timeline input { width:100%; }
.now-timeline>div { display:flex; justify-content:space-between; color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; margin-top:-4px; }
.now-transport { display:flex; align-items:center; justify-content:space-between; }
.now-transport>button:first-child svg,.now-transport>button:last-child svg { width:19px; height:19px; }
.now-transport .large-play { width:68px; height:68px; }
.large-play svg { width:48px; height:48px; }
.now-options { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.sleep-control { display:flex; align-items:center; gap:4px; color:var(--purple); }
.sleep-control svg { width:18px; height:18px; }
.sleep-control select { color:var(--muted); background:transparent; border:0; max-width:130px; font-size:16px; cursor:pointer; }
.next-up { color:var(--muted); font-size:14px; margin-top:14px; text-align:center; }
.transcript-dialog { width:min(760px,calc(100vw - 32px)); max-height:90dvh; border-radius:28px; padding:28px 36px; }
.transcript-header,.settings-header { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.transcript-header .icon-button,.settings-header .icon-button { background:var(--surface); }
.transcript-header h2,.settings-header h2 { font-size:26px; line-height:1.45; margin-top:5px; }
.transcript-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:22px 0 12px; }
.transcript-tools .search-box { flex:1; }
.transcript-play { font-size:15px; white-space:nowrap; padding:10px 18px; }
.transcript-note { color:var(--muted); font-size:14px; margin-bottom:24px; }
.transcript-turn { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; padding:16px 12px; margin:0 -12px; border-radius:14px; }
.transcript-turn.active { background:var(--subtle-hover); }
.turn-time { align-self:start; min-width:44px; min-height:44px; color:var(--purple); font-size:14px; font-variant-numeric:tabular-nums; padding:6px 0; }
.turn-speaker { font-size:14px; font-weight:650; color:var(--male-ink); }
.transcript-turn.female .turn-speaker { color:var(--purple); }
.turn-text { color:var(--transcript-ink); font-size:17px; line-height:1.95; margin-top:4px; }
.turn-text mark { background:var(--highlight); color:inherit; border-radius:3px; }
.transcript-sources { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.transcript-sources a { display:block; overflow-wrap:anywhere; margin-top:12px; }
.settings-dialog { width:min(480px,calc(100vw - 32px)); max-height:90dvh; border-radius:28px; padding:28px; }
.appearance-options { margin-top:28px; }
.appearance-options legend { font-size:18px; font-weight:650; }
.appearance-options>p { color:var(--muted); font-size:14px; margin:6px 0 18px; }
.appearance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.appearance-grid label { position:relative; display:flex; flex-direction:column; align-items:center; padding:6px; gap:10px; border-radius:16px; cursor:pointer; }
.appearance-grid input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.appearance-grid label:has(input:checked) { background:var(--pale); box-shadow:inset 0 0 0 2px var(--purple); }
.appearance-grid label:has(input:focus-visible) { outline:3px solid var(--purple); outline-offset:4px; }
.appearance-grid label>span:last-child { display:flex; align-items:center; justify-content:center; gap:5px; min-height:32px; font-size:14px; font-weight:600; }
.appearance-grid svg { width:16px; height:16px; }
.appearance-preview { display:flex; flex-direction:column; justify-content:end; gap:7px; width:100%; height:112px; padding:12px 10px; border-radius:11px; border:1px solid #93909b; background:#f7f7fa; }
.appearance-preview i { width:100%; height:7px; background:#d6d3de; border-radius:4px; }
.appearance-preview i:first-child { width:44%; height:32px; margin-bottom:4px; background:#8751c4; border-radius:7px; }
.appearance-preview i:last-child { width:70%; }
.preview-dark { background:#222226; }
.preview-dark i { background:#5f586a; }
.preview-system { background:linear-gradient(90deg,#f7f7fa 50%,#222226 50%); }
.settings-note { margin:24px 0; font-size:14px; color:var(--muted); line-height:1.8; }
.settings-done { width:100%; }
.fallback { margin:24px; padding:20px; background:var(--raised); }
.fallback a { text-decoration:underline; }
/* Motion changes opacity/transform only; all controls remain interruptible. */
button,.primary-button,.secondary-button,summary { transition:transform var(--motion-press) var(--ease-out),opacity var(--motion-state) var(--ease-out); }
button:active:not(:disabled),.primary-button:active,.secondary-button:active { transform:scale(.97); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) { .episode-cover:hover img { transform:scale(1.025); } }
@keyframes enter-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes fade-out { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:no-preference) {
  .show-art { animation:enter-up 400ms var(--ease-out) both; }
  .show-copy { animation:enter-up 400ms 60ms var(--ease-out) both; }
  dialog[open]::backdrop { animation:fade-in var(--motion-sheet) var(--ease-out) both; }
  dialog.is-closing::backdrop { animation:fade-out 200ms var(--ease-out) both; }
}
@media(max-width:1100px) {
  .site-header { padding-inline:28px; }
  .settings-button>span { display:none; }
  .settings-button { width:44px; justify-content:center; padding:10px; }
  .show-hero { gap:36px; padding-inline:0; }
  .content-grid { grid-template-columns:minmax(0,1fr) 240px; gap:24px; }
  .episode { grid-template-columns:144px minmax(0,1fr); gap:16px; }
  .sequence-note { display:none; }
  .mini-progress { display:none; }
  .mini-track { display:block; }
}
@media(max-width:850px) {
  main { padding-inline:24px; }
  .site-header { padding-inline:24px; gap:16px; }
  .nav-link { padding-inline:13px; }
  .nav-link svg { display:none; }
  .content-grid { grid-template-columns:minmax(0,1fr); }
  .show-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:12px; }
  .about-card { margin:0; }
  .source-card { grid-column:1/-1; margin-top:0; }
  .source-card ol { columns:2; column-gap:32px; }
  .source-card li { break-inside:avoid; }
  .show-hero { grid-template-columns:224px minmax(0,1fr); gap:28px; padding-top:36px; }
  .show-art { width:224px; }
  .show-description { font-size:16px; }
  .desktop-break { display:none; }
  .episode { grid-template-columns:180px minmax(0,1fr); }
}
@media(max-width:620px) {
  html { scroll-padding-top:144px; }
  main { padding-inline:20px; }
  .site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; height:auto; min-height:128px; padding:12px 20px 8px; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; border:0; }
  .site-header>.icon-button { grid-column:2; grid-row:1; }
  .brand { font-size:20px; gap:10px; }
  .brand-mark { width:42px; height:42px; }
  .brand-caption { font-size:14px; }
  .primary-nav { position:static; grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:3px; border-radius:16px; background:var(--surface); }
  .nav-link { min-height:44px; gap:6px; padding:6px 8px; font-size:14px; line-height:1.4; border-radius:13px; }
  .nav-link svg { display:block; width:18px; height:18px; }
  .nav-link[aria-current] { background:var(--pale); box-shadow:none; }
  .show-hero { grid-template-columns:124px minmax(0,1fr); gap:4px 20px; padding:24px 0 28px; align-items:center; }
  .show-art { width:124px; border-radius:18px; grid-column:1; grid-row:1/4; align-self:center; }
  .show-copy { display:contents; }
  .show-copy>.eyebrow { grid-column:2; font-size:14px; align-self:end; }
  h1 { grid-column:2; font-size:32px; margin:0; }
  .hosts { grid-column:2; font-size:14px; align-self:start; }
  .hosts span { padding:0 2px; }
  .show-description { grid-column:1/-1; margin-top:20px; font-size:16px; line-height:1.85; }
  .show-description br { display:none; }
  .show-meta { grid-column:1/-1; margin-top:10px; gap:4px 12px; font-size:14px; }
  .hero-actions { grid-column:1/-1; margin-top:16px; gap:10px; flex-wrap:nowrap; }
  .hero-actions .primary-button { flex:1; }
  .hero-actions .secondary-button { padding-inline:16px; }
  .resume-note { grid-column:1/-1; margin-top:8px; font-size:14px; }
  .editorial-line { gap:8px; padding:16px 0; margin-bottom:24px; font-size:14px; }
  .editorial-line>span { display:none; }
  .section-heading { margin-bottom:16px; }
  .section-heading h2 { font-size:27px; }
  .episode-tools { gap:12px; }
  .episode-tools .search-box { flex-basis:100%; max-width:none; order:-1; }
  .episode-tools .segmented { width:100%; }
  .segmented label { flex:1; }
  .episode-list { background:transparent; border:0; padding:0; border-radius:0; }
  .episode { grid-template-columns:112px minmax(0,1fr); gap:14px; padding:24px 0; scroll-margin-top:16px; }
  .episode-cover { aspect-ratio:1.3; border-radius:12px; }
  .episode-meta { font-size:14px; gap:3px 5px; }
  .episode-title { font-size:17px; line-height:1.55; }
  .episode-description { font-size:14px; line-height:1.75; -webkit-line-clamp:2; }
  .episode-actions { gap:4px; margin-top:10px; }
  .episode-play { padding:6px 10px; }
  .episode-progress { order:4; width:100%; }
  .read-button { margin-left:0; padding:6px; }
  .read-button svg { display:none; }
  .save-button { margin-left:auto; }
  .show-sidebar { display:block; }
  .spotlight { display:grid; grid-template-columns:120px minmax(0,1fr); border-radius:18px; }
  .spotlight-art img { height:100%; aspect-ratio:auto; }
  .spotlight-art>span { display:none; }
  .spotlight-copy { padding:18px; }
  .spotlight h2 { font-size:21px; }
  .spotlight .eyebrow { font-size:14px; }
  .spotlight-copy>p:not(.eyebrow) { font-size:14px; }
  .about-card { margin-top:32px; }
  .about-card h2 br { display:none; }
  .host-pair { display:inline-flex; width:49%; gap:10px; vertical-align:top; }
  .host-pair small { max-width:9em; }
  .source-card { margin-top:20px; }
  .source-card ol { columns:1; }
  .site-footer { display:block; padding-bottom:calc(120px + env(safe-area-inset-bottom)); }
  .site-footer>p { margin-top:12px; }
  .mini-player { bottom:calc(10px + env(safe-area-inset-bottom)); left:12px; right:12px; gap:4px; min-height:70px; padding:9px 10px; border-radius:22px; }
  .now-summary { gap:9px; }
  .now-summary img { width:44px; height:44px; border-radius:9px; }
  .now-summary small { font-size:14px; }
  .now-summary strong { font-size:14px; max-width:calc(100vw - 182px); }
  .now-summary .audio-status { max-width:calc(100vw - 182px); }
  .mini-controls { gap:0; }
  .mini-controls .skip-control,.mini-extras { display:none; }
  .mini-controls .icon-button { padding:9px; }
  .toast { bottom:calc(92px + env(safe-area-inset-bottom)); }
  .player-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; margin:0; }
  .now-playing { max-width:460px; margin:auto; padding:calc(16px + env(safe-area-inset-top)) 28px calc(24px + env(safe-area-inset-bottom)); }
  .sheet-header { margin-bottom:24px; }
  .now-art { width:min(100%,calc(100dvh - 466px)); min-width:144px; max-width:340px; border-radius:22px; }
  .now-copy { margin-top:28px; }
  .now-copy h2 { font-size:23px; }
  .now-options { margin-top:14px; }
  .transcript-dialog { width:100%; max-width:100%; height:94dvh; max-height:94dvh; margin:auto 0 0; border:0; border-radius:26px 26px 0 0; padding:24px 22px calc(28px + env(safe-area-inset-bottom)); }
  .transcript-header h2 { font-size:23px; }
  .transcript-tools .search-box { flex-basis:100%; }
  .transcript-turn { grid-template-columns:44px minmax(0,1fr); gap:10px; }
  .turn-text { font-size:17px; }
  .settings-dialog { width:100%; max-width:100%; margin:auto 0 0; padding:26px 24px calc(24px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; }
  .settings-header h2 { font-size:25px; }
}
@media(max-width:359px) {
  main { padding-inline:16px; }
  .site-header { padding-inline:16px; }
  .show-hero { grid-template-columns:104px minmax(0,1fr); gap:4px 16px; }
  .show-art { width:104px; }
  h1 { font-size:29px; }
  .hero-actions .primary-button,.hero-actions .secondary-button { padding-inline:14px; font-size:15px; }
  .episode { grid-template-columns:92px minmax(0,1fr); gap:12px; }
  .read-button { font-size:14px; padding-inline:3px; }
  .episode-play { padding-inline:8px; }
  .now-playing { padding-inline:18px; }
  .spotlight { grid-template-columns:92px minmax(0,1fr); }
  .spotlight-copy { padding:16px; }
  .appearance-grid { gap:8px; }
  .settings-dialog { padding-inline:20px; }
  .appearance-preview { height:98px; }
}
@media(min-width:621px) and (max-height:560px) {
  .player-dialog { width:min(800px,calc(100vw - 24px)); max-height:calc(100dvh - 16px); }
  .now-playing { display:grid; grid-template-columns:minmax(140px,220px) minmax(0,1fr); gap:4px 24px; padding:12px 24px 16px; }
  .sheet-header { grid-column:1/-1; margin:0; }
  .now-art { grid-column:1; grid-row:2/6; width:100%; max-width:220px; align-self:center; }
  .now-copy { grid-column:2; margin:0; }
  .now-copy h2 { font-size:20px; line-height:1.3; margin:0; }
  .now-copy>p:first-child { margin:0; }
  .now-copy>p:not(:first-child):not(.audio-status) { display:none; }
  .now-timeline { grid-column:2; margin:0; }
  .now-transport { grid-column:2; margin:0; }
  .now-transport .large-play { width:48px; height:48px; }
  .large-play svg { width:36px; height:36px; }
  .now-options { grid-column:2; margin:0; padding-top:4px; }
  .next-up { grid-column:1/-1; margin:0; }
}
@media(prefers-reduced-transparency:reduce) { .site-header,.primary-nav,.mini-player { background:var(--raised); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media(prefers-contrast:more) { :root { --border-strong:var(--ink); --line:var(--muted); --glass:var(--raised); } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  button:active:not(:disabled),.primary-button:active,.secondary-button:active { transform:none; }
}

/* Sapiens visual identity. The listening controls retain the reference site's behavior. */
.site-header { height:88px; }
.brand-name { font-family:Georgia,"Times New Roman",serif; letter-spacing:.13em; font-size:24px; }
.brand-caption { font-family:-apple-system,BlinkMacSystemFont,"PingFang HK",sans-serif; letter-spacing:.035em; font-size:12px; margin-top:5px; }
.brand-mark { width:42px; height:42px; }
.show-hero { grid-template-columns:340px minmax(0,1fr); gap:64px; padding:54px 20px 46px; }
.show-art { width:340px; position:relative; border-radius:12px; border:1px solid #deb77b33; box-shadow:0 24px 64px #0003; }
.art-caption { position:absolute; bottom:0; inset-inline:0; text-align:center; color:#fff2d4; padding:50px 12px 20px; background:linear-gradient(transparent,#08110bf2); pointer-events:none; }
.art-caption>span { font-size:7px; letter-spacing:.25em; }
.art-caption>strong { display:block; font-family:Georgia,"Times New Roman",serif; font-size:43px; font-weight:400; line-height:1.2; letter-spacing:.15em; margin-left:.15em; }
.art-caption>small { font-size:8px; letter-spacing:.36em; }
.hero-eyebrow { display:inline-flex; gap:7px; align-items:center; padding:5px 10px; font-size:11px; border:1px solid var(--line); border-radius:6px; letter-spacing:.06em; }
.live-dot { width:5px; height:5px; background:var(--purple); border-radius:50%; }
.hero-english { font-size:10px; letter-spacing:.22em; color:var(--muted); margin-top:20px; }
.show-copy h1 { font-family:"Songti TC","Noto Serif TC",Georgia,serif; font-size:48px; letter-spacing:.06em; font-weight:650; line-height:1.25; margin:8px 0 16px; }
.show-copy h1>span { display:block; font-family:-apple-system,BlinkMacSystemFont,"PingFang HK",sans-serif; font-size:22px; letter-spacing:.04em; font-weight:450; margin-top:12px; color:var(--purple); }
.hosts { font-size:14px; color:var(--muted); font-weight:450; }
.show-description { font-size:16px; margin-top:16px; line-height:1.9; }
.show-meta { font-size:12px; gap:12px; }
.show-meta>span+span { padding-left:12px; border-left:1px solid var(--line); }
.hero-actions { margin-top:23px; }
.primary-button,.secondary-button { border-radius:10px; font-size:14px; }
.resume-note { font-size:12px; }
.editorial-line { margin-bottom:0; font-size:12px; padding-block:18px; }
.journey { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 44px; border-bottom:1px solid var(--line); }
.journey>a { display:flex; align-items:center; gap:14px; padding:24px 14px; min-width:0; }
.journey>a:first-child { padding-left:0; }
.journey>a:hover { background:var(--subtle-hover); }
.journey-number { font-family:Georgia,serif; font-size:25px; color:var(--purple); min-width:25px; }
.journey strong { display:block; font-size:15px; font-weight:500; }
.journey small { display:block; font-size:10px; color:var(--muted); margin-top:4px; white-space:nowrap; }
.journey-arrow { margin-left:auto; font-size:15px; color:var(--muted); }
.section-heading .eyebrow { font-size:10px; letter-spacing:.1em; }
.section-heading h2 { font-size:26px; margin-top:6px; }
.episode-list { padding:0; border:0; border-radius:0; background:transparent; }
.part-heading { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--purple); padding:15px 0; border-bottom:1px solid var(--line); margin-top:14px; letter-spacing:.06em; }
.part-heading>span+span { font-size:9px; letter-spacing:.12em; align-self:center; }
.episode { padding:36px 0; grid-template-columns:clamp(240px,42%,360px) minmax(0,1fr); gap:30px; align-items:center; }
.episode-cover { border:1px solid var(--line); border-radius:8px; padding:8px; aspect-ratio:1; align-self:center; background:var(--raised); box-shadow:0 12px 28px #00000024; }
.episode-cover img { display:block; height:100%; width:100%; object-fit:contain; border-radius:3px; }
.episode-cover:hover img { transform:none; }
.episode-meta { font-size:11px; }
.episode-title { font-size:19px; font-weight:600; letter-spacing:0; }
.episode-description { font-size:13px; line-height:1.8; }
.episode-actions { margin-top:10px; }
.episode-play { font-size:13px; background:var(--pale); border-radius:8px; padding-inline:12px; }
.read-button { font-size:12px; }
.episode-progress { font-size:11px; }
.spotlight { border-radius:12px; }
.spotlight-art { position:relative; }
.spotlight-art img { aspect-ratio:1.3; object-fit:cover; }
.spotlight-art>span { font-size:11px; border-radius:5px; background:#14201ccb; color:#f4efe3; }
.spotlight-copy { padding:24px; }
.spotlight-copy .eyebrow { font-size:11px; }
.spotlight h2 { font-family:"Songti TC",Georgia,serif; font-size:24px; line-height:1.6; font-weight:600; letter-spacing:.01em; }
.spotlight-copy>p:not(.eyebrow) { font-size:13px; line-height:1.9; }
.spotlight .text-button { font-size:13px; }
.about-card .eyebrow { font-size:10px; letter-spacing:.04em; }
.about-card h2 { font-size:25px; }
.about-card>p:not(.eyebrow) { font-size:13px; }
.source-card summary { font-size:13px; }
.mini-player { background:var(--glass); border-color:var(--border-strong); border-radius:18px; }
.play-control { background:var(--purple); color:var(--on-accent); border-radius:50%; }
.play-control:hover { color:var(--on-accent); background:var(--purple-dark); }
.appearance-preview i:first-child { background:#b08c55; }
.preview-dark { background:#14201c; }
.preview-dark i { background:#516153; }
.preview-system { background:linear-gradient(90deg,#f5f1e9 50%,#14201c 50%); }
@media(min-width:1200px) { .content-grid { grid-template-columns:minmax(0,1fr) 284px; gap:48px; } }
@media(max-width:1100px) {
 .show-hero { grid-template-columns:300px minmax(0,1fr); gap:42px; padding-inline:0; }
 .show-art { width:300px; }
 .show-copy h1 { font-size:44px; }
 .journey>a { gap:8px; padding-inline:10px; }
 .journey-arrow { display:none; }
 .episode { grid-template-columns:minmax(220px,.9fr) minmax(0,1fr); gap:24px; }
}
@media(max-width:850px) {
 .show-hero { grid-template-columns:250px minmax(0,1fr); gap:30px; }
 .show-art { width:250px; }
 .show-copy h1 { font-size:38px; }
 .show-copy h1>span { font-size:18px; }
 .show-meta { gap:6px; }
 .show-meta>span+span { padding-left:6px; }
 .journey { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .journey>a { padding:16px; }
 .journey>a:first-child { padding-left:16px; }
 .journey>a:nth-child(-n+2) { border-bottom:1px solid var(--line); }
 .journey>a:nth-child(odd) { border-right:1px solid var(--line); }
 .journey-arrow { display:block; }
 .episode { grid-template-columns:minmax(240px,.85fr) minmax(0,1fr); gap:28px; }
}
@media(max-width:620px) {
 .site-header { height:auto; }
 .brand-name { font-size:22px; }
 .brand-caption { font-size:11px; }
 .show-hero { grid-template-columns:128px minmax(0,1fr); gap:0 20px; padding:30px 0 24px; }
 .show-art { width:128px; grid-row:1/5; border-radius:8px; }
 .art-caption { padding:20px 6px 7px; }
 .art-caption>span { display:none; }
 .art-caption>strong { font-size:19px; }
 .art-caption>small { font-size:4px; letter-spacing:.22em; }
 .show-copy>.hero-eyebrow { display:flex; padding:0; font-size:10px; border:0; }
 .hero-english { grid-column:2; font-size:7px; margin-top:10px; letter-spacing:.12em; }
 .show-copy h1 { grid-column:2; font-size:29px; margin:5px 0 9px; letter-spacing:.02em; }
 .show-copy h1>span { font-size:12px; margin-top:9px; letter-spacing:0; }
 .hosts { font-size:11px; }
 .show-description { grid-column:1/-1; font-size:15px; margin-top:24px; }
 .show-meta { font-size:11px; margin-top:13px; gap:8px; }
 .show-meta>span+span { padding-left:8px; }
 .hero-actions { margin-top:20px; }
 .resume-note { font-size:11px; margin-top:11px; }
 .editorial-line { font-size:11px; }
 .journey { margin-bottom:30px; }
 .journey>a { padding:16px 10px; gap:10px; }
 .journey>a:first-child { padding-left:10px; }
 .journey-number { font-size:21px; min-width:20px; }
 .journey strong { font-size:13px; }
 .journey small { font-size:8px; }
 .journey-arrow { display:none; }
 .part-heading>span+span { font-size:7px; }
 .episode { grid-template-columns:minmax(0,1fr); gap:22px; padding:30px 0; }
 .episode-cover { aspect-ratio:1; align-self:start; margin-top:0; }
 .episode-title { font-size:21px; line-height:1.6; }
 .episode-meta { font-size:11px; }
 .episode-description { font-size:14px; -webkit-line-clamp:unset; }
 .episode-actions { gap:2px; }
 .episode-play { padding-inline:8px; }
 .episode-play svg { width:16px; }
 .read-button { font-size:12px; }
 .save-button { width:36px; min-width:36px; padding:6px; }
 .spotlight h2 { font-size:21px; }
 .spotlight-art img { height:100%; aspect-ratio:auto; }
 .spotlight-copy { padding:20px; }
 .now-summary small { font-size:10px; }
 .now-summary strong { font-size:12px; }
 .mini-player { border-radius:16px; }
 .brand-caption { letter-spacing:0; }
}
@media(max-width:360px) {
 .show-hero { grid-template-columns:108px minmax(0,1fr); gap:0 14px; }
 .show-art { width:108px; }
 .show-copy h1 { font-size:26px; }
 .hero-eyebrow { font-size:9px!important; }
 .episode { grid-template-columns:minmax(0,1fr); gap:20px; }
 .episode-play { font-size:12px; padding-inline:6px; }
 .read-button { font-size:11px; padding-inline:4px; }
}