:root {
--aap-radius: 22px;
--aap-radius-inner: 14px;
--aap-accent: #ffffff;
--aap-accent-contrast: #111111;
--aap-accent-soft: rgba(255, 255, 255, 0.16);
--aap-accent-strong: rgba(255, 255, 255, 0.28);
--aap-bg: #121212;
--aap-surface: #1b1b1b;
--aap-surface-alt: #242424;
--aap-text: #ffffff;
--aap-text-secondary: #ffffff;
--aap-border: rgba(255,255,255,0.12);
--aap-shadow: 0 20px 60px rgba(0,0,0,0.28);
--aap-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--aap-transition: cubic-bezier(.2, .8, .2, 1);
}
.aap-player {
position: relative;
max-width: 760px;
border-radius: var(--aap-radius);
font-family: var(--aap-font);
color: var(--aap-text);
background:
radial-gradient(circle at top right, rgba(255,255,255,0.07), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
var(--aap-bg);
border: 1px solid var(--aap-border);
box-shadow: var(--aap-shadow);
overflow: hidden;
isolation: isolate;
}
.aap-player::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(255,255,255,0.06), transparent 28%),
linear-gradient(180deg, transparent 55%, rgba(255,255,255,0.02));
pointer-events: none;
}
.aap-player * { box-sizing: border-box; } .aap-player button,
.aap-player [type="button"] {
-webkit-appearance: none !important;
appearance: none !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
text-shadow: none !important;
text-transform: none !important;
outline: none !important;
padding: 0;
margin: 0;
}
.aap-player button:focus,
.aap-player [type="button"]:focus,
.aap-player button:focus-visible,
.aap-player [type="button"]:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.aap-inner {
position: relative;
z-index: 1;
padding: 26px 28px;
}
.aap-player--missing {
padding: 20px 24px;
border-radius: var(--aap-radius);
background: #2a2316;
border: 1px solid rgba(255, 255, 255, 0.32);
color: #ffffff;
}
.aap-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.aap-title {
font-size: 18px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--aap-text);
}
.aap-mode-toggle { flex-shrink: 0; }
.aap-toggle-track {
position: relative;
display: inline-flex;
align-items: center;
gap: 0;
padding: 4px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--aap-border);
border-radius: 999px;
}
.aap-toggle-thumb {
position: absolute;
top: 4px;
left: 4px;
height: calc(100% - 8px);
border-radius: 999px;
background-color: var(--aap-accent) !important;
box-shadow: 0 10px 22px var(--aap-accent-soft);
transition: transform .32s var(--aap-transition), width .32s var(--aap-transition);
z-index: 0;
pointer-events: none;
}
.aap-player .aap-toggle-btn {
position: relative;
z-index: 1;
padding: 9px 16px !important;
border-radius: 999px;
color: var(--aap-text-secondary) !important;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: color .25s var(--aap-transition);
white-space: nowrap;
}
.aap-player .aap-toggle-btn.is-active { 
color: var(--aap-accent-contrast) !important; 
}
.aap-examples {
display: flex;
gap: 10px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.aap-player .aap-example-btn {
border: 1px solid var(--aap-border) !important;
background-color: var(--aap-surface) !important;
color: var(--aap-text-secondary) !important;
padding: 10px 14px !important;
border-radius: 999px;
font: inherit;
font-size: 13px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: transform .25s var(--aap-transition), border-color .25s var(--aap-transition), color .25s var(--aap-transition), background .25s var(--aap-transition), box-shadow .25s var(--aap-transition);
}
.aap-player .aap-example-btn:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.22) !important;
color: var(--aap-text) !important;
}
.aap-player .aap-example-btn.is-active {
background-color: var(--aap-surface-alt) !important;
color: var(--aap-text) !important;
border-color: var(--aap-accent) !important;
box-shadow: 0 0 0 1px var(--aap-accent-soft) inset !important;
}
.aap-example-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: currentColor;
opacity: .5;
flex-shrink: 0;
}
.aap-player .aap-example-btn.is-active .aap-example-dot {
opacity: 1;
background-color: var(--aap-accent);
box-shadow: 0 0 12px var(--aap-accent-strong);
}
.aap-controls {
display: flex;
align-items: center;
gap: 16px;
}
.aap-player .aap-play {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: var(--aap-accent) !important;
color: var(--aap-accent-contrast) !important;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 16px 30px var(--aap-accent-soft) !important;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.aap-player .aap-play:hover {
transform: translateY(-1px) scale(1.02);
filter: brightness(1.03);
box-shadow: 0 18px 32px var(--aap-accent-strong) !important;
}
.aap-player .aap-play:active { transform: scale(.97); }
.aap-icon-play { margin-left: 2px; }
.aap-progress-wrap {
flex: 1;
position: relative;
min-width: 0;
}
.aap-waveform {
position: relative;
height: 44px;
border-radius: var(--aap-radius-inner);
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
border: 1px solid rgba(255,255,255,0.06);
}
.aap-waveform-canvas {
display: block;
width: 100%;
height: 100%;
}
.aap-waveform-progress {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0%;
background: linear-gradient(90deg, var(--aap-accent-soft), rgba(255,255,255,0));
border-right: 2px solid var(--aap-accent);
pointer-events: none;
}
.aap-range {
position: absolute;
inset: 0 0 auto 0;
width: 100%;
height: 44px;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
-webkit-appearance: none;
appearance: none;
}
.aap-range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 44px;
cursor: pointer;
}
.aap-range::-moz-range-thumb {
width: 16px;
height: 44px;
cursor: pointer;
border: none;
background: transparent;
}
.aap-time {
display: flex;
justify-content: space-between;
margin-top: 8px;
color: var(--aap-text-secondary);
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: .03em;
}
.aap-admin-preview-player {
max-width: 760px;
margin: 0 auto;
}
.aap-admin-preview-player .aap-toggle-btn,
.aap-admin-preview-player .aap-example-btn,
.aap-admin-preview-player .aap-play {
pointer-events: none;
}
.aap-admin-preview-bars {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 4px;
padding: 0 14px;
}
.aap-admin-preview-bars span {
width: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--aap-accent) 30%, white);
opacity: .8;
}
.aap-player.is-switching .aap-waveform-canvas {
animation: aap-pulse .35s var(--aap-transition);
}
@keyframes aap-pulse {
0% { opacity: 1; }
40% { opacity: .35; }
100% { opacity: 1; }
}
@media (max-width: 640px) {
.aap-inner { padding: 20px; }
.aap-header { flex-direction: column; align-items: flex-start; }
.aap-title { font-size: 16px; }
.aap-player .aap-toggle-btn { font-size: 12px; padding: 8px 12px !important; }
.aap-player .aap-play { width: 46px; height: 46px; }
}
@media (max-width: 520px) {
.aap-controls { align-items: flex-start; }
}