/* eyesclosed web — components. Load after tokens.css. Every value is a token.
   One left-aligned column of light, near-white text on a near-black page,
   with a Stage beside it on desktops showing the product itself. Open Sans; Fira Code only for code.
   Two weights only: 400 and 500. */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..500;1,400..500&family=Fira+Code:wght@400..500&display=swap");

/* ── base: put .ec on <body> ─────────────────────────────────────────── */
.ec {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
  font-family: var(--font-sans);
  /* Fluid like the page: 16px on a phone, 18px at 1024, 20px at 1440 and up. */
  font-size: clamp(16px, 0.48vw + 13px, 20px); line-height: 1.55; font-weight: 400; letter-spacing: -0.005em;
  /* The stage's width on desktops: everything to the right of the text column. */
  --ec-stage-w: max(30vw, calc(100vw - 2 * var(--space-16) - 2 * var(--inset-stage) - var(--width-text)));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ec ::selection { background: var(--shade); color: var(--fg); }
.ec :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
/* Zero specificity, so every component's own spacing and weights win. */
:where(.ec) :where(h1, h2, h3, p, figure) { margin: 0; }
:where(.ec) :where(h1, h2, h3) { font-size: inherit; line-height: inherit; font-weight: 500; }
.ec code { font-family: var(--font-mono); font-size: 0.85em; letter-spacing: 0; color: var(--fg); }
.ec img, .ec video { max-width: 100%; height: auto; }
.ec strong { font-weight: 500; color: var(--fg); }

/* ── Page: the whole window ─────────────────────────────────────────
   Text runs in a left-aligned column; on desktops the Stage fills everything
   to its right with the product itself. */
.ec-page { box-sizing: border-box; width: 100%; padding: 0 var(--space-6); }
@media (min-width: 640px) { .ec-page { padding-inline: var(--space-10); } }
@media (min-width: 1024px) { .ec-page { padding-inline: var(--space-16); } }
.ec-page > * { max-width: var(--width-text); }

/* ── Stage: the product, pinned beside the text ──────────────────────
   Each section may hold one .ec-scene. Inline by default (phones, tablets,
   no JavaScript); once the script adds .ec-staged to the root, desktops pin
   the active scene into a frame filling the window's right side. */
.ec-scene {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: var(--space-6); border-radius: var(--radius-md); background: var(--lid); overflow: hidden;
}
.ec-stage { display: none; }
.ec-hero .ec-scene { margin-top: var(--space-10); }
@media (min-width: 1024px) {
  .ec-staged .ec-page { padding-right: calc(var(--ec-stage-w) + var(--space-16)); }
  .ec-staged .ec-stage {
    display: block; position: fixed; top: var(--inset-stage); right: var(--inset-stage); bottom: var(--inset-stage);
    width: var(--ec-stage-w); border-radius: var(--radius-md); background: var(--lid);
  }
  .ec-staged .ec-scene {
    position: fixed; top: var(--inset-stage); right: var(--inset-stage); bottom: var(--inset-stage);
    width: var(--ec-stage-w); max-width: none; margin: 0; padding: var(--space-10); background: transparent;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;
  }
  .ec-staged .ec-scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.3s; }
}

/* ── SiteHeader ──────────────────────────────────────────────────────── */
.ec-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); padding-top: var(--space-10); }
@media (min-width: 1024px) { .ec-header { padding-top: var(--space-14); } }
.ec-brand { display: inline-flex; align-items: center; gap: var(--space-2); margin-right: var(--space-4); color: var(--fg); text-decoration: none; font-weight: 500; }
.ec-brand img, .ec-brand svg { width: 22px; height: 22px; display: block; align-self: center; }
.ec-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.ec-nav a { color: var(--fg-muted); text-decoration: none; transition: color 0.2s; }
.ec-nav a:hover, .ec-nav a[aria-current="page"] { color: var(--fg); }

/* ── Hero: one statement ─────────────────────────────────────────────── */
.ec-hero { margin: 160px 0 120px; }
@media (min-width: 1024px) { .ec-hero { margin: var(--space-70) 0 var(--space-50); } }
.ec-hero h1 { font-size: clamp(24px, 0.6vw + 21px, 30px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
.ec-hero h1 .ec-quiet { color: var(--fg-muted); }
.ec-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-10); }
.ec-hero .ec-code { margin-top: var(--space-6); }

/* ── Section: a muted label, then text ───────────────────────────────── */
.ec-section { margin: var(--space-14) 0; display: flex; flex-direction: column; gap: var(--space-6); }
.ec-label { color: var(--fg-muted); font-weight: 400; }
.ec-section > h2:not(.ec-label), .ec-section > h3 { font-weight: 500; color: var(--fg); }
.ec-section > h2:not(.ec-label) + p, .ec-section > h3 + p { margin-top: calc(var(--space-2) - var(--space-6)); }
.ec-section p { text-wrap: pretty; }

/* ── Link ────────────────────────────────────────────────────────────── */
.ec-link, .ec-section p a, .ec-prose a {
  color: var(--fg);
  text-decoration: underline; text-decoration-color: var(--fg-muted);
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.ec-link:hover, .ec-section p a:hover, .ec-prose a:hover { color: var(--fg); text-decoration-color: var(--fg); }
.ec-link--plain { text-decoration: none; }
.ec-link--plain:hover { text-decoration: underline; }

/* ── Button ──────────────────────────────────────────────────────────── */
.ec-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-6);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  background: transparent; color: var(--fg);
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: opacity 0.2s;
}
/* Hover fades the whole button; its color, fill and border never change. */
.ec-btn:hover { opacity: 0.7; }
.ec-btn--primary { background: var(--fg); color: var(--bg); }
.ec-btn--outline { border-color: var(--lid); }
.ec-btn:disabled, .ec-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ── Callout: one rounded line that points somewhere ─────────────────── */
.ec-callout {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
  border: 1px solid var(--lid); border-radius: var(--radius-lg);
  color: var(--fg); text-decoration: none; transition: border-color 0.2s;
}
.ec-callout:hover { border-color: var(--shade); }
.ec-callout img, .ec-callout svg { width: 56px; height: 56px; flex: none; border-radius: var(--radius-md); }
.ec-callout-text { flex: 1 1 auto; min-width: 0; }
.ec-callout-action { flex: none; color: var(--fg); font-weight: 500; }
.ec-callout-text { color: var(--fg-muted); }
@media (max-width: 560px) {
  .ec-callout { flex-wrap: wrap; row-gap: var(--space-1); }
  .ec-callout-text { flex-basis: calc(100% - 56px - var(--space-4)); }
  .ec-callout-action { flex-basis: 100%; }
  .ec-callout:has(> img, > svg) .ec-callout-action { padding-left: calc(56px + var(--space-4)); }
}

/* ── Steps: a short numbered list ────────────────────────────────────── */
.ec-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: ec-step; }
.ec-steps li { display: flex; gap: var(--space-4); counter-increment: ec-step; }
.ec-steps li::before { content: counter(ec-step); min-width: 1ch; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* ── EntryList ───────────────────────────────────────────────────────── */
.ec-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.ec-entry { display: flex; flex-direction: column; }
.ec-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.ec-entry-title { font-weight: 500; color: var(--fg); text-decoration: none; text-underline-offset: 4px; }
a.ec-entry-title:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.ec-entry-meta { flex: none; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.ec-entry-desc { color: var(--fg); }
.ec-entries--media { gap: var(--space-10); }
.ec-entries--media .ec-entry { flex-direction: row; gap: var(--space-6); }
.ec .ec-entry-media { flex: none; width: 128px; height: 128px; object-fit: cover; border-radius: var(--radius-sm); background: var(--lid); }
.ec-entries--media .ec-entry-desc { font-size: 15px; line-height: 24px; letter-spacing: 0; margin-top: var(--space-1); }
@media (max-width: 560px) { .ec-entries--media .ec-entry { flex-direction: column; gap: var(--space-4); } }

/* ── Figure ──────────────────────────────────────────────────────────── */
.ec-figure { display: flex; flex-direction: column; gap: var(--space-2); }
.ec-figure > img, .ec-figure > video, .ec-figure > svg { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--lid); }
.ec-figure figcaption { font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--fg-muted); }

/* ── CodeBlock (the only mono) ───────────────────────────────────────── */
.ec-code {
  position: relative; border-radius: var(--radius-sm); background: var(--lid); color: var(--fg);
  font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: 0;
}
.ec-code pre { margin: 0; padding: var(--space-4) calc(var(--space-4) + 28px) var(--space-4) var(--space-4); overflow-x: auto; scrollbar-width: thin; }
.ec-code code { font-size: inherit; color: inherit; }
.ec-code-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 6px var(--space-2) 0 var(--space-4); font-size: 13px; line-height: 28px; color: var(--fg-muted); }
.ec-code-caption ~ pre { padding-top: var(--space-1); padding-right: var(--space-4); }
.ec-copy { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--fg-muted); cursor: pointer; transition: color 0.2s, background 0.2s; }
.ec-copy:hover { color: var(--fg); background: var(--shade); }
.ec-copy svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ec-code > .ec-copy { position: absolute; top: 13px; right: var(--space-2); }
.ec-code .prompt { color: var(--haze); user-select: none; }

/* syntax — eyesclosed by brightness alone: fg, ash, haze; weight and italic do the rest */
.tok-keyword { color: var(--fg); font-weight: 500; }
.tok-function, .tok-type, .tok-constant, .tok-variable { color: var(--fg); }
.tok-escape { color: var(--fg); font-weight: 500; }
.tok-macro, .tok-label, .tok-self { color: var(--fg); font-style: italic; }
.tok-string, .tok-member, .tok-namespace, .tok-operator, .tok-builtin, .tok-attribute { color: var(--ash); }
.tok-doc { color: var(--ash); font-style: italic; }
.tok-comment { color: var(--haze); font-style: italic; }
.tok-punct { color: var(--haze); }

/* ── Kbd ─────────────────────────────────────────────────────────────── */
.ec-kbd, .ec-prose kbd {
  display: inline-block; min-width: 1.5em; box-sizing: border-box; text-align: center;
  font-family: var(--font-sans); font-size: 0.8em; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--fg);
  background: var(--lid); border-radius: var(--radius-sm); padding: 0 0.4em;
}

/* ── Prose ───────────────────────────────────────────────────────────── */
.ec-prose { max-width: var(--width-text); }
.ec-prose > * + * { margin-top: var(--space-6); }
.ec-prose h1 { font-size: clamp(24px, 0.6vw + 21px, 30px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--fg); }
.ec-prose h1 + p { color: var(--fg-muted); margin-top: var(--space-2); }
.ec-prose h2 { margin-top: var(--space-14); color: var(--fg-muted); font-weight: 400; }
.ec-prose h3 { margin-top: var(--space-10); color: var(--fg); font-weight: 500; }
.ec-prose h2 + *, .ec-prose h3 + * { margin-top: var(--space-2); }
.ec-prose h2 + h3 { margin-top: var(--space-6); }
.ec-prose ul, .ec-prose ol { padding-left: 1.25em; }
.ec-prose li + li { margin-top: var(--space-2); }
.ec-prose li::marker { color: var(--fg-muted); }
.ec-prose img { display: block; border-radius: var(--radius-md); }
.ec-prose hr { border: 0; height: var(--space-6); margin: 0; }

/* ── Note (also every blockquote in prose) ───────────────────────────── */
.ec-note, .ec-prose blockquote {
  margin: 0; padding: var(--space-4) var(--space-6);
  background: var(--lid); border-radius: var(--radius-sm);
  font-size: 15px; line-height: 24px; letter-spacing: 0; color: var(--fg);
}
.ec-note::before, .ec-prose blockquote::before { content: "Note"; display: block; color: var(--fg); font-weight: 500; }
.ec-note--warning::before { content: "Warning"; color: var(--fg); }
.ec-note p + p, .ec-prose blockquote p + p { margin-top: var(--space-2); }

/* ── Table ───────────────────────────────────────────────────────────── */
.ec-table-wrap { overflow-x: auto; }
.ec-table, .ec-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; letter-spacing: 0; }
.ec-table th, .ec-prose th { text-align: left; font-weight: 400; color: var(--fg-muted); padding: 0 var(--space-6) var(--space-2) 0; }
.ec-table td, .ec-prose td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-6) var(--space-2) 0; border-top: 1px solid var(--lid); }
.ec-table .num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

/* ── DocsLayout: full screen ─────────────────────────────────────────
   The index is pinned to the window's left edge at full height and the page
   follows it, left-aligned. On phones the index becomes a full-screen menu. */
.ec-docs { --ec-side-x: var(--space-16); }
.ec-docs-side {
  position: fixed; top: 0; bottom: 0; left: var(--ec-side-x); width: var(--width-sidebar);
  box-sizing: border-box; padding: var(--space-14) 0 var(--space-10);
  display: flex; flex-direction: column; gap: var(--space-10);
  overflow-y: auto; scrollbar-width: none;
  font-size: 15px; line-height: 24px; letter-spacing: 0;
}
.ec-docs-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg); text-decoration: none; font-weight: 500; }
.ec-docs-brand img, .ec-docs-brand svg { width: 40px; height: 40px; display: block; border-radius: var(--radius-sm); }
.ec-docs-nav { display: flex; flex-direction: column; gap: var(--space-6); }
.ec-sidebar-group { display: flex; flex-direction: column; gap: var(--space-1); }
/* Group labels read like code comments: italic haze (3.8:1, below 4.5 by choice; the links carry the meaning). */
.ec-sidebar-label { color: var(--haze); font-style: italic; margin-bottom: var(--space-2); }
.ec-docs-nav a, .ec-docs-side-foot a { color: var(--fg-muted); text-decoration: none; transition: color 0.2s; }
.ec-docs-nav a:hover, .ec-docs-side-foot a:hover, .ec-docs-nav a[aria-current="page"] { color: var(--fg); }
.ec-docs-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-1); }
.ec-docs-main {
  box-sizing: border-box; max-width: calc(var(--width-text) + 2 * var(--space-6));
  margin-left: calc(var(--ec-side-x) + var(--width-sidebar) + var(--space-16) - var(--space-6));
  padding: var(--space-14) var(--space-6) var(--space-28);
}
.ec-pagenav { display: flex; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-28); }
.ec-pagenav a { display: flex; flex-direction: column; color: var(--fg); text-decoration: none; }
.ec-pagenav a span { color: var(--fg-muted); }
.ec-pagenav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ec-pagenav a[rel="next"] { margin-left: auto; text-align: right; }

/* The bar and menu button exist only on phones. */
.ec-docs-bar { display: none; }
.ec-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: calc(-1 * var(--space-2)); padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--fg); cursor: pointer;
}
.ec-menu-btn svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.ec-menu-btn .ec-menu-close, .ec-menu-btn[aria-expanded="true"] .ec-menu-open { display: none; }
.ec-menu-btn[aria-expanded="true"] .ec-menu-close { display: block; }

@media (max-width: 960px) {
  .ec-docs-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: relative; z-index: 2; height: 96px; padding: 0 var(--space-6); box-sizing: border-box;
  }
  .ec-docs-side {
    left: 0; right: 0; top: 96px; width: auto; z-index: 1;
    padding: var(--space-4) var(--space-6) var(--space-10); background: var(--bg);
    font-size: 22px; line-height: 30px; letter-spacing: -0.01em; gap: var(--space-10);
  }
  .ec-docs-side > .ec-docs-brand { display: none; }
  .ec-docs-nav { gap: var(--space-10); }
  .ec-sidebar-group { gap: var(--space-2); }
  .ec-docs-side[data-menu="closed"] { display: none; }
  .ec-docs:has(.ec-docs-side[data-menu="open"]) { overflow: hidden; height: 100vh; }
  .ec-docs-main { margin-left: 0; max-width: none; padding-top: var(--space-4); }
}

/* ── SiteFooter ──────────────────────────────────────────────────────── */
.ec-footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin-top: var(--space-28); padding-bottom: var(--space-14); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; color: var(--fg-muted); }
.ec-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-left: auto; }
@media (max-width: 560px) { .ec-footer-links { margin-left: 0; flex-basis: 100%; } }
.ec-footer a { color: var(--fg-muted); text-decoration: none; transition: color 0.2s; }
.ec-footer a:hover { color: var(--fg); }

/* ── Reveal: text settles in on load (opt-in) ────────────────────────── */
@keyframes ec-settle { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
.ec-reveal > * { animation: ec-settle 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ec-reveal > :nth-child(2) { --i: 1; } .ec-reveal > :nth-child(3) { --i: 2; } .ec-reveal > :nth-child(4) { --i: 3; }
.ec-reveal > :nth-child(5) { --i: 4; } .ec-reveal > :nth-child(6) { --i: 5; } .ec-reveal > :nth-child(n+7) { --i: 6; }

@media (prefers-reduced-motion: reduce) {
  .ec *, .ec { transition: none !important; }
  .ec-reveal > * { animation: none; }
}