/*
Home page of the documentation (docs/overrides/home.html).

Loaded only on the home page, from the `extrahead` block of the template, so the
layout overrides below do not affect any other page. Every selector is scoped
to .sk-home. Colors are tokens: light values on .sk-home, dark values when
Material's palette toggle sets data-md-color-scheme="slate" on <body>. The
animation stage is dark in both schemes.

The base components (hero, stage, code window, cards) follow the home page of
the skforecast documentation, so that both sites read as one family. Orange
marks the deterministic engine and violet the optional LLM layer.

See tools/docs/home_page/README.md.
*/

/*
===============================
Layout: full-width page inside Material
===============================
*/

.md-main__inner.md-grid {
  max-width: none;
  margin: 0;
}

.md-main__inner > .sk-home {
  flex: 1 1 auto;
  min-width: 0;
}

/*
===============================
Color tokens
===============================
*/

.sk-home {
  --bg: var(--md-default-bg-color);
  --bg-soft: #f4f6f9;
  --surface: #ffffff;
  --ink: #1b2433;
  --ink-2: #4d586b;
  --line: #e1e6ee;
  --heading: #0b1f3a;
  --orange: #f79939;
  --orange-ink: #b35a06;
  --btn-ink: #1f1405;
  --header: #001633;
  --stage: #0b1a30;
  --stage-panel: #10233f;
  --stage-line: #203454;
  --stage-ink: #e6edf6;
  --stage-muted: #9aabc3;
  --stage-hist: #d3ddeb;
  --fc: #f79939;
  --llm: #b58be0;
  --llm-ink: #7b45b8;
  --code-bg: #0d1726;
  --code-ink: #dbe3ee;
  --tk-key: #f7a656;
  --tk-cls: #7cc4f0;
  --tk-fn: #f0d98c;
  --tk-str: #a6d99a;
  --tk-num: #d4b0ee;
  --tk-com: #7d8ba1;
  --tk-pun: #b3bfd0;
  --good: #1f8a4c;
  --display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Ubuntu Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-md-color-scheme="slate"] .sk-home {
  color-scheme: dark;
  --bg: var(--md-default-bg-color);
  --bg-soft: #232733;
  --surface: #272c38;
  --ink: #e3e7ee;
  --ink-2: #a7b1c1;
  --line: #353b49;
  --heading: #f2f5f9;
  --orange-ink: #f7a656;
  --stage: #0b1a30;
  --good: #4cc27d;
  --llm-ink: #c9a6f0;
}

/*
===============================
Components
===============================
*/

.sk-home,
.sk-home * {
  box-sizing: border-box;
}

.sk-home {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

.sk-home a {
  color: var(--orange-ink);
  text-decoration: none;
}

.sk-home a:hover {
  text-decoration: underline;
}

.sk-home a:focus-visible,
.sk-home button:focus-visible,
.sk-home summary:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

.sk-home h1,
.sk-home h2,
.sk-home h3 {
  font-family: var(--display);
  color: var(--heading);
  margin: 0;
  text-wrap: balance;
  line-height: 1.2;
}

.sk-home p {
  margin: 0;
}

.sk-home code {
  font-family: var(--mono);
}

.sk-home .container {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 24px;
}

.sk-home .hero {
  padding-block: 40px 22px;
}

.sk-home .eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 14px;
}

.sk-home .hero h1 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  max-width: 24ch;
}

.sk-home .hero .lede {
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--ink-2);
  margin-top: 14px;
  max-width: 62ch;
}

.sk-home .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
}

.sk-home .btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--heading);
  background: var(--surface);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.sk-home .btn:hover {
  text-decoration: none;
  border-color: var(--orange);
}

.sk-home .btn.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--btn-ink);
}

.sk-home .btn.primary:hover {
  background: #f08a24;
}

.sk-home .pip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 6px 6px 14px;
  color: var(--ink);
}

.sk-home .pip .dollar {
  color: var(--ink-2);
  user-select: none;
}

/* Copy button with Material's copy icon (the one of its code blocks); it shows
   a check for a moment after copying. */
.sk-home .copy {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--ink-2);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sk-home .copy svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.sk-home .copy .ok,
.sk-home .copy.copied .cp {
  display: none;
}

.sk-home .copy.copied .ok {
  display: inline-grid;
}

.sk-home .copy.copied {
  color: var(--good);
}

.sk-home .copy:hover {
  color: var(--heading);
  border-color: var(--line);
}

.sk-home .stage-wrap {
  padding-block: 8px 28px;
}

.sk-home .stage {
  background: var(--stage);
  color: var(--stage-ink);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 22, 51, 0.55);
  border: 1px solid #13284a;
}

.sk-home .stage-top {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--stage-line);
}

.sk-home .steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  min-width: 0;
}

.sk-home .step {
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-right: 1px solid var(--stage-line);
  color: var(--stage-muted);
  padding: 14px 18px 12px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  position: relative;
  min-width: 0;
}

.sk-home .step .n {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sk-home .step .t {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--stage-muted);
  line-height: 1.3;
}

.sk-home .step .bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--orange);
}

.sk-home .step.on .t {
  color: #fff;
}

.sk-home .step.on .n {
  color: var(--orange);
}

.sk-home .step:hover .t {
  color: #fff;
}

.sk-home .play {
  font: inherit;
  background: none;
  border: 0;
  color: var(--stage-muted);
  width: 56px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
}

.sk-home .play:hover {
  color: #fff;
}

.sk-home .play svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.sk-home .stage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  min-height: 0;
}

.sk-home .chart-box {
  padding: 18px 8px 6px 10px;
  min-width: 0;
}

.sk-home .chart-box svg {
  width: 100%;
  height: auto;
  display: block;
}

.sk-home .side {
  border-left: 1px solid var(--stage-line);
  background: var(--stage-panel);
  padding: 20px 20px;
  display: grid;
  grid-template: minmax(0, auto) / minmax(0, 1fr);
  align-content: start;
  position: relative;
  min-height: 330px;
}

.sk-home .pane {
  grid-area: 1 / 1;
  display: grid;
  gap: 10px;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

.sk-home .pane.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease 0.2s, visibility 0s;
}

.sk-home .pane h3 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.sk-home .pane p.small {
  font-size: 13.5px;
  color: var(--stage-muted);
  line-height: 1.5;
}

/* Keeps a hyphenated name such as skforecast-ai from breaking at the hyphen. */
.sk-home .nw {
  white-space: nowrap;
}

.sk-home .facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 13.5px;
  margin: 4px 0 0;
}

.sk-home .facts dt {
  color: var(--stage-muted);
}

.sk-home .facts dd {
  margin: 0;
  color: var(--stage-ink);
  font-variant-numeric: tabular-nums;
}

.sk-home .stage-code {
  border-top: 1px solid var(--stage-line);
  background: #081427;
  padding: 14px 20px;
  min-height: 124px;
  overflow-x: auto;
}

.sk-home .stage-code pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  color: var(--code-ink);
  transition: opacity 0.25s ease;
  white-space: pre;
}

.sk-home .stage-foot {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 12px;
  max-width: 90ch;
}

.sk-home details.stage-foot {
  border: 0;
  background: none;
}

.sk-home details.stage-foot summary {
  cursor: pointer;
  list-style: none;
  padding: 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-2);
}

.sk-home .stage-foot summary::-webkit-details-marker {
  display: none;
}

.sk-home .stage-foot .how {
  color: var(--orange-ink);
  white-space: nowrap;
}

.sk-home .stage-foot .how::after {
  content: " ▸";
}

.sk-home .stage-foot[open] .how::after {
  content: " ▾";
}

.sk-home .stage-foot p {
  margin-top: 8px;
  line-height: 1.55;
}

/* Text for screen readers only */
.sk-home .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sk-home .g-grid {
  stroke: #1a2d4b;
  stroke-width: 1;
}

.sk-home .g-ax {
  fill: var(--stage-muted);
  font: 12px var(--body);
  font-variant-numeric: tabular-nums;
}

.sk-home .g-axlab {
  fill: var(--stage-muted);
  font: 600 11px var(--display);
  letter-spacing: 0.05em;
}

.sk-home .g-hz {
  fill: rgba(255, 255, 255, 0.035);
}

.sk-home .g-hzline {
  stroke: #3a5582;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.sk-home .g-hzlab {
  fill: var(--stage-muted);
  font: 600 12px var(--display);
  letter-spacing: 0.04em;
}

.sk-home .g-hist {
  fill: none;
  stroke: var(--stage-hist);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sk-home .g-act {
  fill: none;
  stroke: var(--stage-hist);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sk-home .g-fc {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sk-home .g-band {
  stroke: none;
}

.sk-home .g-dlab {
  font: 600 13px var(--display);
  fill: var(--stage-ink);
}

.sk-home section.block {
  padding-block: 72px;
}

.sk-home section.block.alt {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

.sk-home .sec-head {
  display: grid;
  gap: 12px;
  margin-bottom: 36px;
  max-width: 70ch;
}

.sk-home .sec-head .kicker {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.sk-home .sec-head h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.sk-home .sec-head p {
  color: var(--ink-2);
  font-size: 17px;
}

.sk-home .sec-head a.more {
  justify-self: start;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
}

.sk-home .trust {
  padding-block: 22px 8px;
}

.sk-home .trust .row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  align-items: center;
  color: var(--ink-2);
  font-size: 14px;
}

.sk-home .trust .row b {
  color: var(--heading);
  font-weight: 600;
}

.sk-home .code-sec {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
}

.sk-home .code-sec ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.sk-home .code-sec li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--ink-2);
}

.sk-home .code-sec li b {
  color: var(--heading);
  font-weight: 600;
}

.sk-home .code-sec li svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  stroke: var(--orange-ink);
  fill: none;
  stroke-width: 2;
}

.sk-home .window {
  background: var(--code-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1c2940;
  box-shadow: 0 24px 48px -28px rgba(0, 22, 51, 0.6);
  min-width: 0;
}

.sk-home .window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid #1c2940;
}

.sk-home .window-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2a3a55;
  display: block;
}

.sk-home .window-bar span {
  margin-inline: auto;
  font: 13px var(--mono);
  color: #8796ad;
}

.sk-home .replay {
  font: 600 12px var(--display);
  color: #c3cedd;
  background: #16243a;
  border: 1px solid #2a3a55;
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  margin-left: -60px;
}

.sk-home .replay:hover {
  color: #fff;
  border-color: var(--orange);
}

.sk-home .window pre {
  margin: 0;
  padding: 20px 22px;
  font-family: var(--mono);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--code-ink);
  overflow-x: auto;
  min-height: 330px;
}

.sk-home .window .grp {
  display: block;
}

.sk-home .window .grp + .grp {
  margin-top: 1.6em;
}

.sk-home .cursor {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  background: var(--code-ink);
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
  margin-left: 1px;
}

@keyframes blink {
  50% { opacity: 0; }
}

.sk-home .tk-k {
  color: var(--tk-key);
}

.sk-home .tk-c {
  color: var(--tk-cls);
}

.sk-home .tk-s {
  color: var(--tk-str);
}

.sk-home .tk-n {
  color: var(--tk-num);
}

.sk-home .tk-m {
  color: var(--tk-com);
}

.sk-home .tk-f {
  color: var(--tk-fn);
}

.sk-home .tk-p {
  color: var(--tk-pun);
}

.sk-home .ticks {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.sk-home .ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--ink-2);
}

.sk-home .ticks li b {
  color: var(--heading);
  font-weight: 600;
}

.sk-home .ticks li svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  stroke: var(--orange-ink);
  fill: none;
  stroke-width: 2;
}

.sk-home .ticks code {
  font-size: 0.95em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 5px;
  color: var(--ink);
}

.sk-home .learn {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.sk-home .learn a {
  display: grid;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  color: var(--ink);
}

.sk-home .learn a:hover {
  text-decoration: none;
  border-color: var(--orange);
}

.sk-home .learn b {
  font-family: var(--display);
  font-weight: 600;
  color: var(--heading);
  font-size: 16.5px;
}

.sk-home .learn span {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.sk-home .backed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.sk-home .cite {
  display: grid;
  gap: 14px;
}

.sk-home .cite p {
  color: var(--ink-2);
}

.sk-home .cite pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  color: var(--ink);
  white-space: pre;
}

.sk-home details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.sk-home details summary {
  cursor: pointer;
  padding: 12px 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--heading);
}

.sk-home details .inner {
  padding: 0 16px 16px;
}

.sk-home .community {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sk-home .community a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 16px;
  color: var(--heading);
  background: var(--surface);
}

.sk-home .community a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sk-home .community a:hover {
  text-decoration: none;
}

/* Brand icons (from Material's bundled icon sets) in their brand colors.
   GitHub's brand color is near black, so it follows the heading color. */
.sk-home .ico {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}

.sk-home .ico svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.sk-home .community .sponsor .ico { color: #db61a2; }
.sk-home .community .github .ico { color: var(--heading); }
.sk-home .community .discord .ico { color: #5865f2; }
.sk-home .community .linkedin .ico { color: #0a66c2; }

.sk-home .community .sponsor:hover { border-color: #db61a2; background: rgba(219, 97, 162, 0.08); }
.sk-home .community .github:hover { border-color: var(--heading); }
.sk-home .community .discord:hover { border-color: #5865f2; background: rgba(88, 101, 242, 0.08); }
.sk-home .community .linkedin:hover { border-color: #0a66c2; background: rgba(10, 102, 194, 0.08); }

[data-md-color-scheme="slate"] .sk-home .community .linkedin .ico { color: #3f8fe0; }

/*
===============================
Stage: skforecast-ai specifics
===============================
*/

.sk-home .step .n em {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid #4a3a66;
  color: #c9b3e6;
  white-space: nowrap;
}

.sk-home .step.llm.on .n {
  color: var(--llm);
}

.sk-home .step.llm .bar {
  background: var(--llm);
}

.sk-home .side {
  min-height: 356px;
}

.sk-home .pane p.small code {
  font-size: 0.95em;
  color: var(--stage-ink);
}

.sk-home .pacf {
  display: grid;
  gap: 5px;
}

.sk-home .pacf-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
  font-size: 12.5px;
  color: var(--stage-muted);
  font-variant-numeric: tabular-nums;
}

.sk-home .pacf-row b {
  font-weight: 600;
  color: var(--stage-ink);
}

.sk-home .pacf-row .fill {
  height: 7px;
  border-radius: 4px;
  background: var(--orange);
  width: 0;
}

.sk-home .pacf-row.season b {
  color: var(--orange);
}

.sk-home .pacf-row span:last-child {
  text-align: right;
}

.sk-home .decisions {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  counter-reset: dec;
}

.sk-home .decisions li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0 8px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  counter-increment: dec;
}

.sk-home .decisions li::before {
  content: counter(dec);
  grid-row: span 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--stage-line);
  color: var(--orange);
  font: 600 11px/18px var(--display);
  text-align: center;
}

.sk-home .decisions li.in {
  opacity: 1;
  transform: none;
}

.sk-home .decisions b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  color: #fff;
}

.sk-home .decisions span {
  color: var(--stage-muted);
}

.sk-home .metrics {
  display: grid;
  gap: 10px;
}

.sk-home .metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 12px;
  border: 1px solid var(--stage-line);
  border-radius: 10px;
  padding: 10px 14px;
}

.sk-home .metric span {
  font: 600 12px var(--display);
  letter-spacing: 0.06em;
  color: var(--stage-muted);
}

.sk-home .metric b {
  font: 600 26px var(--display);
  color: #fff;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}

.sk-home .metric i {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 12.5px;
  color: var(--stage-muted);
}

.sk-home .metric.good i {
  color: #7fd6a2;
}

.sk-home .chat {
  display: grid;
  gap: 10px;
}

.sk-home .chat p {
  font-size: 13.5px;
  line-height: 1.5;
  border-radius: 12px;
  padding: 9px 12px;
}

.sk-home .chat .q {
  justify-self: end;
  max-width: 94%;
  background: #1c3052;
  color: var(--stage-ink);
  border-bottom-right-radius: 4px;
}

.sk-home .chat .a {
  background: rgba(181, 139, 224, 0.1);
  border: 1px solid #4a3a66;
  color: var(--stage-ink);
  border-bottom-left-radius: 4px;
  min-height: 3em;
}

.sk-home .chat .a::before {
  content: "ask()";
  display: block;
  font: 600 11px var(--mono);
  color: var(--llm);
  margin-bottom: 3px;
}

.sk-home .chat .a:empty::after,
.sk-home .chat .a.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--stage-ink);
  vertical-align: text-bottom;
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}

.sk-home .pane p.llm-note {
  border-left: 2px solid var(--llm);
  padding-left: 10px;
}

.sk-home .stage-code {
  position: relative;
  height: 150px;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.sk-home .stage-code.script pre {
  font-size: 13.5px;
  line-height: 1.5;
}

.sk-home .g-dot {
  fill: var(--fc);
}

.sk-home .g-fc {
  stroke: var(--fc);
}

.sk-home .g-band {
  fill: var(--fc);
  fill-opacity: 0.22;
}

.sk-home .g-arc {
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}

.sk-home .g-arcdot {
  fill: var(--orange);
}

.sk-home .g-arclab {
  fill: var(--orange);
  font: 600 12px var(--display);
  letter-spacing: 0.03em;
}

.sk-home .g-win {
  stroke: #c98a4b;
  stroke-width: 1.5;
  fill: none;
}

.sk-home .g-winlab {
  fill: var(--stage-muted);
  font: 600 11px var(--display);
  letter-spacing: 0.04em;
}

/*
===============================
Sections
===============================
*/

.sk-home .split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sk-home .side-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 12px;
  padding: 24px 26px;
  display: grid;
  gap: 10px;
  grid-template-rows: auto auto 1fr auto;
}

.sk-home .side-card.llm {
  border-top-color: var(--llm);
}

.sk-home .side-card .tagline {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.sk-home .side-card.llm .tagline {
  color: var(--llm-ink);
}

.sk-home .side-card h3 {
  font-size: 20px;
  font-weight: 600;
}

.sk-home .side-card .ticks {
  margin-top: 6px;
}

.sk-home .side-card.llm .ticks li svg {
  stroke: var(--llm-ink);
}

.sk-home .side-card .foot {
  font-size: 14.5px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 8px;
}

.sk-home .providers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 22px;
  font-size: 14px;
  color: var(--ink-2);
}

.sk-home .providers .lab {
  font-family: var(--display);
  font-weight: 600;
  color: var(--heading);
  margin-right: 4px;
}

.sk-home .providers span:not(.lab) {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 8px;
  color: var(--ink);
}

.sk-home .providers a {
  font-family: var(--display);
  font-weight: 600;
  margin-left: 6px;
}

.sk-home .code-sec p code,
.sk-home .ways h3 code {
  font-size: 0.95em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 5px;
  color: var(--ink);
}

.sk-home .window-bar .copy {
  color: #8796ad;
  width: 26px;
  height: 26px;
}

.sk-home .window-bar .copy:hover {
  color: #fff;
  border-color: #2a3a55;
}

.sk-home .window-bar .copy.copied {
  color: #4cc27d;
}

.sk-home .window pre {
  min-height: 0;
  height: 440px;
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.55;
}

.sk-home .code-sec.rev {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.sk-home .board-fig {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.sk-home .board {
  display: grid;
  gap: 14px;
}

.sk-home .board-head,
.sk-home .board-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 64px 56px;
  gap: 12px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.sk-home .board-head {
  font: 600 12px var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.sk-home .board-head span:nth-child(n+3),
.sk-home .board-row > span:nth-child(n+3) {
  text-align: right;
}

.sk-home .board-row .rank {
  font: 600 15px var(--display);
  color: var(--ink-2);
}

.sk-home .board-row .who {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sk-home .board-row .who b {
  font-family: var(--display);
  font-weight: 600;
  color: var(--heading);
}

/* No background track: the bar length is the error, so a track would read as
   a progress bar where the fuller bar looks better, which is the opposite. */
.sk-home .board-row .fill {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #9aabc3;
  width: 0;
  transition: width 0.9s ease;
  transition-delay: var(--d, 0s);
}

.sk-home .board-row.best .fill {
  background: var(--orange);
}

.sk-home .board-row.best .rank {
  color: var(--orange-ink);
}

/* The baseline is the reference the candidates are measured against, not a
   candidate: an outlined bar and a muted name. */
.sk-home .board-row.base .who b {
  font-weight: 500;
  color: var(--ink-2);
}

.sk-home .board-row.base .fill {
  background: transparent;
  border: 1.5px dashed #9aabc3;
  box-sizing: border-box;
}

.sk-home .board.go .fill {
  width: var(--w, 0%);
}

.sk-home .board-fig figcaption {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

.sk-home .board-fig figcaption code {
  font-size: 0.95em;
}

.sk-home .ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sk-home .way {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  display: grid;
  gap: 12px;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
}

.sk-home .way .tagline {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.sk-home .way h3 {
  font-size: 18px;
  font-weight: 600;
}

.sk-home .snip {
  margin: 0;
  background: var(--code-bg);
  color: var(--code-ink);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  align-self: start;
}

.sk-home .snip code {
  font-family: inherit;
}

.sk-home .way a.more {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
}

/* Two links in one card share a row, so the card keeps the rows of its
   neighbours and their texts stay aligned. */
.sk-home .way .more-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.sk-home .learn span code {
  font-size: 0.95em;
}

.sk-home .family {
  display: grid;
  gap: 14px;
}

.sk-home .family a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  color: var(--ink);
}

.sk-home .family a:hover {
  text-decoration: none;
  border-color: var(--orange);
}

.sk-home .family b {
  font-family: var(--display);
  font-weight: 600;
  color: var(--heading);
  font-size: 16.5px;
}

.sk-home .family .fam-text {
  display: grid;
  gap: 4px;
}

.sk-home .family .fam-text > span {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* The skforecast logo: navy on light, white on dark. Skforecast Studio has no
   logo of its own (it uses the skforecast one), so its card shows an icon. */
.sk-home .fam-logo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}

.sk-home .fam-logo img {
  width: 48px;
  height: 48px;
}

.sk-home .fam-logo .on-dark,
[data-md-color-scheme="slate"] .sk-home .fam-logo .on-light {
  display: none;
}

[data-md-color-scheme="slate"] .sk-home .fam-logo .on-dark {
  display: block;
}

.sk-home .fam-icon {
  border-radius: 12px;
  background: rgba(247, 153, 57, 0.12);
}

.sk-home .fam-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--orange);
}

/*
===============================
ask() section: example answers in tabs, and the other LLM methods
===============================
The window with the answers is shared with the "Ask the assistant" page:
partials/ask-window.html, styled in extra.css (.sk-ask).
*/

.sk-home .sec-head .kicker.llm {
  color: var(--llm-ink);
}

.sk-home .ask-sec li svg {
  stroke: var(--llm-ink);
}

.sk-home .ask-fig {
  margin: 0;
  min-width: 0;
}

.sk-home .ask-fig figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.sk-home .ask-fig figcaption code {
  font-size: 0.95em;
}

.sk-home .ways.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 48px;
}

/* Four entry points read better as two rows of two than as four narrow
   columns, where every snippet would scroll. */
.sk-home .ways.pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sk-home .way.llm .tagline {
  color: var(--llm-ink);
}

.sk-home .way p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.sk-home .way p code {
  font-size: 0.95em;
}

@media (max-width: 1020px) {
  .sk-home .ways.two {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }

  .sk-home .ways.pairs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
===============================
Team (component in partials/team.html, base styles in extra.css)
===============================
*/

.sk-home .team {
  margin-top: 56px;
}

.sk-home .team-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
}

.sk-home .team-head h3 {
  font-size: 20px;
  font-weight: 600;
}

.sk-home .team-head a {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 600;
}

/* On the home page the two cards line up with the two columns above them
   (same grid and gap as .backed) and are larger than on the More pages. */
.sk-home .sk-team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin: 20px 0 0;
}

.sk-home .sk-person {
  max-width: none;
  gap: 22px;
  padding: 22px 24px;
  background: var(--surface);
  border-color: var(--line);
}

.sk-home .sk-person__photo {
  width: 88px;
  height: 88px;
}

.sk-home .sk-person__name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--heading);
}

.sk-home .sk-person__role {
  font-size: 14.5px;
}

.sk-home .sk-person__links {
  margin-top: 10px;
}

@media (max-width: 1020px) {
  .sk-home .sk-team {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .sk-home .sk-person {
    padding: 18px;
    gap: 16px;
  }

  .sk-home .sk-person__photo {
    width: 64px;
    height: 64px;
  }
}


/*
===============================
Responsive and reduced motion
===============================
*/

@media (max-width: 1020px) {
  .sk-home .learn {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sk-home .ways {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-home .code-sec,
  .sk-home .code-sec.rev,
  .sk-home .backed {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* On one column the leaderboard follows its text */
  .sk-home .code-sec.rev .board-fig {
    order: 2;
  }

  .sk-home .stage-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-home .side {
    border-left: 0;
    border-top: 1px solid var(--stage-line);
    min-height: 0;
    padding: 16px 18px;
  }

  /* Below the chart the panes stack in one cell, so the panel takes the height
     of the tallest one: lay them out in two columns to keep them short. */
  .sk-home #pane-0 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
  }

  .sk-home #pane-0 h3 {
    grid-column: 1 / -1;
  }

  .sk-home #pane-0 .facts {
    grid-row: span 2;
  }

  .sk-home .decisions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }

  .sk-home .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sk-home .container {
    padding-inline: 16px;
  }

  .sk-home .hero {
    padding-block: 32px 18px;
  }

  .sk-home .split,
  .sk-home .learn {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-home .step {
    padding: 12px 8px 10px;
  }

  .sk-home .step .n {
    font-size: 11px;
  }

  .sk-home .step .n em {
    display: none;
  }

  .sk-home .step .t {
    font-size: 13px;
  }

  .sk-home .play {
    width: 40px;
  }

  .sk-home #pane-0 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-home .decisions {
    grid-template-columns: minmax(0, 1fr);
  }

  .sk-home .stage-code pre,
  .sk-home .stage-code.script pre {
    font-size: 12.5px;
  }

  .sk-home .window pre {
    height: 360px;
    font-size: 12.5px;
    padding: 16px;
  }

  .sk-home .side-card {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-home .cursor,
  .sk-home .chat .a.typing::after {
    animation: none;
  }

  .sk-home .pane,
  .sk-home .decisions li,
  .sk-home .stage-code pre,
  .sk-home .board-row .fill {
    transition: none;
  }
}

/*
===============================
Legal notice
===============================
*/

.sk-home .legal {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: none;
}