

:root {
  --ground:#eef4f7;
  --surface:#dee5e9;
  --surface-2:#ccd3d7;
  --line:#a9b0b4;
  --ink-soft:#494e50;
  --ink:#27292b;
  --accent:#0f6c7a;
  --accent-ink:#ffffff;


  --control-h:44px;
  --control-h-sm:44px;
  --control-h-lg:52px;
  --radius:0px;
  --shadow-card:0 1px 3px rgba(0, 0, 0, 0.06);


  --band:80px;
  --band-tight:48px;
  --band-open:80px;


  --hole-651:'Archivo', 'Archivo Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hole-455:"Source Sans 3", 'Source Sans 3 Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hole-a12:'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;


  --text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md:clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
  --text-lg:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-2xl:clamp(1.875rem, 1.62rem + 1.25vw, 2.5rem);
  --text-3xl:clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --text-display:clamp(2.5rem, 2rem + 2.5vw, 4rem);


  --leading-none:1;
  --leading-tight:1.15;
  --leading-snug:1.3;
  --leading-normal:1.55;
  --leading-relaxed:1.68;


  --tracking-tighter:-0.035em;
  --tracking-tight:-0.02em;
  --tracking-normal:0em;
  --tracking-wide:0.04em;
  --tracking-wider:0.08em;


  --measure-prose:65ch;
  --measure-narrow:48ch;
  --measure-wide:78ch;


  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
  --space-32:8rem;


  --container-max:1360px;
  --container-narrow:980px;
  --container-pad:clamp(1rem, 3.5vw, 2.5rem);


  --dock-height:64px;
  --radius-none:0px;


  --dur-fast:140ms;
  --dur-med:240ms;
  --dur-slow:400ms;
  --ease-standard:cubic-bezier(0.2, 0, 0, 1);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
}


*,
*::before,
*::after {
  box-sizing:border-box;
  margin:0;
  padding:0;
  border-radius:0;
}


html {
  font-size:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  accent-color:var(--accent);
  background-color:var(--ground);
  color:var(--ink);
}


body {
  min-height:100vh;
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--hole-455);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:var(--dock-height);
  overflow-x:hidden;
}


@media (min-width: 960px) {
  body { padding-bottom:0; }
}


img,
picture,
svg,
video,
canvas {
  display:block;
  max-width:100%;
  height:auto;
}


input,
button,
textarea,
select {
  font:inherit;
  color:inherit;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--hole-651);
  font-weight:700;
  line-height:var(--leading-tight);
  color:var(--ink);
  letter-spacing:var(--tracking-tight);
  text-wrap:balance;
  overflow-wrap:break-word;
}


h1 {
  font-size:var(--text-display);
  font-weight:800;
  letter-spacing:var(--tracking-tighter);
}


h2 {
  font-size:var(--text-2xl);
  font-weight:700;
  letter-spacing:var(--tracking-tight);
}


h3 {
  font-size:var(--text-xl);
  font-weight:700;
}


h4 {
  font-size:var(--text-lg);
  font-weight:600;
}


h5 {
  font-size:var(--text-md);
  font-weight:600;
}


h6 {
  font-size:var(--text-base);
  font-weight:600;
}


p {
  max-width:var(--measure-prose);
  color:var(--ink);
  text-wrap:pretty;
}


p.lede {
  font-size:var(--text-md);
  line-height:var(--leading-snug);
  color:var(--ink-soft);
  max-width:var(--measure-prose);
}


small,
.caption,
.meta-note {
  font-size:var(--text-xs);
  line-height:var(--leading-normal);
  color:var(--ink-soft);
}


a {
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}


a:hover { color:var(--ink); }


a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}


ul,
ol {
  list-style-position:outside;
  padding-left:1.25rem;
}


ul[role='list'],
ol[role='list'] {
  list-style:none;
  padding-left:0;
}


li { max-width:var(--measure-prose); }


li + li { margin-top:var(--space-2); }


code,
kbd,
samp,
pre {
  font-family:var(--hole-a12);
  font-size:0.9em;
  font-variant-numeric:tabular-nums;
}


code {
  padding:0.1em 0.35em;
  background-color:var(--surface);
  border:1px solid var(--line);
}


pre {
  padding:var(--space-4);
  background-color:var(--surface);
  border:1px solid var(--line);
  overflow-x:auto;
  max-width:100%;
}


pre code {

  padding:0;
  background-color:transparent;
  border:0;
}


blockquote {
  border-left:3px solid var(--accent);
  padding-left:var(--space-4);
  margin-block:var(--space-6);
  color:var(--ink-soft);
  font-style:normal;
}


hr {
  border:0;
  border-top:1px solid var(--line);
  margin-block:var(--space-8);
}


table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  font-variant-numeric:tabular-nums;
}


th,
td {
  text-align:left;
  vertical-align:top;
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--line);
}


th {
  font-family:var(--hole-651);
  font-weight:700;
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  color:var(--ink-soft);
  background-color:var(--surface);
}


td {
  font-size:var(--text-sm);
  color:var(--ink);
}


.num,
.tabular,
[data-tabular] {
  font-family:var(--hole-a12);
  font-variant-numeric:tabular-nums;
}


.container {
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}


.container-narrow {
  width:100%;
  max-width:var(--container-narrow);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}


.flow > * + * { margin-top:var(--space-4); }


.flow-loose > * + * { margin-top:var(--space-8); }


.flow-tight > * + * { margin-top:var(--space-2); }


.grid {
  display:grid;

  gap:var(--space-6);
  min-width:0;
}


.grid-2 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}


@media (min-width: 768px) {
  .grid-2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


.grid-3 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}


@media (min-width: 640px) {
  .grid-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


@media (min-width: 1024px) {
  .grid-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
}


.grid-4 {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
}


@media (min-width: 640px) {
  .grid-4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


@media (min-width: 1024px) {
  .grid-4 { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}


.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > * { min-width:0; }


.cluster {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
}


.split {
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}


@media (min-width: 840px) {
  .split {
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
  }
}


.visually-hidden {
  position:absolute;

  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}


.skip-link {
  position:absolute;
  top:var(--space-2);
  left:var(--space-2);
  z-index:10000;
  background-color:var(--ink);
  color:var(--ground);
  padding:var(--space-3) var(--space-5);
  font-weight:600;
  font-size:var(--text-sm);
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform var(--dur-fast) var(--ease-out);
}


.skip-link:focus {
  transform:translateY(0);
  outline:2px solid var(--accent);
  outline-offset:2px;
}


.icon {
  width:1.25em;
  height:1.25em;
  fill:currentColor;
  display:inline-block;
  vertical-align:-0.2em;
  flex-shrink:0;
}


.icon-sm {
  width:1rem;
  height:1rem;
}


.icon-md {
  width:1.25rem;
  height:1.25rem;
}


.icon-lg {
  width:1.5rem;
  height:1.5rem;
}


.table-responsive {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
}


.table-responsive table { min-width:560px; }


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
