Add Classic | Studio displayMode preference and Settings cards.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/css/display.css

@@ -0,0 +1,80 @@
+/* Studio 2 display skins — Classic | Studio. Layout tokens only; palette matches main.css. */
+
+:root,
+[data-display='classic'],
+[data-display='studio'] {
+  --display-bg: #09090b;
+  --display-fg: #e4e4e7;
+  --display-muted: #a1a1aa;
+  --display-border: rgba(255, 255, 255, 0.1);
+  --display-amber: #fbbf24;
+  --display-amber-fg: #09090b;
+  --display-radius: 8px;
+  --display-focus: rgba(252, 211, 77, 0.5);
+}
+
+[data-display='classic'] {
+  --chrome-gap: 0.5rem;
+  --rail-h: 2.25rem;
+  --card-pad: 0.75rem;
+  --display-type-title: 1.75rem;
+  --display-type-body: 0.875rem;
+}
+
+[data-display='studio'] {
+  --chrome-gap: 1rem;
+  --rail-h: 3rem;
+  --card-pad: 1rem;
+  --display-type-title: 1.875rem;
+  --display-type-body: 0.9375rem;
+}
+
+[data-display] .display-rail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  min-height: var(--rail-h);
+}
+
+[data-display] .display-rail__seg {
+  min-height: var(--rail-h);
+  border-radius: var(--display-radius);
+  border: 1px solid var(--display-border);
+  padding: 0.5rem 1rem;
+  font-size: var(--display-type-body);
+  outline: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
+}
+
+[data-display] .display-rail__seg:focus-visible {
+  box-shadow: 0 0 0 2px var(--display-focus);
+}
+
+[data-display] .display-rail__seg[aria-pressed='true'],
+[data-display] .display-rail__seg[data-active='true'] {
+  border-color: var(--display-amber);
+  background: var(--display-amber);
+  color: var(--display-amber-fg);
+}
+
+[data-display] .display-rail__seg:disabled,
+[data-display] .display-rail__seg[aria-disabled='true'] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+[data-display='studio'] .display-rail__seg {
+  font-weight: 600;
+  padding: 0.625rem 1.25rem;
+}
+
+[data-display] .display-cta {
+  border-radius: calc(var(--display-radius) + 4px);
+  background: var(--display-amber);
+  color: var(--display-amber-fg);
+  font-weight: 600;
+}
+
+[data-display] .display-cta:focus-visible {
+  box-shadow: 0 0 0 2px var(--display-focus);
+}