pub const PLAYER_CSS: &str = "/* beecast-player chrome + terminal palette (see the crate README).\n Clean-room, MIT like the rest of beecast. Semantic chrome tokens (--beecast-*) are the\n stable theming surface; --sp-* covers the terminal palette and remains independently\n themeable. Internal .sp-* classes are not a public API. */\n\n/* Semantic theme tokens (Phase 8). Defaults map to the classic dark chrome. */\n.beecast-player {\n --beecast-color-surface: #121417;\n --beecast-color-surface-raised: rgba(255, 255, 255, 0.04);\n --beecast-color-text: #cdd3dc;\n --beecast-color-text-muted: rgba(205, 211, 220, 0.8);\n --beecast-color-accent: #6a9ded;\n --beecast-color-focus: rgba(88, 166, 255, 0.5);\n --beecast-color-marker: #d5b45e;\n --beecast-color-live: #78bd65;\n --beecast-color-error: #e05f65;\n --beecast-control-height: 44px;\n --beecast-radius: 4px;\n --beecast-font-ui: 13px/1.2 ui-sans-serif, system-ui, sans-serif;\n --beecast-font-terminal: 13px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n\n /* Terminal palette */\n --sp-bg: var(--beecast-color-surface);\n --sp-fg: var(--beecast-color-text);\n --sp-c0: #1c1f24; --sp-c1: #e05f65; --sp-c2: #78bd65; --sp-c3: #d5b45e;\n --sp-c4: #6a9ded; --sp-c5: #bd7bd8; --sp-c6: #55b8c2; --sp-c7: #b8bfc9;\n --sp-c8: #596273; --sp-c9: #ff8188; --sp-c10: #98d989; --sp-c11: #f0d182;\n --sp-c12: #8fb7ff; --sp-c13: #d99df0; --sp-c14: #7fd6df; --sp-c15: #eef1f5;\n\n display: block;\n background: var(--sp-bg);\n color: var(--sp-fg);\n border-radius: var(--beecast-radius);\n outline: none;\n overflow: hidden;\n}\n\n/* Built-in themes */\n.beecast-player[data-theme=\"light\"] {\n --beecast-color-surface: #f4f5f7;\n --beecast-color-surface-raised: rgba(0, 0, 0, 0.04);\n --beecast-color-text: #1c1f24;\n --beecast-color-text-muted: rgba(28, 31, 36, 0.75);\n --beecast-color-accent: #3b6fd4;\n --beecast-color-focus: rgba(59, 111, 212, 0.45);\n --beecast-color-marker: #b8860b;\n --beecast-color-live: #3d8b40;\n --sp-bg: #f4f5f7;\n --sp-fg: #1c1f24;\n}\n\n@media (prefers-color-scheme: light) {\n .beecast-player[data-theme=\"system\"] {\n --beecast-color-surface: #f4f5f7;\n --beecast-color-surface-raised: rgba(0, 0, 0, 0.04);\n --beecast-color-text: #1c1f24;\n --beecast-color-text-muted: rgba(28, 31, 36, 0.75);\n --beecast-color-accent: #3b6fd4;\n --beecast-color-focus: rgba(59, 111, 212, 0.45);\n --beecast-color-marker: #b8860b;\n --beecast-color-live: #3d8b40;\n --sp-bg: #f4f5f7;\n --sp-fg: #1c1f24;\n }\n}\n\n.beecast-player:focus-visible { box-shadow: 0 0 0 2px var(--beecast-color-focus); }\n/* Fullscreen: control bar pinned at the bottom (unshrinkable); terminal block\n centers in the free space above via auto margins. Correct scale+height in\n layout() keeps the bar on-screen \u{2014} previously a too-tall screen box pushed it\n off under overflow:hidden, taking the speed control with it.\n Also match when an ancestor is the fullscreen element (scsh passes fullscreenEl\n = the outer .cast box so the live toolbar rides along). */\n.beecast-player:fullscreen,\n:fullscreen .beecast-player {\n width: 100%; height: 100%; border-radius: 0;\n display: flex; flex-direction: column;\n box-sizing: border-box;\n min-height: 0;\n}\n.beecast-player:fullscreen .sp-screen-box,\n:fullscreen .beecast-player .sp-screen-box {\n flex: 0 0 auto;\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n}\n.beecast-player:fullscreen .sp-bar,\n:fullscreen .beecast-player .sp-bar {\n flex: 0 0 auto;\n width: 100%;\n margin-top: 0;\n position: relative;\n z-index: 20;\n box-sizing: border-box;\n padding-right: 0.35rem; /* keep 1\u{d7} / \u{26f6} from kissing the edge after scale */\n}\n.beecast-player [hidden] { display: none !important; }\n\n.sp-screen-box { overflow: hidden; position: relative; }\n\n/* Center play overlay: soft dim + a geometric `|>` (SVG bar + chevron, equal height). */\n.sp-overlay {\n position: absolute; inset: 0; z-index: 3;\n display: flex; align-items: center; justify-content: center;\n background: rgba(0, 0, 0, 0.42);\n cursor: pointer;\n}\n.sp-overlay:focus-visible {\n outline: 2px solid var(--beecast-color-accent);\n outline-offset: -4px;\n}\n.sp-bigplay {\n margin: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 7rem;\n height: 7rem;\n color: #fff;\n opacity: 0.92;\n filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));\n transition: opacity 0.15s, transform 0.15s;\n user-select: none;\n}\n.sp-bigplay-icon {\n display: block;\n width: 100%;\n height: 100%;\n}\n.sp-overlay:hover .sp-bigplay,\n.sp-overlay:focus-visible .sp-bigplay {\n opacity: 1;\n transform: scale(1.06);\n}\n@media (prefers-reduced-motion: reduce) {\n .sp-bigplay { transition: none; }\n .sp-overlay:hover .sp-bigplay,\n .sp-overlay:focus-visible .sp-bigplay { transform: none; }\n}\n\n/* Off-screen snapshot for accessibility=\"snapshot\" \u{2014} readable, not a live region. */\n.sp-a11y {\n position: absolute;\n width: 1px; height: 1px;\n padding: 0; margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: pre;\n border: 0;\n}\n\n.sp-chapters {\n position: absolute; top: 0; right: 0; bottom: 0; z-index: 4;\n width: min(320px, 60%);\n overflow-y: auto;\n background: rgba(9, 11, 15, 0.92);\n border-left: 1px solid rgba(255, 255, 255, 0.14);\n font: 12px/1.45 ui-sans-serif, system-ui, sans-serif;\n padding: 4px 0;\n}\n.sp-chap {\n display: block; width: 100%; text-align: left;\n font: inherit; color: var(--sp-fg);\n background: transparent; border: none; cursor: pointer;\n padding: 5px 12px;\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.sp-chap:hover { background: rgba(106, 157, 237, 0.18); color: #fff; }\n.sp-chap:focus-visible {\n outline: 2px solid var(--beecast-color-accent);\n outline-offset: -2px;\n}\n.sp-chap-on {\n background: rgba(106, 157, 237, 0.22);\n color: #fff;\n box-shadow: inset 3px 0 0 var(--beecast-color-accent);\n}\n.sp-chap-ann { font-style: italic; opacity: 0.95; }\n.sp-chap-t { color: var(--sp-c4); margin-right: 8px; font-variant-numeric: tabular-nums; }\n\n.sp-screen {\n margin: 0;\n padding: 4px 6px;\n font: var(--beecast-font-terminal);\n white-space: pre;\n transform-origin: top left;\n width: max-content;\n}\n/* Styled runs as inline-blocks so a run\'s background paints the full 1.25 line box. */\n.sp-screen span { display: inline-block; }\n.sp-probe { visibility: hidden; position: absolute; }\n.sp-b { font-weight: 700; }\n.sp-d { opacity: 0.6; }\n.sp-i { font-style: italic; }\n.sp-u { text-decoration: underline; }\n.sp-s { text-decoration: line-through; }\n.sp-u.sp-s { text-decoration: underline line-through; }\n.sp-cur { outline: 1px solid var(--sp-fg); outline-offset: -1px; }\n\n.sp-bar {\n display: flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: 10px;\n min-height: var(--beecast-control-height);\n padding: 10px 12px;\n background: var(--beecast-color-surface-raised);\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n font: var(--beecast-font-ui);\n user-select: none;\n box-sizing: border-box;\n /* Menus grow upward out of the bar; keep them paintable over the terminal. */\n position: relative;\n z-index: 6;\n overflow: visible;\n}\n.sp-bar button {\n font: inherit;\n color: var(--sp-fg);\n background: transparent;\n border: none;\n cursor: pointer;\n padding: 8px 12px;\n border-radius: 4px;\n min-height: 36px;\n min-width: 36px;\n line-height: 1.2;\n flex: 0 0 auto;\n}\n.sp-bar button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }\n.sp-bar button:focus-visible {\n outline: 2px solid var(--beecast-color-accent);\n outline-offset: 1px;\n}\n.sp-play { font-size: 18px; padding: 8px 14px; min-width: 40px; }\n\n.sp-speedwrap {\n position: relative;\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n}\n.sp-speed {\n min-width: 3.25em;\n font-variant-numeric: tabular-nums;\n font-weight: 600;\n}\n.sp-speedmenu {\n position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 30;\n display: flex; flex-direction: column;\n min-width: 4.5em; padding: 4px;\n background: #161a20;\n border: 1px solid rgba(255, 255, 255, 0.16);\n border-radius: var(--beecast-radius);\n box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);\n}\n.sp-speedopt {\n text-align: center;\n border-radius: 3px;\n min-height: 32px;\n padding: 6px 10px;\n}\n.sp-speedopt.sp-on {\n color: var(--sp-c12);\n font-weight: 700;\n box-shadow: inset 0 0 0 1px var(--beecast-color-accent);\n}\n.sp-speedopt:hover { background: rgba(106, 157, 237, 0.18); }\n.sp-speedopt:focus-visible {\n outline: 2px solid var(--beecast-color-accent);\n outline-offset: 0;\n}\n\n.sp-time, .sp-dur {\n color: var(--beecast-color-text-muted);\n min-width: 3.6em;\n text-align: center;\n font-variant-numeric: tabular-nums;\n flex: 0 0 auto;\n font-size: 13px;\n}\n.sp-seek {\n position: relative;\n flex: 1 1 auto;\n min-width: 64px;\n height: 10px;\n border-radius: 5px;\n background: rgba(255, 255, 255, 0.12);\n cursor: pointer;\n}\n.sp-seek:focus-visible {\n outline: 2px solid var(--beecast-color-accent);\n outline-offset: 3px;\n}\n.sp-fill {\n position: absolute; left: 0; top: 0; bottom: 0;\n width: 0;\n border-radius: 3px;\n background: var(--beecast-color-accent);\n pointer-events: none;\n}\n/* Declared-live (setLive): the bar reads \"now\" \u{2014} pinned full-width, live green \u{2014} not a\n position that jitters as the growing recording keeps re-proportioning it. */\n.beecast-player.sp-islive .sp-fill { width: 100% !important; background: var(--beecast-color-live); }\n.sp-markers { position: absolute; inset: 0; pointer-events: none; }\n.sp-marker {\n position: absolute; top: -2px; bottom: -2px; width: 2px;\n background: var(--beecast-color-marker);\n pointer-events: auto;\n}\n.sp-marker-ann {\n width: 0;\n border-left: 2px dashed var(--beecast-color-marker);\n background: transparent;\n}\n\n/* Custom element host fills its mount when used directly. */\nbeecast-player {\n display: block;\n width: 100%;\n height: 100%;\n}\n";Expand description
The player chrome and terminal palette. Semantic --beecast-* tokens are the stable
theming surface; --sp-* is the terminal palette. Nothing is fetched (no fonts, no images).