:root {
  --cr-player-bg: var(--cr-bg, #0f1012);
  --cr-player-surface-soft: var(--cr-surface-soft, #22252b);
  --cr-player-text: var(--cr-text, #f6f1e8);
  --cr-player-muted: var(--cr-muted, #a9a49b);
  --cr-player-line: var(--cr-line, rgba(246, 241, 232, 0.16));
  --cr-player-line-strong: var(--cr-line-strong, rgba(246, 241, 232, 0.22));
  --cr-player-accent: var(--cr-accent, #d73b72);
  --cr-player-on-accent: var(--cr-on-accent, #fffaf2);
  --cr-player-shadow: var(--cr-shadow, rgba(0, 0, 0, 0.35));
  --cr-player-dock-bg: var(--cr-shell-bg, rgba(15, 16, 18, 0.96));
}

.cr-player-button,
.cr-player-dock button,
.cr-player-dock input {
  font: inherit;
}

.cr-player-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid rgba(215, 59, 114, 0.72);
  border-radius: 0;
  padding: 0 22px;
  background: linear-gradient(rgba(215, 59, 114, 0.98), rgba(116, 22, 58, 0.98));
  color: var(--cr-player-on-accent);
  box-shadow: 0 10px 24px rgba(215, 59, 114, 0.2);
  cursor: pointer;
  font-family: var(--cr-font-display, "Lexend Giga", "Inter", ui-sans-serif, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cr-player-button__icon {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
}

.cr-player-button[aria-pressed="true"] .cr-player-button__icon {
  width: 11px;
  height: 11px;
  border: 0;
  background: currentColor;
}

.cr-player-dock{position:fixed;z-index:1000;inset:auto 0 0;display:grid;grid-template-columns:minmax(0,1fr) 168px minmax(0,1fr);align-items:center;gap:28px;box-sizing:border-box;min-height:86px;padding:12px max(24px,calc((100vw - 1280px)/2));padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));border:0;border-top:2px solid #d73b72;border-radius:0;background:#141418;color:#f6f1e8;box-shadow:0 -8px 30px #0003;font-family:Inter,sans-serif}
.cr-player-dock__track{display:flex;gap:14px;align-items:center;min-width:0}.cr-player-dock__art{flex:0 0 60px;width:60px;height:60px;border-radius:2px;background:#28282e center/cover no-repeat}.cr-player-dock__art.is-empty:before{content:'CR';display:grid;place-items:center;height:100%;font:800 16px Inter,sans-serif;color:#aaa}
.cr-player-dock__meta{min-width:0}.cr-player-dock__meta strong,.cr-player-dock__meta>span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:0;text-transform:none}.cr-player-dock__meta strong{font:700 17px/1.4 Inter,sans-serif}.cr-player-dock__meta>span{font:400 13px/1.5 Inter,sans-serif;color:#c0bdc3}.cr-player-dock__state{display:block;min-height:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 10px/1.4 Inter,sans-serif;font-style:normal;color:#ef7ba6}
.cr-player-dock .cr-player-dock__toggle{display:flex;align-items:center;justify-content:center;gap:12px;width:168px;min-height:46px;margin:0;padding:12px 16px;border:0;border-radius:3px;background:#cb306c;color:#fff;font:700 14px/1.4 Inter,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer;box-sizing:border-box}.cr-player-dock__toggle:hover{background:#ac2359}.cr-player-dock__glyph{display:block;flex-shrink:0;width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}
.cr-player-dock.is-playing .cr-player-dock__glyph{width:12px;height:15px;border:0;border-left:4px solid currentColor;border-right:4px solid currentColor;box-sizing:border-box;background:none}
.cr-player-dock.is-loading .cr-player-dock__glyph{width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;background:none}
.cr-player-dock__sound{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.cr-player-dock .cr-player-dock__mute{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:3px;background:transparent;color:#ece8e3;cursor:pointer;padding:10px}.cr-player-dock__mute span{display:block;width:23px;height:23px;font-size:0;background:currentColor;clip-path:polygon(0 35%,25% 35%,55% 10%,55% 90%,25% 65%,0 65%)}
.cr-player-dock__mute[aria-pressed=true]{opacity:.55}.cr-player-dock__mute[aria-pressed=true]::after{content:'';position:absolute;width:25px;height:2px;background:#ef7ba6;transform:rotate(-45deg)}
.cr-player-dock .cr-player-dock__volume{display:block;width:132px;min-width:0;height:32px;margin:0;padding:0;accent-color:#d73b72;cursor:pointer;background:transparent}
.cr-player-dock :is(button,input):focus-visible{outline:3px solid #f5db8c;outline-offset:3px}
.cr-player-button[data-state=loading]{cursor:progress}.cr-player-button[data-state=loading] .cr-player-button__icon{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;background:transparent}
body:has(.cr-player-dock){padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
@media(max-width:1000px){.cr-player-dock{gap:18px;padding-left:20px;padding-right:20px;grid-template-columns:minmax(0,1fr) 152px minmax(0,1fr)}.cr-player-dock .cr-player-dock__toggle{width:152px}.cr-player-dock .cr-player-dock__volume{width:100px}}
@media(max-width:640px){.cr-player-dock{grid-template-columns:minmax(0,1fr) 48px;gap:16px;min-height:78px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}.cr-player-dock__track{gap:10px}.cr-player-dock__art{flex-basis:52px;width:52px;height:52px}.cr-player-dock__meta strong{font-size:14px}.cr-player-dock__meta>span{font-size:12px}.cr-player-dock .cr-player-dock__toggle{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}.cr-player-dock__label{display:none}.cr-player-dock__sound{display:none}body:has(.cr-player-dock){padding-bottom:calc(94px + env(safe-area-inset-bottom,0px))}}
