diff --git a/css/pill/pill.css b/css/pill/pill.css
new file mode 100644
index 0000000..51778aa
--- /dev/null
+++ b/css/pill/pill.css
@@ -0,0 +1,155 @@
+body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+body {
+	background: transparent;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+}
+
+/* Main widget container - Classic Pill Layout */
+.widget-container {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: auto;
+	min-width: 420px;
+	max-width: 550px;
+	height: 64px;
+	border-radius: 50px;
+	overflow: hidden;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+	margin: 20px;
+	background: rgba(18, 18, 18, 0.85);
+	backdrop-filter: blur(16px);
+	border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Blurred background layer */
+.background-blur {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	overflow: hidden;
+}
+
+.background-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	filter: blur(30px) brightness(0.5);
+}
+
+/* Dark overlay layer */
+.overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.4);
+	z-index: 1;
+	pointer-events: none;
+}
+
+/* Content layer */
+.widget-content {
+	position: relative;
+	display: flex;
+	gap: 14px;
+	padding: 6px 18px 6px 6px;
+	z-index: 2;
+	width: 100%;
+	height: 100%;
+	align-items: center;
+}
+
+/* Album art box (Circular Pill Avatar) */
+.album-art-box {
+	flex-shrink: 0;
+	width: 52px;
+	height: 52px;
+	border-radius: 50%;
+	overflow: hidden;
+	background: rgba(60, 60, 60, 0.5);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.album-art {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+/* Song info box */
+.song-info {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+	gap: 8px;
+	min-width: 0;
+	padding: 0 4px;
+}
+
+/* Song title */
+.song-title {
+	font-size: 16px;
+	font-weight: 700;
+	color: #ffffff;
+	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	letter-spacing: -0.2px;
+	line-height: 1;
+}
+
+/* Auto-insert separator dash between title and artist */
+.song-title::after {
+	content: "—";
+	margin-left: 8px;
+	opacity: 0.5;
+	font-weight: 400;
+}
+
+/* Song artist */
+.song-artist {
+	font-size: 14px;
+	font-weight: 500;
+	color: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	letter-spacing: -0.2px;
+	line-height: 1;
+}
+
+/* Smooth fade animation for updates */
+@keyframes fadeIn {
+	from {
+		opacity: 0.4;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+.song-title.updating,
+.song-artist.updating {
+	animation: fadeIn 0.4s ease-in-out;
+}
\ No newline at end of file