:root { color-scheme: light; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #dedbd4; }
body { overflow: hidden; }
button { font: inherit; }
.app-shell { position: relative; width: min(100vw, 750px); height: 100dvh; min-height: 560px; margin: 0 auto; overflow: hidden; color: #161616; background: #f6f0e6; box-shadow: 0 0 50px rgb(26 31 31 / 18%); }
.topbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; color: #111; background: linear-gradient(#f8f1e8e8, #f8f1e800); font: 12px/1 system-ui, sans-serif; letter-spacing: .08em; }
.icon-button { width: 34px; height: 34px; border: 1px solid #1e1e1e; border-radius: 50%; color: #111; background: rgb(255 255 255 / 36%); cursor: pointer; }
.view { position: absolute; inset: 0; padding-top: calc(58px + env(safe-area-inset-top)); overflow: auto; opacity: 0; visibility: hidden; transform: translateY(16px); transition: .45s ease; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.view.is-active { z-index: 2; opacity: 1; visibility: visible; transform: none; }
.landing { padding-top: 0; overflow: hidden; background: #d9f1f5; }
.hero { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%; }
.landing::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(transparent, rgb(7 55 67 / 42%)); pointer-events: none; }
.landing-actions { position: absolute; z-index: 2; left: 12%; right: 12%; bottom: max(46px, calc(env(safe-area-inset-bottom) + 24px)); display: grid; gap: 10px; }
.landing-actions button, .outline { border: 1px solid #111; padding: 14px 20px; color: #fff; background: #111; font: 13px/1.2 system-ui, sans-serif; letter-spacing: .14em; cursor: pointer; }
.landing-actions .secondary { color: #fff; border-color: rgb(255 255 255 / 80%); background: rgb(7 38 44 / 38%); backdrop-filter: blur(8px); }
.episodes { padding-left: 7%; padding-right: 7%; padding-bottom: 50px; text-align: center; background: #f5efe5; }
.island-wrap { margin: 28px -8% 12px; }
.island-wrap img { width: 100%; display: block; }
.section-kicker { margin: 8px 0; font: 10px/1.2 system-ui, sans-serif; letter-spacing: .28em; }
.episodes h1, .live h2 { margin: 0 0 24px; font-weight: 500; font-size: clamp(28px, 6vw, 46px); }
.episode-list { display: grid; gap: 8px; }
.episode-list button { min-height: 74px; border: 1px solid rgb(20 20 20 / 18%); padding: 0; overflow: hidden; background: #f8f4ec; cursor: pointer; }
.episode-list img { width: 100%; display: block; }
.episode { overflow: hidden; background: #f7f0e6; }
.episode-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.episode-copy { position: absolute; left: 8%; right: 8%; bottom: max(38px, calc(env(safe-area-inset-bottom) + 20px)); padding: 24px; text-align: center; background: rgb(250 246 239 / 88%); border: 1px solid rgb(25 25 25 / 15%); backdrop-filter: blur(10px); }
.episode-copy > img { width: 100%; max-width: 460px; }
.episode-copy p { margin: 16px auto; max-width: 470px; font-size: 14px; line-height: 1.9; }
.round-play { width: 58px; height: 58px; border: 1px solid #111; border-radius: 50%; padding-left: 6px; background: transparent; cursor: pointer; }
.round-play.is-playing { color: #fff; background: #111; }
.play-state { display: block; margin-top: 10px; font: 11px/1 system-ui, sans-serif; letter-spacing: .08em; }
.live { padding: calc(86px + env(safe-area-inset-top)) 7% 48px; text-align: center; background: #f5efe5; }
.live-card { position: relative; margin-bottom: 28px; border: 1px solid rgb(20 20 20 / 20%); padding: 8px; background: #fff; }
.live-card > img { width: 100%; display: block; }
.poster-play { position: absolute; inset: 50% auto auto 50%; width: 72px; height: 72px; border: 0; background: transparent; transform: translate(-50%, -50%); cursor: pointer; }
.poster-play img { width: 100%; }
.poster-play.is-playing { filter: invert(1); }
.live-desc { max-width: 520px; margin: 0 auto 26px; font-size: 14px; line-height: 1.9; color: #5d5851; }
.outline { color: #111; background: transparent; }
@media (min-width: 751px) { .app-shell { height: min(100dvh, 1080px); } }