.hero { padding: 54px 0 30px} .hero h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 42px); letter-spacing: -.03em; line-height: 1.12; font-weight: 680} .hero p.lead { margin: 0 0 26px; color: var(--muted); font-size: 17px; max-width: 62ch} .search { position: relative; max-width: 620px} .search input { width: 100%; padding: 15px 17px; font-size: 17px; font-family: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); outline: none} .search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft)} .search input::placeholder { color: var(--muted)} .results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: none} .results.on { display: block} .results a { display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; color: var(--ink); border-bottom: 1px solid var(--line)} .results a:last-child { border-bottom: 0} .results a:hover, .results a.sel { background: var(--accent-soft); text-decoration: none} .results .idx { font-variant-numeric: tabular-nums; font-weight: 620; color: var(--accent); flex: none; min-width: 6ch} .results .where { color: var(--muted); font-size: 14px} .results .empty { padding: 14px 16px; color: var(--muted)} .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 30px} .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px} .stat b { display: block; font-size: 25px; letter-spacing: -.02em; font-variant-numeric: tabular-nums} .stat span { color: var(--muted); font-size: 13.5px} h2 { font-size: 19px; letter-spacing: -.015em; margin: 34px 0 14px} h2 .n { color: var(--muted); font-weight: 400; font-size: 15px} .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px} .grid a { display: flex; align-items: center; gap: 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; color: var(--ink)} .grid a:hover { border-color: var(--accent); text-decoration: none} .grid a img { width: 22px; height: 26px; object-fit: contain; flex: none} .grid a .n { margin-left: auto; padding-left: 8px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap} .grid a .slot { width: 22px; flex: none} .cols { columns: 260px; column-gap: 26px} .cols a { display: block; padding: 3px 0; break-inside: avoid} .cols .n { color: var(--muted); font-size: 13px; white-space: nowrap} .cols > span:not(.n) { display: block; padding: 3px 0; break-inside: avoid} .cols > span:not(.n) .n { display: inline; white-space: normal} .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 12px 16px; margin-bottom: 9px} .faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: baseline} .faq summary::-webkit-details-marker { display: none} .faq summary::before { content: "+"; color: var(--accent); font-weight: 700} .faq details[open] summary::before { content: "−"} .faq details p { margin: 10px 0 2px; color: var(--muted); max-width: 78ch} .faq details p a { color: var(--accent)} main ol, main ul { max-width: 78ch; padding-left: 22px} main ol li, main ul li { margin-bottom: 7px} main p { max-width: 78ch} code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: var(--accent-soft); padding: 2px 6px; border-radius: 6px} .tbl caption { caption-side: top; text-align: left; padding: 0 0 9px; color: var(--muted); font-size: 13.5px} .tbl { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden} .tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 15px} .tbl th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600} .tbl tr:last-child td { border-bottom: 0} .tbl td.i { font-variant-numeric: tabular-nums; font-weight: 620; white-space: nowrap} .tbl td.t { color: var(--muted); font-size: 14px} footer { border-top: 1px solid var(--line); margin-top: 56px; padding: 26px 0 44px; color: var(--muted); font-size: 14px} footer .wrap > div + div { margin-top: 8px} footer a { color: var(--muted); text-decoration: underline} @media (max-width: 600px) { .hero { padding: 34px 0 22px} .card { padding: 20px} .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none} }