/* ==========================================================================
   Hypersky theme
   Dusk-sky blue with an amber "status light" accent.
   ========================================================================== */

:root {
  --hs-dusk: #10223d;      /* hero + header */
  --hs-dusk-2: #183358;
  --hs-sky: #2f6fed;       /* links, primary buttons */
  --hs-sky-soft: #8fb4ff;
  --hs-amber: #ffb547;     /* the one warm accent */
  --hs-ink: #1a2433;
}

/* Theme colours ---------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--hs-dusk);
  --md-primary-fg-color--light: var(--hs-dusk-2);
  --md-primary-fg-color--dark: #0b182c;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--hs-sky);
  --md-typeset-a-color: var(--hs-sky);
  --md-default-fg-color: var(--hs-ink);
}

[data-md-color-scheme="slate"] {
  --md-hue: 216;
  --md-default-bg-color: #0d1828;
  --md-primary-fg-color: #0b1626;
  --md-primary-fg-color--light: var(--hs-dusk-2);
  --md-primary-fg-color--dark: #08111e;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--hs-amber);
  --md-typeset-a-color: var(--hs-sky-soft);
}

.md-header {
  background-color: var(--md-primary-fg-color);
  color: #fff;
}

/* Search button readable on the dark header */
.md-header .md-search__button {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.md-header .md-search__button:hover,
.md-header .md-search__button:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.md-typeset .md-button--primary {
  background-color: var(--hs-sky);
  border-color: var(--hs-sky);
  color: #fff;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
  background-color: #2459c9;
  border-color: #2459c9;
}

/* ==========================================================================
   Homepage
   ========================================================================== */

/* Hero: a full-width dusk band that continues the header */
.md-main {
  overflow-x: clip;
}

.md-typeset .hs-hero {
  margin: -2.6rem calc(50% - 50vw) 0;
  padding: 3.5rem 0 4.5rem;
  background:
    radial-gradient(1200px 400px at 80% 120%, rgba(47, 111, 237, 0.35), transparent 70%),
    var(--hs-dusk);
  color: #e8eef8;
}

[data-md-color-scheme="slate"] .md-typeset .hs-hero {
  background:
    radial-gradient(1200px 400px at 80% 120%, rgba(47, 111, 237, 0.28), transparent 70%),
    #0b1626;
}

.hs-hero__inner {
  max-width: 61rem;
  margin: 0 auto;
  padding: 0 0.8rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.md-typeset .hs-hero h1 {
  color: #ffffff;
  font-size: 2.6rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  max-width: 13ch;
}

.md-typeset .hs-hero p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #b9c7dd;
  max-width: 34em;
}

.md-typeset .hs-hero__actions {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.md-typeset .hs-hero__actions .md-button {
  margin: 0;
}

.md-typeset .hs-button-ghost {
  color: #e8eef8;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 238, 248, 0.35);
}

.md-typeset .hs-button-ghost:hover,
.md-typeset .hs-button-ghost:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(232, 238, 248, 0.6);
}

/* The demo: terminal + phone notification ------------------------------- */
.hs-demo {
  position: relative;
  padding-bottom: 2.4rem;
}

.hs-term {
  background: #0a1322;
  border: 1px solid rgba(143, 180, 255, 0.18);
  border-radius: 10px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.hs-term__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.55rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hs-term__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.hs-term__bar em {
  margin-left: 0.5rem;
  font-style: normal;
  font-size: 0.62rem;
  color: #7f8ea6;
}

.md-typeset pre.hs-term__body {
  margin: 0;
  padding: 1rem 1.1rem 1.3rem;
  background: none;
  font-family: var(--md-code-font-family);
  font-size: 0.72rem;
  line-height: 1.9;
  color: #d6e0f0;
  white-space: pre;
  overflow-x: auto;
}

.hs-line {
  display: block;
}

.hs-line b {
  color: var(--hs-sky-soft);
  font-weight: 500;
}

.hs-line--out {
  color: #9fb0c8;
}

.hs-line--ok {
  color: #7fe0b0;
}

/* Phone notification overlapping the terminal */
.hs-toast {
  position: absolute;
  right: -0.8rem;
  bottom: 0;
  width: min(19rem, 88%);
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(250, 251, 253, 0.97);
  color: var(--hs-ink);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  font-size: 0.72rem;
  line-height: 1.4;
}

.hs-toast__icon {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  background: var(--hs-sky);
  position: relative;
}

.hs-toast__icon::after {
  /* the amber status light */
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--hs-amber);
  box-shadow: 0 0 0 2px #fafbfd;
}

.hs-toast__text strong {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: #5b6779;
  margin-bottom: 0.1rem;
}

/* One orchestrated moment: script runs, then the notification arrives */
@media (prefers-reduced-motion: no-preference) {
  .hs-line--cmd {
    overflow: hidden;
    width: 0;
    animation: hs-type 1.1s steps(38, end) 0.3s forwards;
  }

  .hs-line--out,
  .hs-line--ok {
    opacity: 0;
    animation: hs-show 0.01s linear forwards;
  }

  .hs-line--out { animation-delay: 1.7s; }
  .hs-line--ok  { animation-delay: 2.2s; }

  .hs-toast {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: hs-arrive 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 2.9s forwards;
  }
}

@keyframes hs-type { to { width: 38ch; } }
@keyframes hs-show { to { opacity: 1; } }
@keyframes hs-arrive { to { opacity: 1; transform: none; } }

/* Sections below the hero ------------------------------------------------ */
.md-typeset .hs-section {
  padding: 1rem 0 2rem;
}

.md-typeset .hs-section a,
.md-typeset .hs-hero a {
  text-decoration: none;
}

.md-typeset .hs-section h2 {
  font-size: 1.15rem;
  margin: 2.4rem 0 1rem;
}

/* Topics: big, quiet tiles */
.hs-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.md-typeset a.hs-topic {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color);
  border: 1px solid transparent;
}

.md-typeset a.hs-topic:hover,
.md-typeset a.hs-topic:focus-visible {
  border-color: var(--hs-sky);
}

.hs-topic__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: var(--hs-dusk);
  color: var(--hs-amber);
}

[data-md-color-scheme="slate"] .hs-topic__icon {
  background: var(--hs-dusk-2);
}

.hs-topic__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.hs-topic__name {
  font-weight: 700;
  font-size: 0.9rem;
}

.hs-topic__desc {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--md-default-fg-color--light);
}

/* Latest guides: a plain, scannable list */
.hs-guides {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset a.hs-guide {
  display: block;
  padding: 1.1rem 0.2rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
}

.hs-guide__topic {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--md-typeset-a-color);
  margin-bottom: 0.15rem;
}

.hs-guide__title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset a.hs-guide:hover .hs-guide__title,
.md-typeset a.hs-guide:focus-visible .hs-guide__title {
  color: var(--md-typeset-a-color);
}

.hs-guide__desc {
  display: block;
  max-width: 40em;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .hs-signoff {
  margin-top: 2.5rem;
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}

/* Small screens ---------------------------------------------------------- */
@media (max-width: 52em) {
  .hs-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px;
    gap: 2.2rem;
  }

  .md-typeset .hs-hero {
    padding: 2.4rem 0 3rem;
  }

  .md-typeset .hs-hero h1 {
    font-size: 2rem;
  }

  .hs-demo {
    padding-bottom: 3.6rem;
  }

  .hs-toast {
    right: 0.4rem;
  }
}

/* ==========================================================================
   Embedded tools (World time, Filitime)
   ========================================================================== */
.md-typeset .hs-app {
  margin: 1.4rem 0 1rem;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hs-dusk);
  box-shadow: 0 18px 40px -22px rgba(16, 34, 61, 0.6);
}

.md-typeset .hs-app iframe {
  display: block;
  width: 100%;
  height: min(78vh, 620px);
  border: 0;
}