/* ═══════════════════════════════════════════════════════════════
   XODE — THE EDITORS' INTERFACE IN A CODING FACE

   Inside the three editors, the interface — top bar, tool rail, panels,
   properties, layers, menus and the dialogs opened from the editor —
   is set in JetBrains Mono, so the workspace reads like a code editor.

   THE CANVAS IS NOT TOUCHED. Every element on a page carries its own
   font-family inline, and an inline style beats anything here, so the
   fonts somebody chose for their design stay exactly as chosen, on the
   canvas and in everything exported or published.

   The welcome screen keeps the site's own type; this starts the moment
   the editor workspace is showing. Loaded by pages/editor.html, which
   the website and resume editors are generated from.
   ═══════════════════════════════════════════════════════════════ */

#screen-editor,
body:has(#screen-editor:not(.hidden)) :is(.modal-overlay, .xa-panel, .cowork-panel, .code-panel,
  .interaction-panel, .media-modal, .xsh-scrim, .xet-scrim, .sheet-scrim, #aic, .prototype-player,
  .xt-stack) {
  --font-body: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-display: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

#screen-editor :is(button, input, select, textarea, label, h1, h2, h3, h4, h5),
body:has(#screen-editor:not(.hidden)) :is(.modal-overlay, .xa-panel, .cowork-panel, .code-panel,
  .interaction-panel, .media-modal, .xsh-scrim, .xet-scrim, .sheet-scrim, #aic, .prototype-player,
  .xt-stack)
  :is(button, input, select, textarea, label, h1, h2, h3, h4, h5, [class*="title"], [class*="name"]) {
  font-family: inherit;
}