docs: Explain Builder themes and CSS warnings (#6298)

## Summary

- Document the shared System, Light, and Dark interface-theme preference
in the Dashboard and Builder guides.
- Distinguish the Webstudio interface theme from the authored site's
color scheme.
- Explain experimental, nonstandard, and obsolete CSS property warnings
in the Advanced Style panel.
- Add focused, matching light- and dark-theme screenshots of the
released Dashboard controls.

## Implementation

The Dashboard guide owns the screenshot and complete theme explanation.
The Builder anatomy guide documents the Builder menu path and links to
that canonical section. The screenshot pair was captured from the
released interface, cropped to the smallest useful region, and excludes
account identity.

## Checklist

- [x] Document the Dashboard theme path and available preferences.
- [x] Document the Builder theme path and canvas-theme boundary.
- [x] Explain CSS property status warnings and MDN compatibility
details.
- [x] Capture and visually review matching light/dark screenshots.
- [x] Review documentation impact and update all affected authoritative
`docs/` pages.
- [x] Verify internal anchors, asset references, image formats, and the
final diff.

## Verification

- `git diff --check` — passed.
- Screenshot assets — verified as 366×100 PNG files with equivalent UI
state and no account identity.
- Referenced files and `#interface-theme` / `#example-dark-mode` anchors
— verified.
- Repository formatter — not applicable; `oxfmt` excludes these
documentation targets.
- Tests — not run; documentation and screenshot assets only.
- Fixture inputs and generated outputs — unaffected.

## Known limitations

None.

Closes #6297

docs/university/foundations/anatomy-of-the-webstudio-builder.md

@@ -193,6 +193,17 @@ The Settings Panel is on the right side of your canvas. You can use this panel t
   <img src="../../.gitbook/assets/builder-modes-light.png" alt="Mode menu with Design and Content options and their keyboard shortcuts">
 </picture>
 
+## Interface theme
+
+Choose **Menu > View > Theme**, then select **System**, **Light**, or **Dark**.
+**System** follows your operating system setting. The same preference is
+available from the [Dashboard](dashboard.md#interface-theme) profile menu and
+applies to both interfaces.
+
+The interface theme does not change the site on the canvas. To design and
+preview a site color scheme, use a
+[color-scheme breakpoint](breakpoints.md#example-dark-mode).
+
 ## Hide UI
 
 Hide UI gives the canvas the full builder workspace by hiding the sidebars, footer, and top bar. It works in any mode, so you can keep using Design, Content, or Preview while the Builder chrome is hidden.

docs/university/foundations/dashboard.md

@@ -10,6 +10,21 @@ description: >-
 
 The Dashboard is the first screen you see after logging into Webstudio. It provides an overview of your workspaces and projects, with powerful features for organization and quick access.
 
+## Interface theme
+
+Open the profile menu and choose **Theme**, then select **System**, **Light**, or
+**Dark**. **System** follows your operating system setting and updates when that
+setting changes. The preference applies to both the Dashboard and the Builder.
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="../../.gitbook/assets/dashboard-theme-dark.png">
+  <img src="../../.gitbook/assets/dashboard-theme-light.png" alt="Dashboard profile menu with the Theme submenu open and System, Light, and Dark options visible">
+</picture>
+
+In the Builder, the same preference is available from **Menu > View > Theme**.
+It changes the Webstudio interface, not the site on the canvas. To design and
+preview a site color scheme, use a [color-scheme breakpoint](breakpoints.md#example-dark-mode).
+
 ---
 
 ## Workspaces

docs/university/foundations/style-panel.md

@@ -197,6 +197,12 @@ Move, rotate, scale, or skew the instance without affecting layout.
 
 A free-form CSS property editor for anything not covered by the sections above. Type any valid CSS property name — autocomplete shows the full list — and enter its value.
 
+Autocomplete includes standard, experimental, nonstandard, and obsolete CSS
+properties. A yellow warning marks any property that is not standard. Open the
+warning to review its status and browser-support risk, then select **Learn more
+on MDN** for compatibility details. Test these properties in the browsers your
+site supports before relying on them.
+
 **Common uses:**
 - Properties not exposed elsewhere: `cursor`, `pointer-events`, `will-change`, `content`, `list-style`, `appearance`, `resize`, `clip-path`, etc.
 - Defining [CSS variables](css-variables.md): add a property like `--my-color` with a value, and it becomes available to all child instances