/* Website layer on top of assay.css (the design tokens). */
body { margin: 0; background: var(--color-bg); text-wrap: pretty; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
html { scroll-behavior: smooth; }
@keyframes as-spin { to { transform: rotate(360deg); } }
.spin { animation: as-spin 0.8s linear infinite; }
.navlink { color: rgba(238, 246, 244, 0.75); text-decoration: none; }
.navlink:hover { color: #fff; }
.ghost-dark { padding: 9px 14px; border-radius: var(--radius-md); color: #eef6f4; font-weight: 600; font-size: 14px; text-decoration: none; }
.ghost-dark:hover { background: rgba(238, 246, 244, 0.08); color: #fff; }
.chip { padding: 2px 8px; border: 1px solid var(--color-neutral-300); border-radius: 99px; background: transparent; font: inherit; font-size: 12px; color: var(--color-neutral-700); cursor: pointer; }
.chip:hover { border-color: var(--color-accent-400); color: var(--color-accent-700); }
.codetab { padding: 4px 0 10px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: rgba(238, 246, 244, 0.55); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.codetab[aria-selected="true"] { color: #fff; border-bottom-color: #5eead4; }
.faq-btn { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; cursor: pointer; }
.faq-plus { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--color-accent-100); color: var(--color-accent-700); transition: transform 0.2s; }
.faq-btn[aria-expanded="true"] .faq-plus { transform: rotate(45deg); }
.faq-a { margin: 0; padding: 0 22px 20px; font-size: 14.5px; line-height: 1.65; color: var(--color-neutral-700); }
.step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--color-neutral-500); }
.step .box { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: var(--color-neutral-200); color: var(--color-accent-700); flex: none; }
.step.on { color: var(--color-text); }
.step.done .box { background: var(--color-accent-100); }
.res-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.res-row .ic { width: 18px; height: 18px; flex: none; border-radius: 6px; display: grid; place-items: center; }
.doc { max-width: 760px; margin: 0 auto; padding: clamp(40px, 7vw, 72px) clamp(18px, 4vw, 40px); font-size: 15px; line-height: 1.7; }
.doc h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -0.035em; font-weight: 800; }
.doc h2 { font-size: 20px; margin-top: 32px; }
.doc li { margin-bottom: 6px; }
.topnav { background: #0c1f1c; color: #eef6f4; }
.topnav nav { max-width: 1200px; margin: 0 auto; padding: 18px clamp(18px, 4vw, 40px); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 760px) { .navlinks { display: none !important; } }