/* tokens.css -- the design tokens of Nodenize («Горн»: warm graphite, ember, spark): the site and every editor start
 * from these.
 *
 * The first stylesheet of every page (the site's, and the editors' pages and frames), so the fonts and the colours are
 * known everywhere. editor/ui/tokens.css is the source; site/public/css/tokens.css is the same file
 * (harness/check_css.mjs holds them equal).
 *
 * Surfaces go up from the page's floor (--f-surface-0) to raised controls (--f-surface-6), all warm graphite; text has
 * three strengths over them. Accents: --f-accent-2 (ember: the brand and the main action, with --f-on-accent text on
 * it), --f-accent (a lighter ember: links, focus), --f-spark (new, awards, stars), and the states ok / warn / danger.
 * Hues are for labels, node ports and charts. Type: Unbounded for display (titles, the name), Golos Text for text,
 * JetBrains Mono for code; inside the nodes of a graph, Roboto -- the metrics graphs made in his editor were laid out
 * in, so their nodes keep their sizes. */

/* the fonts, our own files (fonts/ beside this sheet; SIL OFL, from Fontsource): cyrillic, latin and their extended
   sets of each weight in use -- a browser fetches a set only when the page has its characters */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/golos-text-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/golos-text-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/golos-text-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/golos-text-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/golos-text-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/golos-text-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/golos-text-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/golos-text-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/golos-text-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/golos-text-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/golos-text-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/golos-text-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/golos-text-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/golos-text-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/golos-text-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/golos-text-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/golos-text-cyrillic-ext-800-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/golos-text-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/golos-text-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/golos-text-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/unbounded-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/unbounded-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/unbounded-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/unbounded-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/unbounded-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/unbounded-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/unbounded-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/unbounded-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/unbounded-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/unbounded-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/unbounded-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/unbounded-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/unbounded-cyrillic-ext-800-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/unbounded-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/unbounded-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/unbounded-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-ext-600-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-cyrillic-ext-400-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-cyrillic-ext-500-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/roboto-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-cyrillic-ext-700-normal.woff2") format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
    /* type */
    --f-font: "Golos Text", "Segoe UI", Arial, sans-serif;
    --f-font-mono: "JetBrains Mono", "Consolas", "Menlo", ui-monospace, monospace;
    --f-font-display: "Unbounded", var(--f-font);
    --f-font-graph: "Roboto", Arial, sans-serif;            /* inside the nodes: the metrics his graphs were laid out in */
    --f-font-graph-mono: "Consolas", "Menlo", ui-monospace, monospace;

    /* sizes the site's pages share */
    --f-header-h: 60px;
    --f-control-h: 36px;

    /* surfaces, bottom to top: warm graphite */
    --f-stage: #0c0a08;              /* behind an editor's canvas: the floor, and its checker */
    --f-stage-2: #14110d;
    --f-surface-0: #0f0d0a;
    --f-surface-1: #16130f;
    --f-surface-2: #1c1813;
    --f-surface-3: #221d17;
    --f-surface-4: #2a241d;
    --f-surface-5: #342c23;          /* hover, soft borders */
    --f-surface-6: #40362b;          /* borders, raised */

    /* text */
    --f-fg: #f4efe8;
    --f-fg-2: #cfc6b8;
    --f-fg-3: #9c9285;
    --f-fg-4: #6e655a;               /* the quietest: hints beside a heading */
    --f-fg-on-light: #16130f;

    /* accents and states */
    --f-accent: #ff8a4c;
    --f-accent-2: #ff6a1a;
    --f-on-accent: #16130f;          /* text and icons on --f-accent-2 / --f-accent / --f-spark */
    --f-spark: #ffc24b;
    --f-danger: #ff5a5f;
    --f-ok: #4cc26b;
    --f-warn: #ffc24b;
    --f-brand-gradient: linear-gradient(135deg, var(--f-accent-2), #e8480c);

    /* hues: labels, ports, series */
    --f-hue-yellow: #f0df47;
    --f-hue-orange: #e88021;
    --f-hue-red: #d03f3f;
    --f-hue-pink: #cd317c;
    --f-hue-violet: #6227e0;
    --f-hue-blue: #2264e3;
    --f-hue-sky: #27b4e0;
    --f-hue-mint: #27e087;
    --f-hue-green: #139520;
    --f-hue-gray: #646464;

    /* chart series in order: neighbours stay apart for the colour-blind (dE >= 15) and the rest (dE >= 20), each
       3:1 over --f-surface-3; the bright hues are taken at OKLCH L 0.66. ok / warn / danger never make a series. */
    --f-chart-1: #2f8fff;
    --f-chart-2: #da7302;
    --f-chart-3: var(--f-hue-pink);
    --f-chart-4: #a29508;
    --f-chart-5: #08a1cb;
    --f-chart-6: var(--f-hue-green);
    --f-chart-grid: var(--f-surface-5);
    --f-chart-axis: var(--f-surface-6);
}

/* ---------------------------------------------------------------- nothing of the system's on our pages (2026-10-31)
   Scrollbars, check boxes, radio buttons and number fields, for the site and the editors alike; a <select> is
   select_menu.mjs. :where -- no weight: whatever a page says about its own control (a size, a hidden chip input) wins. */
* { scrollbar-width: thin; scrollbar-color: var(--f-surface-6) transparent; }
:where(input[type="checkbox"], input[type="radio"]) {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    border-radius: 4px;
    background: var(--f-surface-2);
    box-shadow: inset 0 0 0 1px var(--f-surface-6);
    cursor: pointer;
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):checked { background: var(--f-accent); box-shadow: none; }
:where(input[type="checkbox"]):checked::before {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--f-surface-0);
    clip-path: polygon(14% 50%, 0 64%, 38% 100%, 100% 22%, 86% 8%, 37% 70%);
}
:where(input[type="radio"]):checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--f-surface-0); }
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--f-accent-2); outline-offset: 1px; }
:where(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: default; }
:where(input[type="number"]) { appearance: textfield; }
/* a field no page has dressed: ours all the same (no weight, so a page's own rules win, its border too) */
:where(input:not([type]), input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], textarea) {
    border: 1px solid var(--f-surface-6);
    border-radius: 6px;
    background-color: var(--f-surface-2);
    color: var(--f-fg);
    font: inherit;
    outline-color: var(--f-accent);
}
:where(input[type="color"]) { appearance: none; width: 32px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
:where(input[type="color"])::-webkit-color-swatch-wrapper { padding: 0; }
:where(input[type="color"])::-webkit-color-swatch { border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-surface-6); }
:where(input[type="color"])::-moz-color-swatch { border: 0; border-radius: 6px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* the range, the date field, a file field's button */
:where(input[type="range"]) { appearance: none; height: 16px; margin: 0; background: transparent; cursor: pointer; }
:where(input[type="range"])::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--f-surface-5); }
:where(input[type="range"])::-moz-range-track { height: 4px; border-radius: 2px; background: var(--f-surface-5); }
:where(input[type="range"])::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--f-accent); }
:where(input[type="range"])::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--f-accent); }
:where(input[type="range"])::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--f-accent); }
:where(input[type="date"])::-webkit-calendar-picker-indicator { display: none; }
:where(input[type="file"])::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--f-surface-4); color: var(--f-fg); font: inherit; font-weight: 600; cursor: pointer; }

/* kit_dialog.mjs: ask and tell */
.fd-dialog-back { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(0 0 0 / 55%); }
.fd-dialog { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; border-radius: 14px; background: var(--f-surface-2); color: var(--f-fg); box-shadow: inset 0 0 0 1px var(--f-surface-5), 0 24px 60px rgb(0 0 0 / 55%); font-size: 14px; }
.fd-dialog-text { margin: 0 0 18px; white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.fd-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fd-dialog-btn { min-height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--f-surface-4); color: var(--f-fg); font: inherit; font-weight: 600; cursor: pointer; }
.fd-dialog-btn:hover { background: var(--f-surface-5); }
.fd-dialog-btn.is-main { background: var(--f-accent); color: var(--f-surface-0); }
.fd-dialog-btn.is-danger { background: #c9432f; color: #fff; }
.fd-dialog-btn.is-main:hover, .fd-dialog-btn.is-danger:hover { filter: brightness(1.08); }
.fd-dialog-btn:focus-visible { outline: 2px solid var(--f-accent-2); outline-offset: 2px; }

/* kit_color.mjs and kit_date.mjs: their popups */
.fd-color, .fd-date { position: fixed; z-index: 10000; padding: 10px; border-radius: 12px; background: var(--f-surface-3); color: var(--f-fg); box-shadow: inset 0 0 0 1px var(--f-surface-5), 0 16px 36px rgb(0 0 0 / 45%); font-size: 13px; }
.fd-color { display: flex; flex-direction: column; gap: 10px; width: 220px; }
.fd-color-area { position: relative; height: 130px; border-radius: 8px; cursor: crosshair; touch-action: none; }
.fd-color-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(0 0 0 / 50%); pointer-events: none; }
.fd-color-hue { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; touch-action: none; }
.fd-color-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 50%); pointer-events: none; }
.fd-color-row { display: flex; align-items: center; gap: 8px; }
.fd-color-sample { flex: none; width: 28px; height: 28px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-surface-6); }
.fd-color-hex { flex: 1; min-width: 0; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--f-surface-2); color: var(--f-fg); font: inherit; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--f-surface-6); outline: none; }
.fd-color-hex:focus { box-shadow: inset 0 0 0 1px var(--f-accent); }
.fd-date { width: 252px; }
.fd-date-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fd-date-title { font-weight: 700; }
.fd-date-nav { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--f-fg-2); font-size: 18px; line-height: 1; cursor: pointer; }
.fd-date-nav:hover { background: var(--f-surface-4); color: var(--f-fg); }
.fd-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.fd-date-dow { padding: 4px 0; color: var(--f-fg-3); font-size: 11px; font-weight: 600; }
.fd-date-day { height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--f-fg-2); font: inherit; cursor: pointer; }
.fd-date-day:hover:not(:disabled) { background: var(--f-surface-4); color: var(--f-fg); }
.fd-date-day.is-today { box-shadow: inset 0 0 0 1px var(--f-surface-6); }
.fd-date-day.is-on { background: var(--f-accent); color: var(--f-surface-0); font-weight: 700; }
.fd-date-day:disabled { opacity: .3; cursor: default; }