/* Page-specific additions over the shared design system. */
.eyebrow { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hero-example { margin: 18px auto 0; max-width: 760px; }
.hero-example code { display: inline-block; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text-2); word-break: break-all; }
.doc h2 { font-size: 22px; letter-spacing: -.01em; margin: 0 0 12px; }
.doc h3 { font-size: 15.5px; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: 20px; margin: 8px 0 0; }
.doc li { margin: 5px 0; }
.doc code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 13px; color: var(--text); }
.doc pre { background: var(--surface-2); padding: 14px 16px; border-radius: var(--radius-sm); overflow: auto; }
.doc pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
.ex { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ex code { background: none; padding: 0; font-size: 13px; color: var(--text); flex: 1 1 320px; word-break: break-all; }
.ex .hint { flex-basis: 100%; }
.symbols { border-collapse: collapse; width: 100%; font-size: 14px; margin-top: 8px; }
.symbols td { padding: 7px 10px; border-top: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.symbols td:nth-child(odd) { width: 64px; }
#try h2 { font-size: 22px; margin: 0 0 6px; }
#try .muted { color: var(--text-2); font-size: 14px; margin: 0 0 14px; }
#try textarea { font-family: var(--mono); font-size: 13.5px; min-height: 120px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.genomes { margin-top: 16px; font-size: 13.5px; color: var(--text-2); }
.genomes summary { cursor: pointer; }
.seqs { margin-top: 18px; display: grid; gap: 10px; }
.seq { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.seq-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.seq-head strong { font-size: 14.5px; }
.seq-head .meta { margin-left: 0; }
.seq-preview { margin: 8px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); word-break: break-all; line-height: 1.6; }
.seq-preview .ellipsis { color: var(--text-3); padding: 0 6px; }
.seq.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 6px; }
.use { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); }
.use:hover { border-color: var(--accent); text-decoration: none; }
.use span { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

/* Example "Try" controls: a real button-sized target, not a 20 px word. */
.ex .link-btn { padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); font-size: 12.5px; font-weight: 600; }
.ex .link-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }