@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root { color-scheme: dark; --orange: #ff5500; --yellow: #ffaa00; }
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 20px; background: #0a0a0c; color: #e0e0e6; font-family: 'Share Tech Mono', monospace; }
main { max-width: 900px; margin: auto; }
a { color: var(--yellow); text-underline-offset: 4px; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
header { border: 1px solid #743117; padding: 28px; background: #141419; }
.station { color: var(--orange); font-size: 1.4rem; letter-spacing: 4px; text-decoration: none; }
nav { display: flex; gap: 24px; flex-wrap: wrap; margin: 24px 0 32px; }
.kicker { color: var(--yellow); font-size: .8rem; letter-spacing: 2px; }
h1 { color: var(--orange); font-size: clamp(2rem, 6vw, 3rem); text-transform: uppercase; margin: 12px 0; letter-spacing: 2px; }
.intro, .episode-meta, footer { color: #aaaab3; }
ol { list-style: none; margin: 24px 0; padding: 0; }
.episode { padding: 24px 0; border-top: 1px solid #493027; scroll-margin-top: 20px; }
h2 { margin: 10px 0; font-size: 1.4rem; line-height: 1.3; overflow-wrap: anywhere; }
.episode-meta { font-size: .85rem; letter-spacing: 1px; }
.description { white-space: pre-wrap; overflow-wrap: anywhere; color: #c6c6cf; line-height: 1.6; }
.playback { display: flex; align-items: center; gap: 20px; margin-top: 18px; }
.slit-player { --fill: 0%; position: relative; display: flex; align-items: center; gap: 14px; width: min(100%, 550px); min-width: 0; padding: 9px 12px; isolation: isolate; overflow: hidden; border: 1px solid #55301f; background: #111115; box-shadow: inset 0 0 0 1px #1d1716; }
.slit-player::before { content: ''; position: absolute; z-index: -1; inset: 0; width: var(--fill); background: linear-gradient(90deg, rgba(255, 68, 0, .14), rgba(255, 112, 0, .3)); box-shadow: 0 0 16px rgba(255, 75, 0, .65), 0 0 34px rgba(255, 50, 0, .28); transition: width .12s linear; }
.slit-player::after { content: ''; position: absolute; z-index: -1; left: var(--fill); top: 50%; width: 2px; height: 70%; transform: translate(-50%, -50%); background: #ffd0a1; box-shadow: 0 0 7px 2px #ff6a00, 0 0 18px 5px rgba(255, 73, 0, .6); opacity: var(--fill-opacity, 0); transition: left .12s linear, opacity .2s; }
.slit-player.is-playing { --fill-opacity: 1; }
.play-toggle { flex: 0 0 auto; min-width: 58px; padding: 5px 7px; color: #ffc078; font-size: .72rem; letter-spacing: 1px; border: 0; background: transparent; }
.play-toggle:hover { color: #fff; text-shadow: 0 0 8px var(--orange); }
.play-progress { appearance: none; flex: 1; width: 100%; height: 14px; margin: 0; cursor: pointer; background: transparent; }
.play-progress::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 147, 71, .3); }
.play-progress::-moz-range-track { height: 2px; background: rgba(255, 147, 71, .3); }
.play-progress::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; margin-top: -4px; border: 0; border-radius: 50%; background: #ffd0a1; box-shadow: 0 0 8px 2px var(--orange); }
.play-progress::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: #ffd0a1; box-shadow: 0 0 8px 2px var(--orange); }
.play-time { min-width: 74px; color: #c18d6e; font-size: .7rem; text-align: right; }
.slit-player audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.playback a { white-space: nowrap; font-size: .9rem; }
button { font: inherit; color: var(--yellow); border: 1px solid var(--orange); background: #141419; padding: 10px 16px; cursor: pointer; }
footer { border-top: 1px solid #493027; margin-top: 32px; padding-top: 24px; font-size: .8rem; letter-spacing: 2px; }
@media (max-width: 540px) { body { padding: 20px 16px; } header { padding: 20px; } .playback { flex-direction: column; align-items: stretch; gap: 12px; } .slit-player { width: 100%; gap: 8px; padding-inline: 8px; } .play-time { min-width: 65px; } }
@media (prefers-reduced-motion: reduce) { .slit-player::before, .slit-player::after { transition: none; } }