/* ===== 1998 portal ===== */
:root {
  --bg: #c0c0c0;
  --panel: #ffffff;
  --rule: #808080;
  --link: #0000ee;
  --visited: #551a8b;
  --portal-font: "Times New Roman", Times, serif;
  --ui-font: Verdana, Arial, sans-serif;
  --card-font: -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='%23c0c0c0'/><rect width='1' height='1' fill='%23b0b0b0'/></svg>");
  font: 13px/1.35 var(--portal-font);
  color: #000;
}
a { color: var(--link); }
a:visited { color: var(--visited); }
.page { width: 800px; max-width: 100%; margin: 0 auto; background: var(--panel); border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }

.masthead { padding: 8px 12px; border-bottom: 3px double var(--rule); }
.logo-row { display: flex; align-items: baseline; gap: 12px; }
.logo { font: bold 40px/1 Impact, "Arial Black", sans-serif; letter-spacing: -1px; color: #000080; }
.logo span { color: #ff6600; }
.ai-badge { font: bold 10px var(--ui-font); background: #ffff00; border: 1px solid #000; padding: 2px 5px; }
.ai-badge.blink { animation: blink 0.6s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.backronym { font: italic 11px var(--ui-font); color: #333; margin: 2px 0 8px; }
.search { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.search input { flex: 1 1 160px; min-width: 0; font: 14px var(--ui-font); padding: 3px 5px; border: 2px inset #ccc; }
.search button { font: 12px var(--ui-font); padding: 3px 10px; border: 2px outset #ddd; background: #e8e8e8; cursor: pointer; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; }

.columns { display: grid; grid-template-columns: 180px 1fr 180px; }
.col { padding: 8px; border-right: 1px solid var(--rule); min-width: 0; }
.col.right { border-right: 0; }
.footer { border-top: 3px double var(--rule); padding: 8px 12px; font: 10px var(--ui-font); }
@media (max-width: 640px) { .columns { grid-template-columns: 1fr; } .col { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ===== widgets ===== */
.widget { border: 1px solid var(--rule); margin-bottom: 8px; background: #f4f4f4; }
.widget-title { background: #000080; color: #fff; font: bold 11px var(--ui-font); padding: 2px 5px; }
.widget-body { padding: 5px; font: 11px/1.4 var(--ui-font); }
.widget-body ul { margin: 0; padding-left: 14px; }
.widget-body a, .widget-body .clicky { cursor: pointer; text-decoration: underline; color: var(--link); }
.reveal { margin-top: 4px; padding: 4px; border: 1px dashed #999; background: #fffbe6; font-size: 10px; }
.reveal[hidden] { display: none; }
.ticker-track { white-space: nowrap; overflow: hidden; font: 11px "Courier New", monospace; background: #000; color: #0f0; padding: 2px 4px; }
.assistant { position: sticky; bottom: 8px; }
.assistant-bubble { border: 2px solid #000; background: #ffffe0; padding: 6px; font: 11px var(--ui-font); border-radius: 8px 8px 8px 0; min-height: 3em; }
.btn88 { display: inline-block; width: 88px; height: 31px; font: bold 9px/31px var(--ui-font); text-align: center; color: #fff; border: 1px solid #000; margin: 2px; cursor: pointer; }
.tabs .widget { margin: 0; }
.tabs .widget-title { cursor: pointer; background: #e0e0e0; color: #000; border-bottom: 0; }

/* ===== the one modern thing ===== */
.card {
  font: 15px/1.55 var(--card-font);
  background: #fff; color: #111;
  border: 1px solid #e3e3e3; border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  padding: 14px 16px; margin-bottom: 14px;
  overflow-wrap: anywhere; word-break: break-word;
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.card-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #7c5cff, #19c3ff); }
.card-model { font-weight: 600; font-size: 13px; color: #444; }
.card-model small { font-weight: 400; color: #888; margin-left: 6px; }
.card-reasoning { font-size: 13px; color: #666; margin: 0 0 10px; border-left: 3px solid #eee; padding-left: 10px; }
.card-reasoning summary { cursor: pointer; list-style: none; }
.card-reasoning ol { margin: 6px 0 0; padding-left: 18px; }
.card-body h2 { font-size: 17px; margin: 14px 0 6px; }
.card-body p { margin: 0 0 10px; }
.card-body ul, .card-body ol { margin: 0 0 10px; padding-left: 22px; }
.card-body table { border-collapse: collapse; margin: 0 0 10px; font-size: 14px; }
.card-body th, .card-body td { border: 1px solid #e3e3e3; padding: 4px 8px; text-align: left; }
.card-query { font-weight: 600; margin-bottom: 8px; }
.cursor { display: inline-block; width: 7px; height: 1em; background: #111; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2, start) infinite; }
.card-foot { display: flex; gap: 6px; align-items: center; margin-top: 10px; border-top: 1px solid #eee; padding-top: 8px; font-size: 12px; color: #666; }
.card-foot button { font: 12px var(--card-font); border: 1px solid #ddd; background: #fafafa; border-radius: 8px; padding: 3px 8px; cursor: pointer; color: #444; }
.card-foot button:hover { background: #f0f0f0; }
.card-foot .spacer { flex: 1; }
.card-sources { font-size: 12px; color: #666; margin-top: 8px; }
.card-sources ol { margin: 4px 0 0; padding-left: 18px; }
.card-sources[hidden] { display: none; }
.card-foot[hidden] { display: none; }
.card-note { font-size: 12px; color: #666; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .cursor, .ai-badge.blink { animation: none; } }