fix(display): background quality as a three-way choice (blurred, sharp, original) [CI]

web/display/src/display.css

@@ -1629,6 +1629,38 @@ input {
   transform: translateX(14px);
 }
 
+.appearance-row-segment {
+  grid-template-columns: 52px 1fr;
+}
+
+/* 三选一：连在一起的三个按钮，选中的那个是实心的 */
+.appearance-segment {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding: 2px;
+  border-radius: var(--r-pill);
+  background: color-mix(in srgb, var(--app-ink) 8%, transparent);
+}
+
+.appearance-segment button {
+  padding: 3px 0;
+  border: 0;
+  border-radius: var(--r-pill);
+  color: var(--app-ink-muted);
+  background: none;
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.appearance-segment button[aria-pressed='true'] {
+  color: var(--app-ink);
+  font-weight: 600;
+  background: var(--app-card);
+  box-shadow: 0 1px 3px color-mix(in srgb, var(--glass-shade) 25%, transparent);
+}
+
 .appearance-reset {
   margin-top: 12px;
   width: 100%;