.csm-radio, .csm-radio * { box-sizing: border-box; }
.csm-radio {
    --radio-accent: #e5ff52;
    background: #101112; color: #f5f5f1; border: 1px solid #34363a; border-radius: 14px;
    width: 100%; max-width: 560px; padding: 16px 18px 12px;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: left; box-shadow: 0 12px 44px #0005;
    color-scheme: dark; isolation: isolate;
}
.csm-radio--dock { position: fixed; z-index: 9998; right: 20px; bottom: calc(18px + var(--csm-radio-notice-height, 0px) + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100% - 40px)); }
.csm-radio__identity { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.csm-radio__identity > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csm-radio__light { height: 7px; width: 7px; flex: 0 0 7px; border-radius: 50%; background: #6b6e73; }
.csm-radio.is-playing .csm-radio__light { background: var(--radio-accent); box-shadow: 0 0 12px #e5ff5255; }
.csm-radio__type { margin-left: auto; color: #9ea0a5; font-size: 9px; letter-spacing: .08em; white-space: nowrap; }
.csm-radio__main { display: flex; align-items: center; gap: 9px; }
.csm-radio button { cursor: pointer; font: inherit; text-transform: none; letter-spacing: normal; box-shadow: none; margin: 0; }
.csm-radio .csm-radio__play { width: 48px; height: 48px; min-width: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--radio-accent); color: #101112; padding: 12px; border: 0; }
.csm-radio .csm-radio__play:hover { background: #f0ff99; }
.csm-radio svg { display: block; width: 22px; height: 22px; }
.csm-radio__now { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.csm-radio__eyebrow { font-size: 8px; letter-spacing: .14em; color: #b4b6b9; font-weight: 650; }
.csm-radio__now strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f5f5f1; }
.csm-radio__status { font-size: 10px; line-height: 1.4; color: #afb2b7; }
.csm-radio .csm-radio__icon { display: grid; place-items: center; background: transparent; color: #eee; border: 1px solid transparent; border-radius: 8px; padding: 8px; height: 44px; width: 36px; min-width: 36px; }
.csm-radio .csm-radio__icon:hover { background: #272a2d; }
.csm-radio button:disabled { opacity: .3; cursor: default; }
.csm-radio__volume { display: flex; align-items: center; gap: 6px; margin: 0; }
.csm-radio__volume input[type="range"] { accent-color: var(--radio-accent); width: 64px; min-height: 44px; padding: 0; margin: 0; background: transparent; cursor: pointer; }
.csm-radio__volume output { width: 30px; font-size: 10px; font-variant-numeric: tabular-nums; color: #b4b6b9; }
.csm-radio__links { margin-top: 11px; padding-top: 9px; border-top: 1px solid #2c2e31; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.csm-radio__links a, .csm-radio__links button { color: #b8babe; font-size: 10px; line-height: 1.5; background: transparent; border: 0; padding: 4px 0; text-decoration: none; border-radius: 0; }
.csm-radio__links a:last-child { margin-left: auto; }
.csm-radio__links a:hover, .csm-radio__links button:hover { color: var(--radio-accent); text-decoration: underline; }
.csm-radio :is(button, a, input):focus-visible { outline: 2px solid var(--radio-accent); outline-offset: 3px; }
.csm-radio.has-error .csm-radio__status { color: #ffbdab; }
.csm-radio.is-loading .csm-radio__light { background: #e5ff52; animation: csm-radio-pulse 1.2s ease-in-out infinite alternate; }
.csm-radio__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.csm-radio__embed { position: fixed; right: 20px; bottom: calc(220px + var(--csm-radio-notice-height, 0px)); width: min(560px, calc(100% - 40px)); z-index: 9998; background: #17191b; border-radius: 12px; box-shadow: 0 10px 40px #0008; padding: 8px; }
.csm-radio__embed[hidden] { display: none !important; }
.csm-radio__embed iframe { display: block; width: 100%; height: 166px; border: 0; border-radius: 6px; }
.csm-radio-listen { margin: 0; min-height: 100vh; background: #080a0b; color: #f5f5f1; font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: grid; place-items: center; padding: 30px 20px; box-sizing: border-box; }
.csm-radio-listen main { width: min(560px, 100%); }
.csm-radio-listen h1 { font-size: clamp(32px, 6vw, 56px); letter-spacing: -.045em; line-height: 1.1; margin: 18px 0; }
.csm-radio-listen main > p { color: #aeb1b5; }
.csm-radio-listen .csm-radio-listen__label { color: #e5ff52; font-size: 10px; letter-spacing: .22em; }
.csm-radio-listen .csm-radio { margin-top: 30px; }
.csm-radio-listen .csm-radio__embed { position: static; margin-top: 16px; width: 100%; box-sizing: border-box; }
@keyframes csm-radio-pulse { to { opacity: .25; } }
@media (max-width: 580px) {
    .csm-radio--dock { right: 10px; width: calc(100% - 20px); bottom: calc(10px + var(--csm-radio-notice-height, 0px) + env(safe-area-inset-bottom, 0px)); }
    .csm-radio { padding: 12px; }
    .csm-radio__main { flex-wrap: wrap; gap: 5px; }
    .csm-radio__now { flex-basis: calc(100% - 142px); }
    .csm-radio__volume { margin-left: 53px; width: calc(100% - 53px); }
    .csm-radio__volume input[type="range"] { flex: 1; width: 60px; min-height: 28px; }
    .csm-radio__links { margin-top: 5px; padding-top: 5px; }
    .csm-radio__links a, .csm-radio__links button { min-height: 28px; display: inline-flex; align-items: center; }
    .csm-radio__embed { right: 10px; width: calc(100% - 20px); bottom: calc(250px + var(--csm-radio-notice-height, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .csm-radio.is-loading .csm-radio__light { animation: none; } }
@media print { #csm-radio-root, [data-csm-radio] { display: none !important; } }