@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexMono-400.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: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexMono-500.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: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/Manrope-500.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: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/Manrope-600.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: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/Manrope-700.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: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/Manrope-800.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; }

/* ManyScreens — the one stylesheet every page shares. Navy from the icon's plate, one
   cyan→blue light, glass surfaces, Manrope for words and IBM Plex Mono for the small
   labels that carry data. Fonts are served from here, never from Google (DSGVO). */
:root {
  --bg: #0a1024; --night: #06122b; --ink: #eef2ff; --dim: #8fa0c8; --faint: #6f7fa6;
  --line: rgba(255,255,255,.09); --glass: rgba(255,255,255,.05); --glass-line: rgba(255,255,255,.11);
  --glass-hover: rgba(255,255,255,.085); --inset: rgba(4,8,22,.55);
  --cyan: #63e2ff; --cyan-ink: #8fe9ff; --cyan-tint: rgba(99,226,255,.14);
  --blue: #3a8dff; --deep: #2a5cf5; --amber: #e8a33c; --red: #ff6b6b; --green: #5ee0a0;
  --light: linear-gradient(135deg, #63e2ff, #3a8dff 60%, #2a5cf5);
  --sans: Manrope, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100%; margin: 0 }
body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased; }
a { color: var(--cyan-ink); text-decoration: none } a:hover { color: #c9f4ff }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px }
::selection { background: rgba(99,226,255,.3) }
::placeholder { color: var(--faint) }

/* the light: the icon's, top left, and nothing else glows on its own */
.glow { position: fixed; left: -10%; top: -36%; width: 64%; height: 84%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(99,226,255,.26), rgba(58,141,255,.10) 52%, transparent 74%) }
@media (max-width: 40rem) { .glow { width: 120%; height: 50%; left: -30%; top: -24% } }

.mono { font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase }
.glass { background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.tag { display: inline-block; padding: 2px 7px; border-radius: 5px; background: var(--cyan-tint); color: var(--cyan-ink) }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan) }
.led.off { background: #3b4666; box-shadow: none }
.led.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber) }
.led.bad { background: var(--red); box-shadow: 0 0 8px var(--red) }

/* controls: one height, one radius */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink);
  font: 700 13px/1 var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none }
.btn:hover { background: var(--glass-hover) }
.btn.primary { border: 0; color: var(--night); background: var(--light); box-shadow: 0 12px 30px -12px rgba(99,226,255,.6) }
.btn.primary:hover { filter: brightness(1.07) }
.btn.plain { border-color: transparent; background: none; color: var(--cyan-ink); padding: 0 6px; height: 32px; font-weight: 600; justify-content: flex-start }
.btn.plain:hover { background: var(--glass) }
.btn.danger { border-color: rgba(255,107,107,.4); color: var(--red) }
.btn:disabled { opacity: .55; cursor: default }
.field, input.field, select.field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; width: 100%;
  border-radius: 10px; border: 1px solid var(--glass-line); background: var(--inset); color: var(--ink);
  font: 500 14px/1 var(--sans) }
input.field:focus, select.field:focus { outline: 0; border-color: rgba(99,226,255,.55); box-shadow: 0 0 0 3px rgba(99,226,255,.15) }
select.field { appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa0c8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px }
select.field option { background: #0e1630 }
.switch { appearance: none; -webkit-appearance: none; width: 36px; height: 21px; margin: 0; border-radius: 999px; flex: none;
  background: #2a3556; position: relative; cursor: pointer; border: 0; transition: background .15s }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; transition: transform .15s }
.switch:checked { background: var(--light) } .switch:checked::after { transform: translateX(15px) }
.switch:disabled { opacity: .45; cursor: default }

/* the fake desktop inside a tile of a machine we have no picture of yet is drawn by the page */
.err { color: var(--red) } .ok { color: var(--cyan-ink) } .warn { color: var(--amber) }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }