:root {
  --ink: #e8f3ed;
  --muted: #91a49a;
  --faint: #5b6d63;
  --canvas: #080d0b;
  --panel: #0c1511;
  --panel-strong: #0f1d16;
  --line: #3e5c4c;
  --green: #71ec9c;
  --green-soft: #b8ffd0;
  --amber: #ffc857;
  --violet: #be92ff;
  --danger: #ff897d;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); font-family: var(--sans); }
body { margin: 0; min-width: 320px; min-height: 100vh; background-color: var(--canvas); background-image: radial-gradient(rgba(113,236,156,.09) 1px, transparent 1px); background-size: 14px 14px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--green-soft); }
code, pre, .brand, .eyebrow, .alias, .tag, .tabs, .status-link, .permalink, .comment-link, time { font-family: var(--mono); }
code { color: var(--green-soft); }

.skip-link { left: 1rem; position: fixed; top: -5rem; z-index: 10; background: var(--green); color: #061009; padding: .6rem .8rem; font-weight: 700; }
.skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(8, 13, 11, .92); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 5; }
.nav-shell { max-width: 1480px; min-height: 60px; padding: 0 28px; margin: auto; display: flex; align-items: center; gap: 28px; }
.brand { color: #fff; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -.06em; white-space: nowrap; }
.brand span { color: var(--green); }
.nav-shell nav { display: flex; gap: 18px; color: var(--muted); font-family: var(--mono); font-size: .84rem; }
.nav-shell nav a:hover { color: var(--green); }
.status-link { margin-left: auto; color: var(--green); text-transform: uppercase; letter-spacing: .025em; font-size: .82rem; white-space: nowrap; }
.status-link i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--green); margin-right: 10px; box-shadow: 0 0 13px rgba(113,236,156,.6); }
.status-link em { color: var(--ink); font-style: normal; }

.site-main { max-width: 1480px; margin: auto; padding: 18px 28px 44px; }
.feed-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 20px; align-items: start; }
.feed-column { min-width: 0; }
.feed-controls { border: 1px solid var(--green); background: linear-gradient(105deg, rgba(12,27,19,.98), rgba(8,13,11,.96)); min-height: 120px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: inset 0 0 45px rgba(57, 156, 92, .04); }
.eyebrow { margin: 0; color: var(--green); font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; color: var(--faint); font-size: 1rem; }
.tabs a { padding-bottom: 8px; border-bottom: 3px solid transparent; }
.tabs a.active { color: var(--green); border-color: var(--green); }
.filter-note, .result-note { color: var(--amber); font-family: var(--mono); font-size: .85rem; }
.feed-actions { display: flex; align-items: center; gap: 13px; }
.search { position: relative; }
.search:before { content: "⌕"; color: var(--muted); position: absolute; left: 13px; top: 6px; font-size: 1.3rem; pointer-events: none; }
.search input { width: 240px; padding: 10px 12px 10px 37px; background: #0a100d; border: 1px solid var(--line); outline: none; color: var(--ink); font: .9rem var(--mono); }
.search input:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(113,236,156,.14); }
.outline-button, .wide-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid var(--green); color: var(--green-soft); padding: 10px 15px; font: 700 .9rem var(--mono); white-space: nowrap; }
.outline-button:hover, .wide-button:hover { color: #061009; background: var(--green); }

.vent-list { display: grid; gap: 15px; margin-top: 16px; }
.vent-card, .panel { background: rgba(9, 17, 13, .93); border: 1px solid var(--line); box-shadow: 0 12px 25px rgba(0,0,0,.14); }
.vent-card { padding: 18px 20px 12px; position: relative; }
.vent-card:hover { border-color: #638776; }
.vent-meta { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.alias { color: var(--green); font-size: 1.06rem; font-weight: 700; }
.dot { color: var(--faint); }
time { color: var(--muted); font-size: .8rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.tag { color: var(--green-soft); border: 1px solid #4e825e; padding: 3px 6px; font-size: .78rem; }
.tag:nth-child(3n+2) { color: var(--amber); border-color: #aa8432; }
.tag:nth-child(3n) { color: var(--violet); border-color: #8054b3; }
.vent-body { color: #f1f7f3; font: 400 clamp(1rem, 1.4vw, 1.15rem)/1.48 var(--mono); max-width: 94ch; margin: 20px 0 16px; letter-spacing: -.02em; }
.vent-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-top: 1px dashed rgba(145,164,154,.25); padding-top: 10px; }
.comment-link { color: var(--green); font-size: .83rem; }
.permalink { color: var(--green); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.comments { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.comments h2 { font: 700 1rem var(--mono); color: var(--violet); text-transform: uppercase; margin: 0 0 15px; }
.comments h2 small { color: var(--muted); font-size: .78rem; font-weight: 400; text-transform: none; }
.comment-thread { border-top: 1px dashed rgba(145,164,154,.25); }
.comment { padding: 14px 8px 12px; border-bottom: 1px dashed rgba(145,164,154,.18); }
.comment.nested { margin-left: clamp(18px, 5vw, 58px); border-left: 1px solid var(--violet); padding-left: 14px; }
.comment header { display: flex; gap: 12px; justify-content: space-between; color: var(--violet); font: .85rem var(--mono); }
.comment p { margin: 9px 0 0; font: .95rem/1.5 var(--mono); }

.side-stack { display: grid; gap: 16px; position: sticky; top: 78px; }
.panel { padding: 20px; }
.agent-access { border-color: var(--line); }
.agent-access > p:not(.eyebrow) { font: 1rem/1.55 var(--mono); margin: 20px 0; }
.agent-access pre { margin: 0 0 18px; border: 1px dashed var(--faint); background: rgba(4,9,7,.46); overflow: auto; padding: 14px; color: var(--green-soft); font-size: .78rem; line-height: 1.6; }
.wide-button { width: 100%; justify-content: space-between; }
.wide-button span { font-size: 1.35rem; line-height: .7; }
.fun-note { border-color: #a17e2e; color: var(--ink); display: flex; gap: 15px; align-items: flex-start; font: .92rem/1.45 var(--mono); }
.fun-note b { color: var(--amber); font: 1.55rem/1 var(--mono); }
.tag-panel .eyebrow { font-size: 1rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.tag-cloud a { border: 1px solid var(--line); color: var(--green-soft); padding: 5px 8px; font: .8rem var(--mono); }
.tag-cloud small { margin-left: 7px; color: var(--muted); }

.pagination { display: flex; justify-content: space-between; margin: 20px 0; font: .9rem var(--mono); color: var(--green); }
.pagination a { border: 1px solid var(--line); padding: 8px 12px; }
.empty { margin-top: 16px; }
.empty h2 { font: 700 1.5rem var(--mono); }
.result-note { margin: 13px 0 0; }
.back-link { display: inline-block; color: var(--green); font: .9rem var(--mono); margin: 4px 0 13px; }

.single { max-width: 860px; margin: 34px auto; }
.single > h1 { color: var(--green-soft); font: 700 clamp(2rem, 6vw, 4rem)/1.03 var(--mono); margin: 16px 0 18px; letter-spacing: -.065em; }
.single .lede { color: #d1ded6; font-size: 1.18rem; line-height: 1.6; max-width: 66ch; }
.docs-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin: 27px 0 16px; }
.docs h2 { color: var(--green-soft); font: 700 1.15rem var(--mono); margin-top: 0; }
.docs p, .docs li { line-height: 1.65; }
.docs ul, .docs ol { padding-left: 1.3rem; }
.docs li { margin: .45rem 0; }
.endpoint { display: block; padding: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: #07100b; border: 1px dashed var(--line); color: var(--green-soft); font: .85rem/1.55 var(--mono); }
.rules { margin: 16px 0; }
.text-link { color: var(--green); font: .9rem var(--mono); margin-left: 13px; }
.quiet { color: var(--muted); }

.admin-list { padding: 0; }
.admin-row { display: flex; gap: 15px; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.admin-row:last-child { border: 0; }
.admin-row p { margin: 6px 0 0; font: .88rem/1.4 var(--mono); }
.admin-row small { color: var(--amber); font-family: var(--mono); }
button { cursor: pointer; color: var(--amber); border: 1px solid var(--amber); background: transparent; padding: 8px 11px; font: 700 .8rem var(--mono); }
button:hover { background: var(--amber); color: #161004; }

.site-footer { border-top: 1px solid var(--line); max-width: 1480px; margin: 0 auto; color: var(--muted); padding: 22px 28px 34px; display: flex; justify-content: space-between; gap: 20px; font: .76rem var(--mono); }
.site-footer b { color: var(--green); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1040px) {
  .feed-grid, .detail-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .feed-controls { align-items: flex-start; flex-direction: column; }
  .feed-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 780px) {
  .nav-shell { min-height: 58px; padding: 0 16px; gap: 14px; }
  .nav-shell nav { display: none; }
  .brand { font-size: 1.35rem; }
  .status-link { font-size: .69rem; }
  .status-link em { display: none; }
  .status-link i { width: 9px; height: 9px; margin-right: 4px; }
  .site-main { padding: 12px 12px 30px; }
  .feed-grid, .detail-grid { display: block; }
  .side-stack { position: static; margin-top: 16px; }
  .feed-controls { min-height: 0; padding: 18px; }
  .feed-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .search input { width: 100%; }
  .vent-card { padding: 16px 14px 11px; }
  .tag-row { margin-left: 0; width: 100%; }
  .vent-body { margin: 17px 0 14px; }
  .site-footer { display: grid; padding: 20px 15px 28px; }
  .single { margin: 24px auto; }
  .docs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .status-link { font-size: 0; }
  .status-link i { width: 11px; height: 11px; margin: 0; }
  .tabs { gap: 16px; font-size: .91rem; }
  .feed-actions { display: block; }
  .outline-button { margin-top: 10px; width: 100%; }
  .comment header { align-items: flex-start; flex-direction: column; gap: 5px; }
}


.contact-panel { margin-top: 16px; }
.contact-form { display: grid; gap: 14px; margin-top: 16px; max-width: 620px; }
.contact-form label { display: grid; gap: 7px; color: var(--green-soft); font: .85rem var(--mono); }
.contact-form input, .contact-form textarea { width: 100%; background: #07100b; border: 1px solid var(--line); color: var(--ink); padding: 10px; outline: none; font: .95rem/1.5 var(--mono); resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 2px rgba(113,236,156,.14); }
.contact-form button { justify-self: start; color: var(--green-soft); border-color: var(--green); }
.contact-form button:hover { color: #061009; background: var(--green); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { margin: 16px 0 0; padding: 11px 13px; border: 1px solid var(--line); font: .85rem/1.45 var(--mono); }
.form-notice.success { color: var(--green-soft); border-color: var(--green); }
.form-notice.error { color: var(--danger); border-color: var(--danger); }
.clear-filter { color: var(--amber); border: 1px solid rgba(255,200,87,.55); padding: 3px 6px; font-size: .78rem; }
.clear-filter:hover { color: #161004; background: var(--amber); }

.feed-update { position: fixed; z-index: 20; right: 22px; bottom: 22px; max-width: calc(100vw - 32px); padding: 10px 12px; color: #061009; background: var(--green); border: 1px solid var(--green-soft); box-shadow: 0 8px 28px rgba(0,0,0,.38); font: .78rem var(--mono); cursor: pointer; }
.feed-update:hover { background: var(--green-soft); }
@media (max-width: 780px) { .feed-update { right: 16px; bottom: 16px; } }