/* loopl — tiny-flame palette · design tokens
   ------------------------------------------------------------------ */
:root {
  --loopl-flame: #ff6a1f;        /* brand gradient start (App/Resources/brand) is #FF7A22 */
  --loopl-flame-2: #ffc244;      /* brand gradient end */
  --loopl-flame-soft: rgba(255, 90, 31, .12);
  --loopl-ink: #0f0f12;
  --loopl-radius: 1rem;
  --loopl-radius-sm: .6rem;
  --loopl-border: 1px solid rgba(128, 128, 128, .22);

  --md-primary-fg-color: #ff5a1f;
  --md-primary-fg-color--light: #ff7a45;
  --md-primary-fg-color--dark: #d9440f;
  --md-accent-fg-color: #e0501a;
  --md-accent-fg-color--transparent: rgba(255, 90, 31, .1);
  --md-typeset-a-color: #d9440f;
}

/* ---- dark (slate): near-black ink, warm accent ---- */
[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-primary-fg-color: #0f0f12;
  --md-primary-fg-color--light: #1a1a20;
  --md-primary-fg-color--dark: #0a0a0c;
  --md-accent-fg-color: #ff7a45;
  --md-typeset-a-color: #ff8a5c;
  --md-default-bg-color: #0f0f12;
  --md-default-fg-color: rgba(255, 255, 255, .86);
  --md-default-fg-color--light: rgba(255, 255, 255, .62);
  --md-default-fg-color--lighter: rgba(255, 255, 255, .34);
  --md-default-fg-color--lightest: rgba(255, 255, 255, .12);
  --md-code-bg-color: #16161c;
  --md-code-fg-color: #e8e8ee;
  --md-footer-bg-color: #0a0a0c;
  --md-footer-bg-color--dark: #070708;
  --md-typeset-table-color: rgba(255, 255, 255, .1);
  --loopl-border: 1px solid rgba(255, 255, 255, .1);
  --loopl-flame-soft: rgba(255, 90, 31, .16);
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(15, 15, 18, .82);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ---- light (default): white chrome, flame accents, readable ink ---- */
[data-md-color-scheme="default"] {
  --md-default-fg-color: #1a1a20;
  --md-code-bg-color: #f6f5f4;
  --md-typeset-a-color: #d9440f;
}
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
  background: rgba(255, 255, 255, .86);
  color: #1a1a20;
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
[data-md-color-scheme="default"] .md-tabs__link { color: #1a1a20; opacity: .72; }
[data-md-color-scheme="default"] .md-tabs__link--active,
[data-md-color-scheme="default"] .md-tabs__link:hover { color: var(--loopl-flame); opacity: 1; }
[data-md-color-scheme="default"] .md-search__form { background: rgba(0, 0, 0, .05); }
[data-md-color-scheme="default"] .md-search__form:hover { background: rgba(0, 0, 0, .08); }
[data-md-color-scheme="default"] .md-search__input::placeholder,
[data-md-color-scheme="default"] .md-search__input { color: #1a1a20; }
[data-md-color-scheme="default"] .md-search__icon svg,
[data-md-color-scheme="default"] .md-header__button svg { fill: #1a1a20; }
[data-md-color-scheme="default"] .md-header__topic { color: #1a1a20; }
.md-header--shadow { box-shadow: 0 0 .2rem rgba(0,0,0,.08), 0 .2rem .4rem rgba(0,0,0,.08); }

/* active tab underline (both schemes) */
.md-tabs__link { font-size: .7rem; letter-spacing: .01em; }
.md-tabs__link--active { position: relative; font-weight: 600; }
.md-tabs__link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.55rem; height: 2px;
  background: linear-gradient(90deg, var(--loopl-flame), var(--loopl-flame-2)); border-radius: 2px;
}

/* ---- typography ---- */
.md-typeset { font-size: .8rem; line-height: 1.65; }
.md-typeset h1 { font-weight: 800; letter-spacing: -.02em; color: inherit; }
.md-typeset h2 { font-weight: 700; letter-spacing: -.015em; margin-top: 2.2em; }
.md-typeset h3 { font-weight: 650; letter-spacing: -.01em; }
.md-typeset h1 code, .md-typeset h2 code, .md-typeset h3 code { font-weight: 600; }
.md-typeset code { border-radius: .3rem; font-size: .85em; padding: .1em .35em; }
.md-typeset pre > code { font-size: .74rem; line-height: 1.6; padding: 1rem 1.1rem; }
.md-typeset .highlight { border-radius: var(--loopl-radius-sm); overflow: hidden; }
.md-typeset .highlight span.filename {
  font-family: var(--md-code-font-family); font-size: .7rem; letter-spacing: .02em;
}
.md-typeset a { text-underline-offset: .15em; }
.md-typeset a:hover { color: var(--loopl-flame); }
.md-typeset hr { border-bottom: var(--loopl-border); }
.md-typeset table:not([class]) { font-size: .72rem; border-radius: var(--loopl-radius-sm); border: var(--loopl-border); }
.md-typeset table:not([class]) th { background: var(--loopl-flame-soft); font-weight: 650; }
.md-typeset kbd { border-radius: .3rem; }

/* ---- admonitions: one accent per semantic, rounded, quiet backgrounds ---- */
.md-typeset .admonition, .md-typeset details {
  border-width: 0 0 0 3px; border-radius: var(--loopl-radius-sm); font-size: .74rem;
  box-shadow: none; background: var(--loopl-flame-soft);
  border-left-color: var(--loopl-flame);
}
.md-typeset .admonition > .admonition-title, .md-typeset details > summary {
  font-weight: 650; background: transparent; border-radius: 0;
}
.md-typeset .admonition > .admonition-title::before, .md-typeset details > summary::before { background-color: var(--loopl-flame); }
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.info, .md-typeset details.info { border-left-color: #6b8afd; background: rgba(107, 138, 253, .1); }
.md-typeset .note > .admonition-title::before, .md-typeset .info > .admonition-title::before,
.md-typeset details.note > summary::before, .md-typeset details.info > summary::before { background-color: #6b8afd; }
.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.success, .md-typeset details.success { border-left-color: #2fbf71; background: rgba(47, 191, 113, .1); }
.md-typeset .tip > .admonition-title::before, .md-typeset .success > .admonition-title::before,
.md-typeset details.tip > summary::before, .md-typeset details.success > summary::before { background-color: #2fbf71; }
.md-typeset .admonition.warning, .md-typeset details.warning { border-left-color: #f5a524; background: rgba(245, 165, 36, .12); }
.md-typeset .warning > .admonition-title::before, .md-typeset details.warning > summary::before { background-color: #f5a524; }
.md-typeset .admonition.danger, .md-typeset .admonition.failure, .md-typeset details.danger { border-left-color: #ef4444; background: rgba(239, 68, 68, .1); }
.md-typeset .danger > .admonition-title::before, .md-typeset .failure > .admonition-title::before { background-color: #ef4444; }
.md-typeset .admonition.question, .md-typeset details.question { border-left-color: rgba(128,128,128,.6); background: rgba(128,128,128,.08); }
.md-typeset .question > .admonition-title::before, .md-typeset details.question > summary::before { background-color: rgba(128,128,128,.9); }
/* custom type: strands — used on the mapping / comparison pages */
.md-typeset .admonition.strands, .md-typeset details.strands { border-left-color: #8b5cf6; background: rgba(139, 92, 246, .1); }
.md-typeset .strands > .admonition-title::before, .md-typeset details.strands > summary::before {
  background-color: #8b5cf6;
  -webkit-mask-image: var(--md-admonition-icon--abstract); mask-image: var(--md-admonition-icon--abstract);
}

/* ---- landing hero ---- */
.loopl-home .md-content__inner { padding-top: 0; }
.loopl-home > h1:first-child, .loopl-home .md-content__inner > h1:first-child { display: none; }
.loopl-home .md-content__inner::before { display: none; }
.loopl-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3rem; align-items: center;
  padding: 4rem 0 2.5rem; position: relative;
}
.loopl-hero::before {
  content: ""; position: absolute; inset: -6rem -40vw 0 -40vw; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 20% 10%, rgba(255, 90, 31, .18), transparent 70%),
    radial-gradient(45% 45% at 85% 40%, rgba(255, 179, 71, .12), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent);
}
@media (max-width: 60em) { .loopl-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2rem; } }
.loopl-home { overflow-x: clip; }
.loopl-hero > div { min-width: 0; }
.loopl-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  color: var(--loopl-flame);
  border: 1px solid rgba(255, 90, 31, .4); border-radius: 999px; padding: .3rem .8rem;
  background: var(--loopl-flame-soft);
}
.loopl-hero__eyebrow .twemoji svg { fill: var(--loopl-flame); }
.loopl-hero h1.loopl-hero__title, .md-typeset h1.loopl-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.04; font-weight: 800; margin: 1.1rem 0 .9rem;
  letter-spacing: -.03em; display: block; color: inherit;
}
.loopl-hero__title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--loopl-flame), var(--loopl-flame-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loopl-hero__lead { font-size: 1.02rem; line-height: 1.55; opacity: .82; max-width: 32rem; }
.loopl-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; align-items: center; }
.loopl-btn, .md-typeset .loopl-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; border-radius: var(--loopl-radius-sm); font-weight: 600; font-size: .78rem;
  text-decoration: none !important; border: 1px solid transparent;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.loopl-btn:hover { transform: translateY(-1px); }
.loopl-btn--primary { background: linear-gradient(90deg, var(--loopl-flame), #ff7a45); color: #fff !important; box-shadow: 0 6px 20px rgba(255, 90, 31, .25); }
.loopl-btn--primary:hover { box-shadow: 0 10px 28px rgba(255, 90, 31, .35); }
.loopl-btn--ghost { border-color: rgba(128,128,128,.35); color: inherit !important; }
.loopl-btn--ghost:hover { border-color: var(--loopl-flame); color: var(--loopl-flame) !important; }
.loopl-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #000; color: #fff !important; border-radius: var(--loopl-radius-sm); padding: .45rem .9rem;
  text-decoration: none !important; border: 1px solid #333; line-height: 1.1;
}
.loopl-badge .twemoji svg { fill: #fff; width: 1.2rem; height: 1.2rem; }
.loopl-badge small { display: block; font-size: .58rem; opacity: .8; }
.loopl-badge b { font-size: .92rem; }

/* hero code: window chrome + glow */
.loopl-hero__code { position: relative; min-width: 0; }
.loopl-hero__code pre > code { overflow-x: auto; }
.loopl-hero__code::before {
  content: ""; position: absolute; inset: -30px; z-index: -1; filter: blur(60px);
  background: radial-gradient(circle at 30% 30%, rgba(255,90,31,.32), transparent 60%);
}
.loopl-hero__code .highlight {
  margin: 0; border-radius: var(--loopl-radius); box-shadow: 0 24px 70px rgba(0,0,0,.35);
  border: var(--loopl-border);
}
.loopl-hero__code .highlight::before {
  content: ""; display: block; height: 2rem; background: var(--md-code-bg-color);
  background-image: radial-gradient(circle, #ff5f57 5px, transparent 6px), radial-gradient(circle, #febc2e 5px, transparent 6px), radial-gradient(circle, #28c840 5px, transparent 6px);
  background-size: 1.2rem 1.2rem; background-repeat: no-repeat; background-position: .9rem .4rem, 2.1rem .4rem, 3.3rem .4rem;
  border-bottom: 1px solid rgba(128,128,128,.12);
}
.loopl-hero__code .highlight pre { margin: 0; border-radius: 0; }
.loopl-hero__code pre > code { font-size: .68rem; }
@media (max-width: 60em) {
  .loopl-hero__code pre > code { font-size: .62rem; }
  .loopl-hero__lead { font-size: .92rem; }
}

/* ---- value cards ---- */
.loopl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media (max-width: 60em) { .loopl-cards { grid-template-columns: minmax(0, 1fr); } }
.loopl-card {
  border: var(--loopl-border); border-radius: var(--loopl-radius); padding: 1.3rem 1.3rem 1.2rem;
  background: linear-gradient(180deg, var(--loopl-flame-soft), transparent 60%);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.loopl-card:hover { transform: translateY(-2px); border-color: rgba(255, 90, 31, .45); box-shadow: 0 14px 40px rgba(0,0,0,.12); }
.loopl-card h3 { margin: .35rem 0 .5rem; font-size: 1.02rem; }
.loopl-card .twemoji svg { width: 1.7rem; height: 1.7rem; fill: var(--loopl-flame); }
.loopl-card p { margin: 0 0 .5rem; opacity: .85; font-size: .78rem; }
.loopl-card p:last-child { margin: .4rem 0 0; font-weight: 600; font-size: .76rem; }
.loopl-card ul { margin: .4rem 0 0; font-size: .76rem; }

.loopl-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center;
  font-size: .7rem; opacity: .78; margin: 0 0 2rem; padding: .9rem 1rem;
  border-top: var(--loopl-border); border-bottom: var(--loopl-border);
}
.loopl-strip .twemoji svg { fill: var(--loopl-flame); vertical-align: -.2em; }
.loopl-strip > p { display: contents; margin: 0; }
.loopl-strip span { white-space: nowrap; }
.md-typeset .loopl-section-title { text-align: center; margin-top: 2.8rem; }
.loopl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 60em) { .loopl-compare { grid-template-columns: minmax(0, 1fr); } }
.md-typeset .loopl-models-table td:nth-child(n+3) { white-space: nowrap; }

/* ---- steps (getting started) ---- */
.md-typeset .loopl-steps { counter-reset: step; list-style: none; padding-left: 0; }
.md-typeset .loopl-steps > li { position: relative; padding-left: 2.6rem; margin: 1rem 0; }
.md-typeset .loopl-steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; border-radius: 999px;
  display: grid; place-items: center; font-weight: 700; font-size: .75rem; color: #fff;
  background: linear-gradient(135deg, var(--loopl-flame), var(--loopl-flame-2));
}

/* ---- 404 ---- */
.loopl-404 { text-align: center; padding: 4rem 1rem 3rem; }
.loopl-404 h1 { font-size: clamp(3rem, 10vw, 6rem); font-weight: 800; letter-spacing: -.04em; margin: 0;
  background: linear-gradient(90deg, var(--loopl-flame), var(--loopl-flame-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.loopl-404 p { opacity: .8; max-width: 30rem; margin: .75rem auto 1.5rem; }
.loopl-404 .loopl-hero__cta { justify-content: center; }

/* ---- footer ---- */
.md-footer-meta { font-size: .68rem; }
.md-copyright { opacity: .8; }

/* ---- mermaid diagrams ---- */
.md-typeset .mermaid { display: flex; justify-content: center; margin: 1.5rem 0; }

/* ---- mobile ---- */
@media (max-width: 44.9375em) {
  .md-typeset { font-size: .78rem; }
  .loopl-hero { padding-top: 1.25rem; }
  .loopl-hero__cta { gap: .5rem; }
  .loopl-btn, .md-typeset .loopl-btn { padding: .6rem .9rem; font-size: .74rem; }
  .loopl-card { padding: 1.1rem; }
  .md-typeset table:not([class]) { display: block; overflow-x: auto; }
}

/* ---- app screenshot gallery ---- */
.loopl-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1.5rem 0 2rem; }
@media (max-width: 60em) { .loopl-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.md-typeset .loopl-shots figure { margin: 0; }
.md-typeset .loopl-shots img { border-radius: 1.4rem; border: var(--loopl-border); box-shadow: 0 18px 50px rgba(0,0,0,.25); width: 100%; }
.md-typeset .loopl-shots figcaption { font-size: .7rem; opacity: .75; margin-top: .6rem; }