:root {
  color-scheme: dark;
  background: #000;
  font-family: sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  min-width: 320px;
  background: #000;
  overscroll-behavior: none;
}

#stellax-root {
  position: fixed;
  inset: 0;
  contain: strict;
  isolation: isolate;
  overflow: hidden;
  background: #000;
}

#stellax-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  outline: 0;
  background: #000;
  touch-action: none;
}

.stellax-startup {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  box-sizing: border-box;
  place-content: center;
  gap: 10px;
  padding: 24px;
  background: radial-gradient(circle at 50% 44%, #10242d 0, #050b0e 34%, #000 72%);
  color: #dcebed;
  font: 15px/1.4 sans-serif;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.stellax-startup strong {
  color: #fff;
  font-size: 28px;
  letter-spacing: 0.08em;
}

.stellax-startup[aria-busy="false"] span {
  color: #ffd6d2;
}

.stellax-controller-overlay {
  position: fixed;
  inset: 0;
  contain: layout style paint;
  z-index: 1000;
  pointer-events: none;
  color: #dcebed;
  font: 12px/1.35 sans-serif;
}

.stellax-controller-overlay[hidden],
.stellax-controller-overlay [hidden] {
  display: none !important;
}

.stellax-controller-panel {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  width: 424px;
  min-width: 320px;
  height: 640px;
  min-height: 180px;
  max-height: calc(100vh - 16px);
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgb(92 117 128 / 70%);
  border-right: 1px solid rgb(61 79 87 / 65%);
  border-bottom: 1px solid rgb(3 4 5 / 90%);
  border-left: 1px solid rgb(61 79 87 / 65%);
  border-radius: 9px;
  background: rgb(10 13 15 / 88%);
  pointer-events: auto;
  user-select: none;
}

.stellax-controller-panel-minimized {
  height: 38px;
  min-height: 38px;
  max-height: 38px;
}

.stellax-controller-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid rgb(56 71 77 / 80%);
  background: rgb(31 36 41 / 98%);
  cursor: move;
}

.stellax-controller-window-controls {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.stellax-traffic {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 28%);
  border-radius: 50%;
  margin: 0 7px 0 0;
  opacity: 0.9;
}

.stellax-traffic-close {
  background: rgb(255 95 87);
}

.stellax-traffic-minimize {
  background: rgb(245 191 46);
}

.stellax-traffic-zoom,
.stellax-traffic-maximize {
  background: rgb(40 200 64);
}

.stellax-controller-panel .stellax-traffic-minimize {
  border-color: rgb(0 0 0 / 28%);
  background: rgb(245 191 46);
}

.stellax-controller-panel .stellax-traffic.stellax-traffic-active {
  border-color: rgb(255 255 255 / 82%);
  opacity: 1;
}

.stellax-controller-title {
  display: flex;
  min-width: 0;
  height: 100%;
  align-items: center;
  flex: 1 1 auto;
  margin-left: 6px;
  line-height: 1;
  overflow: hidden;
  color: rgb(230 240 245);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.stellax-controller-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 12px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #4f7178 #141b1e;
}

.stellax-controller-app-host {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  background: rgb(7 9 10 / 96%);
}

.stellax-controller-app-nav {
  display: flex;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid rgb(96 137 145 / 30%);
  background: #121718;
}

.stellax-controller-panel .stellax-controller-app-nav button {
  width: 30px;
  min-width: 30px;
  height: 28px;
  min-height: 28px;
  flex: 0 0 30px;
  margin-right: 8px;
  padding: 0 0 1px;
  border-radius: 6px;
  background: rgb(38 46 48);
}

.stellax-controller-app-title {
  color: #edf1f1;
  font-size: 13px;
}

.stellax-controller-app-surface {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.stellax-controller-app-launcher {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, 112px);
  align-content: start;
  gap: 10px 8px;
  padding: 14px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}

.stellax-controller-panel .stellax-controller-app-tile {
  display: flex;
  width: 112px;
  height: 108px;
  box-sizing: border-box;
  flex-direction: column;
  flex: 0 0 112px;
  align-items: center;
  justify-content: center;
  padding: 9px 8px 7px;
  border: 1px solid #46575b;
  border-radius: 8px;
  background: #171d1f;
  color: #e9f0f1;
  cursor: pointer;
}

.stellax-controller-panel .stellax-controller-app-tile > * {
  pointer-events: none;
}

.stellax-controller-app-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 8px;
  background: rgb(57 62 64);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.stellax-controller-app-tile[data-stellax-app-source="server-websocket"] .stellax-controller-app-icon {
  background: rgb(224 138 38);
}

.stellax-controller-app-label {
  width: 94px;
  height: 28px;
  overflow: hidden;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}

.stellax-controller-app-frame {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  background: #080a0b;
  color-scheme: dark;
}

.stellax-controller-body h2,
.stellax-controller-entity-details h2 {
  margin: 2px 0;
  color: rgb(184 219 235);
  font-size: 11px;
  font-weight: 700;
}

.stellax-controller-time {
  display: flex;
  height: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  background: rgb(18 23 26 / 90%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.stellax-controller-debug {
  margin-top: 6px;
  color: #8eacb1;
  font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}

.stellax-controller-status-row {
  display: flex;
  min-height: 24px;
  align-items: center;
  margin-top: 4px;
}

.stellax-controller-light {
  width: 12px;
  height: 12px;
  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  flex: 0 0 12px;
  box-sizing: border-box;
  margin-right: 8px;
  border: 1px solid rgb(0 0 0 / 35%);
  border-radius: 6px;
  background: rgb(92 97 99);
}

.stellax-controller-light-ready {
  background: rgb(51 214 82);
}

.stellax-controller-light-broken {
  background: rgb(242 46 36);
}

.stellax-controller-light-pending {
  background: rgb(255 194 41);
}

.stellax-controller-light-flash {
  border-color: #fff;
  background: rgb(209 211 211);
}

.stellax-controller-light-ready.stellax-controller-light-flash {
  background: rgb(198 244 207);
}

.stellax-controller-light-broken.stellax-controller-light-flash {
  background: rgb(251 196 194);
}

.stellax-controller-light-pending.stellax-controller-light-flash {
  background: rgb(255 238 195);
}

#stellax-controller-status {
  flex: 1 1 auto;
  margin-bottom: 2px;
  color: #fff;
  font-size: 12px;
}

.stellax-controller-row {
  display: flex;
  height: 30px;
  margin-top: 4px;
}

.stellax-controller-panel button,
.stellax-controller-panel select {
  min-height: 30px;
  box-sizing: border-box;
  border: 1px solid #3d5960;
  border-radius: 5px;
  background: #1c282c;
  color: #e1eff1;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.stellax-controller-panel button {
  flex: 1 1 0;
  padding: 5px 8px;
  cursor: pointer;
}

.stellax-controller-panel .stellax-traffic {
  width: 13px;
  height: 13px;
  min-width: 13px;
  max-width: 13px;
  min-height: 13px;
  max-height: 13px;
  flex: 0 0 13px;
  padding: 0;
  border-radius: 7px;
  cursor: pointer;
}

.stellax-controller-row button {
  height: 28px;
  min-height: 28px;
  margin: 0 2px;
  flex: 1 1 0;
}

.stellax-controller-panel .stellax-controller-select {
  width: calc(100% - 4px);
  height: 30px;
  min-height: 30px;
  margin: 4px 2px 0;
  font-weight: 700;
}

.stellax-controller-description {
  margin: 0 0 2px;
  color: rgb(209 230 235);
  font-size: 12px;
  white-space: normal;
}

.stellax-controller-panel .stellax-controller-raster-selected {
  background: rgb(46 107 133 / 96%);
  color: #fff;
}

.stellax-controller-stat {
  display: flex;
  height: 28px;
  min-width: 0;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgb(31 41 46 / 92%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.stellax-widget-resize-handle {
  position: absolute;
  z-index: 2;
  background: transparent;
}

.stellax-widget-resize-left,
.stellax-widget-resize-right {
  top: 8px;
  bottom: 8px;
  width: 8px;
  cursor: ew-resize;
}

.stellax-widget-resize-left { left: 0; }
.stellax-widget-resize-right { right: 0; }

.stellax-widget-resize-top,
.stellax-widget-resize-bottom {
  right: 8px;
  left: 8px;
  height: 8px;
  cursor: ns-resize;
}

.stellax-widget-resize-top { top: 0; }
.stellax-widget-resize-bottom { bottom: 0; }

.stellax-widget-resize-left-top,
.stellax-widget-resize-right-top,
.stellax-widget-resize-left-bottom,
.stellax-widget-resize-right-bottom {
  width: 8px;
  height: 8px;
}

.stellax-widget-resize-left-top { top: 0; left: 0; cursor: nwse-resize; }
.stellax-widget-resize-right-top { top: 0; right: 0; cursor: nesw-resize; }
.stellax-widget-resize-left-bottom { bottom: 0; left: 0; cursor: nesw-resize; }
.stellax-widget-resize-right-bottom { right: 0; bottom: 0; cursor: nwse-resize; }

.stellax-widget-resize-grip {
  border-right: 2px solid rgb(158 184 191 / 72%);
  border-bottom: 2px solid rgb(158 184 191 / 72%);
}

.stellax-controller-panel-minimized .stellax-controller-app-host,
.stellax-controller-panel-minimized .stellax-widget-resize-handle {
  display: none;
}

.stellax-controller-panel select {
  width: 100%;
  margin: 3px 0 5px;
  padding: 4px 7px;
  cursor: pointer;
}

.stellax-controller-panel button:disabled,
.stellax-controller-panel select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.stellax-controller-description,
.stellax-controller-blocker,
.stellax-controller-hint,
.stellax-controller-footer {
  margin: 4px 1px;
  color: #b9cdd1;
  overflow-wrap: anywhere;
}

.stellax-controller-blocker { color: #f1bf67; }
.stellax-controller-hint { color: #91adb2; font-size: 10px; }
.stellax-controller-footer { color: #718b90; font-size: 10px; }

.stellax-controller-input-help {
  margin-top: 6px;
}

.stellax-controller-input-help p {
  margin: 2px 1px;
  color: #fff;
  font-size: 12px;
}

.stellax-controller-count-grid {
  white-space: pre-line;
  columns: 2;
  column-gap: 18px;
}

.stellax-controller-entity-details {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  width: 420px;
  min-height: 180px;
  box-sizing: border-box;
  flex-direction: column;
  padding: 10px 12px;
  overflow: hidden;
  border-top: 1px solid rgb(92 148 163 / 62%);
  border-right: 1px solid rgb(92 148 163 / 45%);
  border-bottom: 1px solid rgb(3 5 8 / 80%);
  border-left: 1px solid rgb(92 148 163 / 45%);
  border-radius: 8px;
  background: rgb(8 10 13 / 88%);
  pointer-events: auto;
}

.stellax-controller-entity-details .stellax-entity-title {
  margin: 0 0 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.stellax-entity-details-text {
  margin-bottom: 2px;
  color: rgb(219 240 245);
  font-size: 12px;
  white-space: pre-line;
}

.stellax-controller-entity-details .stellax-entity-action {
  height: 28px;
  min-height: 28px;
  margin: 8px 2px 0;
  border: 1px solid #3d5960;
  border-radius: 5px;
  background: #1c282c;
  color: #e1eff1;
  font: 700 12px/1.35 sans-serif;
  cursor: pointer;
}

#stellax-controller-open-terminal {
  margin-top: 6px;
}

.stellax-entity-app-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  color: #dcebed;
  font: 12px/1.35 sans-serif;
}

.stellax-entity-app-overlay [hidden] {
  display: none !important;
}

.stellax-terminal-window {
  position: absolute;
  display: flex;
  width: 760px;
  min-width: 420px;
  max-width: calc(100vw - 16px);
  height: 360px;
  min-height: 220px;
  max-height: calc(100vh - 16px);
  box-sizing: border-box;
  flex-direction: column;
  overflow: hidden;
  border-top: 1px solid rgb(92 117 128 / 70%);
  border-right: 1px solid rgb(61 79 87 / 65%);
  border-bottom: 1px solid rgb(3 4 5 / 90%);
  border-left: 1px solid rgb(61 79 87 / 65%);
  border-radius: 9px;
  background: rgb(6 8 10 / 98%);
  pointer-events: auto;
}

.stellax-terminal-window-minimized {
  height: 38px !important;
  min-height: 38px;
  max-height: 38px;
}

.stellax-terminal-header {
  display: flex;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid rgb(56 71 77 / 80%);
  background: rgb(31 36 41 / 98%);
  cursor: move;
  user-select: none;
}

.stellax-terminal-header button {
  padding: 0;
  cursor: pointer;
}

.stellax-terminal-title {
  display: flex;
  height: 100%;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 6px;
  line-height: 1;
  overflow: hidden;
  color: rgb(230 240 245);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stellax-terminal-size {
  min-width: 72px;
  color: rgb(143 184 196);
  font-size: 11px;
  text-align: right;
}

.stellax-terminal-body {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 8px 10px;
  background: rgb(1 2 3 / 98%);
}

.stellax-terminal-status {
  margin-right: 10px;
  color: rgb(158 179 189);
  font-size: 11px;
}

.stellax-terminal-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 6px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 5px;
  background: rgb(1 2 3);
  scrollbar-color: #4f7178 #0b1012;
}

.stellax-terminal-content {
  position: relative;
  width: max-content;
  min-width: 100%;
  min-height: 100%;
}

.stellax-terminal-screen {
  min-height: 100%;
  margin: 0;
  color: rgb(209 232 214);
  font: 13px/17.25px ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
}

.stellax-terminal-input {
  position: absolute;
  bottom: 8px;
  left: 10px;
  width: 2px;
  height: 17.25px;
  min-height: 17.25px;
  padding: 0;
  border: 0;
  opacity: 0.01;
}

.stellax-terminal-window .stellax-widget-resize-handle {
  pointer-events: auto;
}

.stellax-terminal-screen {
  margin: 0;
  color: #dbecee;
  font: 13px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
  user-select: text;
}

.stellax-terminal-screen::selection,
.stellax-terminal-screen span::selection {
  color: #071012;
  background: #b9e5ea;
}

.stellax-terminal-cursor {
  position: absolute;
  z-index: 2;
  background: rgb(218 242 245 / 52%);
  animation: stellax-terminal-cursor-blink 1s steps(1, end) infinite;
  pointer-events: none;
}

@keyframes stellax-terminal-cursor-blink {
  0%, 49.999% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.stellax-terminal-measure {
  position: absolute;
  visibility: hidden;
  font: 13px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

.stellax-terminal-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.stellax-terminal-resize {
  position: absolute;
  z-index: 3;
}

.stellax-terminal-resize-n,
.stellax-terminal-resize-s {
  right: 8px;
  left: 8px;
  height: 8px;
  cursor: ns-resize;
}

.stellax-terminal-resize-e,
.stellax-terminal-resize-w {
  top: 8px;
  bottom: 8px;
  width: 8px;
  cursor: ew-resize;
}

.stellax-terminal-resize-n { top: -4px; }
.stellax-terminal-resize-s { bottom: -4px; }
.stellax-terminal-resize-e { right: -4px; }
.stellax-terminal-resize-w { left: -4px; }

.stellax-terminal-resize-ne,
.stellax-terminal-resize-nw,
.stellax-terminal-resize-se,
.stellax-terminal-resize-sw {
  width: 14px;
  height: 14px;
}

.stellax-terminal-resize-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.stellax-terminal-resize-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.stellax-terminal-resize-se { right: -4px; bottom: -4px; cursor: nwse-resize; }
.stellax-terminal-resize-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }

:root:not([data-stellax-theme]) .stellax-controller-overlay,
[data-stellax-theme="macos"] .stellax-controller-overlay,
:root:not([data-stellax-theme]) .stellax-entity-app-overlay,
[data-stellax-theme="macos"] .stellax-entity-app-overlay {
  font-family: sans-serif;
}

:root:not([data-stellax-theme]) .stellax-controller-panel,
[data-stellax-theme="macos"] .stellax-controller-panel,
:root:not([data-stellax-theme]) .stellax-terminal-window,
[data-stellax-theme="macos"] .stellax-terminal-window {
  border-radius: 9px;
}

:root:not([data-stellax-theme]) .stellax-controller-entity-details,
[data-stellax-theme="macos"] .stellax-controller-entity-details {
  border-radius: 8px;
}

:root:not([data-stellax-theme]) .stellax-controller-header,
[data-stellax-theme="macos"] .stellax-controller-header,
:root:not([data-stellax-theme]) .stellax-terminal-header,
[data-stellax-theme="macos"] .stellax-terminal-header {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 12px;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-controller-window-controls,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-controller-window-controls {
  align-items: center;
  align-self: center;
  order: 0;
  margin-right: 10px;
  margin-left: 0;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic {
  width: 13px;
  min-width: 13px;
  max-width: 13px;
  height: 13px;
  min-height: 13px;
  max-height: 13px;
  flex: 0 0 13px;
  box-sizing: border-box;
  align-self: center;
  order: 0;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 28%);
  border-radius: 50%;
  margin: 0 7px 0 0;
  opacity: 0.9;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic::before,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic::before,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic::before,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic::before {
  content: none;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-close,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-close,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-close,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-close {
  background: rgb(255 95 87);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-minimize,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-minimize,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-minimize,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-minimize {
  background: rgb(245 191 46);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-zoom,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-zoom,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-zoom,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-zoom {
  background: rgb(40 200 64);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic.stellax-traffic-active,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic.stellax-traffic-active {
  border-color: rgb(255 255 255 / 82%);
  opacity: 1;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-controller-title,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-controller-title {
  display: flex;
  height: 100%;
  align-items: center;
  order: 0;
  margin-left: 6px;
  color: rgb(230 240 245);
  font-family: sans-serif;
  font-size: 15px;
  font-weight: 700;
}

:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-terminal-title,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-terminal-title {
  display: flex;
  height: 100%;
  align-items: center;
  order: 0;
  margin-left: 6px;
  color: rgb(230 240 245);
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 700;
}

:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-terminal-status,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-terminal-status {
  order: 0;
}

:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-terminal-size,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-terminal-size {
  order: 0;
  margin-right: 0;
}

:root:not([data-stellax-theme]) .stellax-controller-entity-details .stellax-entity-title,
[data-stellax-theme="macos"] .stellax-controller-entity-details .stellax-entity-title {
  margin: 0 0 6px;
  color: #fff;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 700;
}

[data-stellax-theme="windows11"] .stellax-controller-overlay,
[data-stellax-theme="windows11"] .stellax-entity-app-overlay {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

[data-stellax-theme="windows11"] .stellax-controller-panel,
[data-stellax-theme="windows11"] .stellax-terminal-window,
[data-stellax-theme="windows11"] .stellax-controller-entity-details {
  border-radius: 8px;
}

[data-stellax-theme="windows11"] .stellax-controller-header,
[data-stellax-theme="windows11"] .stellax-terminal-header {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  align-items: center;
  padding: 0 0 0 12px;
  border-bottom: 1px solid rgb(56 71 77 / 80%);
  background: rgb(30 34 38 / 98%);
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-controller-title {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  order: 1;
  margin-left: 0;
  color: rgb(240 245 247);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-controller-window-controls {
  align-items: stretch;
  align-self: stretch;
  order: 2;
  margin-right: 0;
  margin-left: auto;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-terminal-title {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
  order: 1;
  margin-left: 0;
  color: rgb(240 245 247);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-terminal-status {
  order: 2;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-terminal-size {
  order: 3;
  margin-right: 8px;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-terminal-minimize {
  order: 4;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-terminal-maximize {
  order: 5;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-terminal-close {
  order: 6;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic {
  display: flex;
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  flex: 0 0 46px;
  box-sizing: border-box;
  align-items: center;
  align-self: stretch;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
  color: rgb(233 239 241);
  cursor: pointer;
  opacity: 1;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic::before,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic::before {
  display: block;
  color: inherit;
  font: 400 13px/1 "Segoe Fluent Icons", "Segoe UI Symbol", "Segoe UI", system-ui, sans-serif;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-minimize::before,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-minimize::before {
  content: "\2212";
  font-size: 15px;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-zoom::before,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-zoom::before {
  content: "\25A1";
  font-size: 12px;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-close::before,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-close::before {
  content: "\00D7";
  font-size: 17px;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-minimize:hover,
[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-zoom:hover,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-minimize:hover,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-zoom:hover {
  background: rgb(255 255 255 / 12%);
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-close:hover,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-close:hover {
  background: rgb(196 43 28);
  color: #fff;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic.stellax-traffic-active,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic.stellax-traffic-active {
  border: 0;
  background: rgb(255 255 255 / 16%);
  opacity: 1;
}

[data-stellax-theme="windows11"] .stellax-controller-entity-details .stellax-entity-title {
  display: flex;
  min-height: 26px;
  align-items: center;
  margin: 0 0 6px;
  color: rgb(240 245 247);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Window control set.
   A title bar renders one button per control from the same template, so each
   control carries its own control class and is placed by CSS order rather than
   by its position in the markup: a control can be added or dropped without any
   other rule changing. The maximise control answers to stellax-traffic-zoom
   and to stellax-traffic-maximize, so either name the template emits renders.
   The macOS set orders below zero because the title, status and size share the
   terminal title bar at order zero and the controls lead that bar. */

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-maximize,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-maximize,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-maximize,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-maximize {
  background: rgb(40 200 64);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-close,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-close,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-close,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-close {
  order: -3;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-minimize,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-minimize,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-minimize,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-minimize {
  order: -2;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-zoom,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-zoom,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-zoom,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-zoom,
:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-maximize,
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-maximize,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-maximize,
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-maximize {
  order: -1;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic:hover:not(:disabled),
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 78%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 22%);
  opacity: 1;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-close:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-close:hover:not(:disabled),
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-close:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-close:hover:not(:disabled) {
  background: rgb(255 133 126);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-minimize:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-minimize:hover:not(:disabled),
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-minimize:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-minimize:hover:not(:disabled) {
  background: rgb(255 211 92);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-zoom:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-zoom:hover:not(:disabled),
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-zoom:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-zoom:hover:not(:disabled),
:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic-maximize:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic-maximize:hover:not(:disabled),
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic-maximize:hover:not(:disabled),
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic-maximize:hover:not(:disabled) {
  background: rgb(70 226 98);
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic:active:not(:disabled),
[data-stellax-theme="macos"] .stellax-controller-header .stellax-traffic:active:not(:disabled),
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic:active:not(:disabled),
[data-stellax-theme="macos"] .stellax-terminal-header .stellax-traffic:active:not(:disabled) {
  box-shadow: inset 0 0 0 8px rgb(0 0 0 / 22%);
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-maximize::before,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-maximize::before {
  content: "\25A1";
  font-size: 12px;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-minimize {
  order: 3;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-zoom,
[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-maximize {
  order: 4;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-close {
  order: 5;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-minimize {
  order: 4;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-zoom,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-maximize {
  order: 5;
}

[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-close {
  order: 6;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-maximize:hover:not(:disabled),
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-maximize:hover:not(:disabled) {
  background: rgb(255 255 255 / 12%);
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic:active:not(:disabled),
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic:active:not(:disabled) {
  background: rgb(255 255 255 / 6%);
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic-close:active:not(:disabled),
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic-close:active:not(:disabled) {
  background: rgb(163 34 22);
  color: #fff;
}

[data-stellax-theme="windows11"] .stellax-controller-header .stellax-traffic:disabled:hover,
[data-stellax-theme="windows11"] .stellax-terminal-header .stellax-traffic:disabled:hover {
  background: transparent;
  color: rgb(233 239 241);
}

/* Cursor affordance.
   Every control the operator can activate reads as clickable in both themes,
   and a control that cannot be activated reads as unavailable instead. */

.stellax-controller-overlay button,
.stellax-controller-overlay select,
.stellax-controller-overlay summary,
.stellax-controller-overlay [role="button"],
.stellax-controller-overlay .stellax-traffic,
.stellax-controller-overlay .stellax-controller-app-tile,
.stellax-controller-overlay .stellax-entity-action,
.stellax-entity-app-overlay button,
.stellax-entity-app-overlay select,
.stellax-entity-app-overlay summary,
.stellax-entity-app-overlay [role="button"],
.stellax-entity-app-overlay .stellax-traffic {
  cursor: pointer;
}

:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic,
[data-stellax-theme] .stellax-controller-header .stellax-traffic,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic,
[data-stellax-theme] .stellax-terminal-header .stellax-traffic {
  cursor: pointer;
}

.stellax-controller-overlay button:disabled,
.stellax-controller-overlay select:disabled,
.stellax-controller-overlay [aria-disabled="true"],
.stellax-entity-app-overlay button:disabled,
.stellax-entity-app-overlay select:disabled,
.stellax-entity-app-overlay [aria-disabled="true"],
:root:not([data-stellax-theme]) .stellax-controller-header .stellax-traffic:disabled,
[data-stellax-theme] .stellax-controller-header .stellax-traffic:disabled,
:root:not([data-stellax-theme]) .stellax-terminal-header .stellax-traffic:disabled,
[data-stellax-theme] .stellax-terminal-header .stellax-traffic:disabled {
  cursor: not-allowed;
}