:root {
  --alkemy-black: #000000;
  --alkemy-white: #ffffff;
  --alkemy-grey-100: #e8e8e8;
  --alkemy-grey-300: #bdb8b8;
  --alkemy-grey-700: #4a4a4a;
  --alkemy-blue: #404aff;
  --alkemy-cyan: #3ed6ff;
  --alkemy-red: #ff2821;
  --alkemy-green: #00da7f;
  --color-canvas: var(--alkemy-grey-100);
  --color-surface: var(--alkemy-white);
  --color-ink: var(--alkemy-black);
  --color-muted: var(--alkemy-grey-700);
  --color-border: var(--alkemy-grey-300);
  --color-primary: var(--alkemy-black);
  --color-focus: var(--alkemy-blue);
  --color-info: var(--alkemy-cyan);
  --color-success: var(--alkemy-green);
  --color-warning: var(--alkemy-cyan);
  --color-danger: var(--alkemy-red);
  --radius-control: 0.375rem;
  --radius-panel: 0.625rem;
  --shadow-panel: 0 0.35rem 1.25rem rgb(0 0 0 / 8%);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-ink);
  background: var(--color-canvas);
  font: 0.875rem/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--alkemy-blue); }
button, .button, select, input {
  min-height: 2.75rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-control);
  padding: 0.6rem 0.8rem;
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
}
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
button:not(.secondary), .button:not(.secondary) { color: var(--alkemy-white); background: var(--color-primary); }
button.secondary, .button.secondary { color: var(--color-ink); background: var(--color-surface); }
button:disabled { cursor: not-allowed; opacity: 0.45; }
:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.runtime-header {
  display: flex;
  position: sticky;
  z-index: 2;
  top: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) 1rem max(1.25rem, env(safe-area-inset-left));
  color: var(--alkemy-white);
  background: var(--alkemy-black);
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--alkemy-white); text-decoration: none; }
.brand-mark { color: var(--alkemy-white); font-size: 1.1rem; font-weight: 900; }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1.05rem; letter-spacing: 0.14em; }
.brand-copy small { color: var(--alkemy-white); font-size: 0.75rem; letter-spacing: 0.12em; }
.muted { color: var(--color-muted); }
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); box-shadow: var(--shadow-panel); }
.state { display: inline-block; border: 1px solid var(--alkemy-black); border-radius: 999px; padding: 0.15rem 0.5rem; color: var(--alkemy-black); background: var(--color-warning); font-weight: 800; }
.state.healthy, .state.running, .state.success { background: var(--color-success); }
.state.stopped, .state.failed { color: var(--alkemy-white); background: var(--color-danger); }
.notice { border-left: 0.35rem solid var(--alkemy-black); color: var(--alkemy-black); background: var(--color-info); }
.notice.error { color: var(--alkemy-white); background: var(--color-danger); }
.error { color: var(--color-danger); }

@media (max-width: 48rem) {
  .runtime-header { position: static; align-items: flex-start; flex-direction: column; }
  button, .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}