Release 0.5.9

src/app.css

@@ -1439,6 +1439,87 @@ textarea:focus {
 	text-transform: uppercase;
 }
 
+.output-topics {
+	max-width: 100%;
+	margin: 0 0 0.55rem;
+	overflow-wrap: anywhere;
+	color: #f3ba63;
+	font-size: clamp(0.72rem, 1.4vw, 1rem);
+	font-weight: 800;
+	letter-spacing: 0.09em;
+	line-height: 1.35;
+	text-transform: uppercase;
+}
+
+.section-countdown {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: 1rem;
+	margin-bottom: 1rem;
+	padding: 0.8rem 1rem;
+	border: 1px solid var(--line);
+	border-radius: 0.65rem;
+	background: var(--surface-raised);
+}
+
+.section-countdown strong {
+	font-variant-numeric: tabular-nums;
+}
+
+.section-countdown.warning {
+	border-color: #f3ba63;
+	color: #f3ba63;
+}
+
+.section-countdown.overrun {
+	border-color: #ff776d;
+	color: #ff776d;
+}
+
+.live-materials {
+	display: grid;
+	grid-template-columns: minmax(9rem, 0.45fr) repeat(2, minmax(0, 1fr));
+	gap: 1rem;
+	margin-top: 1rem;
+	padding: 1rem;
+	border: 1px solid var(--line);
+	border-radius: 0.7rem;
+	background: var(--surface-raised);
+}
+
+.live-materials h3,
+.live-materials ul {
+	margin: 0;
+}
+
+.live-materials ul {
+	display: grid;
+	gap: 0.45rem;
+	padding: 0;
+	list-style: none;
+}
+
+.live-material-group li,
+.live-material-group small {
+	display: block;
+}
+
+.live-material-group small {
+	color: var(--text-muted);
+}
+
+@media (max-width: 760px) {
+	.live-materials {
+		grid-template-columns: 1fr;
+	}
+
+	.section-countdown {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+}
+
 .output-content h1,
 .output-idle h1 {
 	max-width: 16ch;
@@ -2347,6 +2428,41 @@ textarea:focus {
 	grid-template-columns: auto minmax(0, 1.65fr) minmax(8rem, 0.85fr) minmax(9rem, auto) auto;
 }
 
+.piece-favorite-form {
+	position: absolute;
+	top: 0.35rem;
+	left: 0.35rem;
+	z-index: 3;
+}
+
+.piece-favorite {
+	display: grid;
+	width: 1.8rem;
+	height: 1.8rem;
+	padding: 0;
+	place-items: center;
+	border: 1px solid var(--line);
+	border-radius: 999px;
+	background: var(--glass-strong);
+	color: var(--text-faint);
+	font-size: 1rem;
+	line-height: 1;
+	cursor: pointer;
+}
+
+.piece-favorite.active,
+.piece-favorite:hover,
+.piece-favorite:focus-visible {
+	border-color: #f3ba63;
+	color: #f3ba63;
+}
+
+.piece-editor-kicker {
+	display: flex;
+	align-items: center;
+	gap: 0.65rem;
+}
+
 .piece-card:has(.piece-actions[open]) {
 	z-index: 5;
 }