/* PuppyMacro website: "Night" style, dark like the app. */
:root {
  --bg: #121317;
  --surface: #1b1d23;
  --border: #262933;
  --text: #e9ecf2;
  --muted: #b7bdc9;
  --faint: #8d94a3;
  --accent: #5bc8ff;
  --accent-text: #7fd6ff;
  --accent-ink: #06131c;
  --step: #1f3443;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-text); }
a:hover { color: #b5e8ff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; }
code, kbd {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.9em;
}
kbd {
  background: #262933;
  border: 1px solid #343846;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Header: stays at the top while scrolling */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(18, 19, 23, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #23262f;
}
.site-header .wrap {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
}
:root { --header-height: 66px; }
[id] { scroll-margin-top: calc(var(--header-height) + 16px); }
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 20px;
}
.brand img { width: 32px; height: 32px; }
.header-tools { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; font-size: 15px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.site-nav a:not(.button) { color: var(--muted); text-decoration: none; }
.site-nav a:not(.button):hover, .site-nav a[aria-current="page"] { color: var(--text); }
/* Download: in the header on wide screens, at the end of the menu on phones */
.site-nav .nav-download { display: none; }
/* The phones' menu button, shown by site.js */
.nav-toggle { display: none; }

/* Phones (site.js adds has-menu): one line with the brand, the language menu and the menu button. The links open
   under the header, as the languages do, across the whole width so they never leave the screen. */
@media (max-width: 760px) {
  .site-header.has-menu { position: relative; }
  .has-menu .wrap { flex-wrap: nowrap; gap: 8px; }
  .has-menu .header-tools { flex-wrap: nowrap; gap: 8px; }
  .has-menu .header-download { display: none; }
  .has-menu .nav-toggle {
    display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
    padding: 0; border-radius: 10px; cursor: pointer;
    background: transparent; border: 1px solid #343846; color: var(--text);
  }
  .has-menu .nav-toggle:hover, .has-menu .nav-toggle[aria-expanded="true"] { background: var(--surface); border-color: #4a5063; }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-open, .nav-toggle[aria-expanded="false"] .nav-toggle-close { display: none; }
  .has-menu .site-nav {
    display: none; position: absolute; top: calc(100% + 8px); inset-inline: 16px; z-index: 20;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 10px; border-radius: 14px;
    background: var(--surface); border: 1px solid #343846; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .has-menu.nav-open .site-nav { display: flex; }
  .has-menu .site-nav a:not(.button) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; }
  .has-menu .site-nav a:not(.button):hover { background: #232630; }
  .has-menu .site-nav a[aria-current="page"] { background: #262933; }
  .has-menu .nav-download { display: flex; justify-content: center; min-height: 48px; margin-top: 6px; }
  .has-menu .language-menu { position: static; }
  .has-menu .language-menu summary { min-height: 44px; gap: 6px; padding: 0 10px 0 9px; }
  .has-menu .language-name { display: none; }
  .has-menu .language-popup { inset-inline: 16px; width: auto; }
}

/* Round flags (assets/flags, flag-icons) and the letter used for Arabic, which no single country's flag stands for */
.flag {
  width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.flag-letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: #2b3a44; color: var(--text); font-size: 14px; line-height: 1;
}

/* Language menu of the home pages: the current language in the bar, the languages in a grid below it */
.language-menu { position: relative; }
.language-menu summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  min-height: 36px; padding: 0 10px 0 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid #343846; color: var(--text); font-size: 15px;
}
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary:hover, .language-menu[open] summary { border-color: #4a5063; }
.language-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.language-menu summary svg { width: 14px; height: 14px; }
.language-popup {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 20;
  width: min(440px, calc(100vw - 32px)); padding: 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid #343846; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.language-popup p { margin: 0 6px 10px; font-size: 13px; color: var(--faint); }
.language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.language-grid a {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 10px;
  border-radius: 10px; color: var(--muted); text-decoration: none;
}
.language-grid a:hover { color: var(--text); background: #232630; }
.language-grid a[aria-current="true"] { color: var(--text); background: #262933; }
.language-grid .flag { width: 30px; height: 30px; }
.language-grid a[aria-current="true"] .flag { box-shadow: 0 0 0 2px var(--accent); }
.language-grid .flag-letter { font-size: 16px; }
@media (max-width: 520px) {
  .language-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The banner that offers the home page in the browser's language (site.js) */
.language-banner { background: var(--step); border-bottom: 1px solid #2c4a5e; }
.language-banner .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-top: 10px; padding-bottom: 10px; font-size: 15px;
}
.language-banner .flag { width: 22px; height: 22px; }
.language-banner-text { flex: 1 1 240px; }
.language-banner button { font: inherit; background: transparent; cursor: pointer; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: #8bd9ff; color: var(--accent-ink); }
.button-secondary { border: 1px solid #343846; color: var(--text); }
.button-small { min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 15px; }
.button-secondary:hover { border-color: #4a5063; color: var(--text); }

/* Hero */
.hero .wrap {
  display: flex; flex-wrap: wrap; gap: 56px; align-items: center;
  padding-top: 56px; padding-bottom: 72px;
}
.hero-text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-text h1 { margin: 0; font-size: clamp(40px, 6vw, 58px); font-weight: 700; letter-spacing: -0.02em; }
.hero-text p { margin: 0; font-size: 19px; color: var(--muted); max-width: 520px; }
.badge {
  align-self: flex-start;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-text); border: 1px solid #2b4a5c; border-radius: 999px; padding: 4px 12px;
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fine-print { font-size: 14px; color: var(--faint); }
.hero-shot { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }

/* App window frame around screenshots */
.window {
  width: 100%; max-width: 480px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid #2a2d37;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  background: #202020;
}

/* Sections */
.section { padding: 40px 0 72px; }
.section h2 { margin: 0 0 28px; font-size: 34px; font-weight: 600; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.card h3 { margin: 0; font-size: 18px; font-weight: 600; font-family: var(--body); }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card svg { width: 24px; height: 24px; }
/* A small label after a card's title ("MCP ready"), like the hero's badge */
.card h3 .tag {
  margin-inline-start: 8px; vertical-align: 2px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-text); border: 1px solid #2b4a5c; border-radius: 999px; padding: 2px 8px;
}

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.panel h2 { margin: 0 0 12px; font-size: 26px; }
.panel h3 { margin: 20px 0 8px; font-size: 18px; font-family: var(--body); }
.panel p, .panel li { color: var(--muted); font-size: 15px; }
.panel ul { margin: 0; padding-inline-start: 20px; }

/* Footer */
.site-footer { border-top: 1px solid #23262f; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding-top: 28px; padding-bottom: 28px; font-size: 14px; color: var(--faint);
}

/* Guide: sticky sidebar with the version select and the sections */
.guide { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 32px; padding-bottom: 72px; }
.guide-sidebar {
  flex: 1 1 220px; max-width: 250px;
  position: sticky; top: calc(var(--header-height) + 24px);
  display: flex; flex-direction: column; gap: 18px;
}
.version-picker { display: flex; flex-direction: column; gap: 6px; }
.version-picker label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
}
.version-select {
  min-height: 40px; padding: 0 10px; border-radius: 8px;
  background: var(--surface); color: var(--text); border: 1px solid #343846;
  font: inherit; font-size: 15px;
}
.guide-nav { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.guide-nav a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.guide-nav a:hover { color: var(--text); background: var(--surface); }
.guide-nav a[aria-current="page"] { color: var(--text); background: var(--step); font-weight: 600; }
.guide-content { flex: 999 1 560px; min-width: 0; }
.guide-version { margin: 0; font-size: 14px; color: var(--faint); }
.guide-content h1 { margin: 6px 0 20px; font-size: 42px; }
.guide-content h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 600; font-family: var(--body); }
.guide-content p, .guide-content li { color: var(--muted); }
.guide-content strong { color: var(--text); font-weight: 600; }
.guide-content ul, .guide-content ol { padding-left: 22px; }
.guide-content li { margin: 4px 0; }
.pager {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
}
.pager a {
  display: flex; flex-direction: column; min-width: 200px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 10px; text-decoration: none;
}
.pager a:hover { border-color: #3a4050; }
.pager .next { margin-left: auto; align-items: flex-end; }
.pager span { font-size: 13px; color: var(--faint); }
@media (max-width: 760px) {
  .guide-sidebar { position: static; max-width: none; }
  .site-header { position: static; }
}
/* Screenshots: the whole width of the text, centered; a click shows them at full size (site.js) */
.shot { margin: 24px auto; text-align: center; }
.shot img { margin: 0 auto; border-radius: 10px; border: 1px solid #2a2d37; }
.shot figcaption { margin-top: 8px; font-size: 14px; color: var(--faint); }
.zoomable { cursor: zoom-in; }
.zoom { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.zoom::backdrop { background: rgba(8, 9, 12, 0.88); }
.zoom img {
  max-width: 95vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); cursor: zoom-out;
}
.zoom-close {
  position: fixed; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text); border: 1px solid #343846; font-size: 18px; cursor: pointer;
}
.zoom-close:hover { border-color: #4a5063; }
.note {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 18px; margin: 16px 0; font-size: 15px; color: var(--muted);
}

/* Overlay panel drawn in HTML, with the same layout and texts as Views/OverlayPanel.xaml.
   .game-panel: the same, for the guides of 1.9.0 and earlier (released guides never change). */
.overlay-panel, .game-panel {
  width: 260px; padding: 12px; border-radius: 8px;
  background: rgba(32, 32, 32, 0.85); border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff; font-family: 'Segoe UI', system-ui, sans-serif;
}
.overlay-panel .title, .game-panel .title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 600; }
.overlay-panel .title img, .game-panel .title img { width: 14px; height: 14px; }
.overlay-panel .row, .game-panel .row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; padding: 7px 10px;
  border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}
.overlay-panel .row.running, .game-panel .row.running { border-color: rgba(108, 203, 95, 0.45); }
.overlay-panel .dot, .game-panel .dot { width: 8px; height: 8px; border-radius: 4px; background: #6e6e6e; flex: none; }
.overlay-panel .running .dot, .game-panel .running .dot { background: #6ccb5f; }
.overlay-panel .name, .game-panel .name { flex: 1; }
.overlay-panel .key, .game-panel .key {
  font-size: 11px; padding: 0 6px; border-radius: 4px;
  background: #373737; border: 1px solid #4c4c4c; border-bottom-width: 2px;
}
.overlay-panel .status, .game-panel .status { font-size: 11px; color: #c5c5c5; min-width: 44px; text-align: right; }
.overlay-panel .running .status, .game-panel .running .status { color: #6ccb5f; }
.overlay-panel .hints, .game-panel .hints {
  display: flex; gap: 14px; margin-top: 2px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; color: #c5c5c5;
}
.overlay-panel .hints span, .game-panel .hints span { display: flex; align-items: center; gap: 8px; }
/* The panel's move and exit buttons and its Stop all row (guides after 1.9.0). */
.overlay-panel .title .spacer { flex: 1; }
.overlay-panel .panel-button {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 5px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); font-weight: 400;
}
.overlay-panel .stop-all { justify-content: center; gap: 8px; font-size: 12px; color: #ff99a4; }
.overlay-panel .stop-all .square { width: 9px; height: 9px; border-radius: 2px; background: #ff99a4; }
/* A disabled row and the clicks hint under Stop all (guides after 1.12.0). */
.overlay-panel .row.disabled { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.28); }
.overlay-panel .disabled .dot { background: transparent; border: 1.5px solid #9e9e9e; box-sizing: border-box; }
.overlay-panel .disabled .name { color: #8a8a8a; }
.overlay-panel .click-hint { margin-top: 8px; font-size: 11px; color: #9e9e9e; text-align: center; }
/* The clicks hints on top, one per line, the line above Stop all and Open PuppyMacro (guides after 1.19.0). */
.overlay-panel .click-hints {
  margin: 0 2px 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11px; color: #9e9e9e; line-height: 1.5;
}
.overlay-panel .divider { height: 1px; margin: 4px 0 10px; background: rgba(255, 255, 255, 0.1); }
.overlay-panel .open-main { justify-content: center; gap: 8px; font-size: 12px; color: #c5c5c5; }
.floating-buttons {
  display: flex; align-items: center; gap: 22px; width: fit-content; padding: 18px 22px;
  border-radius: 8px; background: #2e4157;
}
.floating-button {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; box-sizing: border-box; border-radius: 50%;
  background: rgba(32, 32, 32, 0.85); border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff; font: 600 15px 'Segoe UI', system-ui, sans-serif;
}
.floating-button.small { width: 36px; height: 36px; font-size: 12px; }
.floating-button.running { border: 2px solid #6ccb5f; box-shadow: 0 0 0 4px rgba(108, 203, 95, 0.22); color: #6ccb5f; }
.floating-button.disabled { background: rgba(32, 32, 32, 0.55); border: 1.5px dashed rgba(255, 255, 255, 0.4); color: #8a8a8a; }
.floating-button kbd {
  position: absolute; left: 28px; top: 34px; padding: 0 4px;
  font: 400 10px/14px 'Segoe UI', system-ui, sans-serif; color: #ffffff;
  background: #373737; border: 1px solid #4c4c4c; border-bottom-width: 2px; border-radius: 4px;
}