/* Navigator 96 and original period-style KadabraNet pages. */
.web96-browser {
  height: 100%;
  min-height: 245px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: #c0c0c0;
  color: #000;
  font: 11px/1.25 Arial, sans-serif;
}
.web96-toolbar,
.web96-addressbar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-bottom: 1px solid #777;
  background: #c0c0c0;
}
.web96-toolbar button,
.web96-addressbar button,
.web96-offline button {
  min-height: 23px;
  padding: 2px 7px;
  border: 2px solid;
  border-color: #fff #444 #444 #fff;
  background: #c0c0c0;
  color: #000;
  font: 10px Arial, sans-serif;
  cursor: pointer;
}
.web96-toolbar button:active,
.web96-addressbar button:active,
.web96-offline button:active { border-color:#444 #fff #fff #444; }
.web96-toolbar button[disabled] { color:#777; cursor:default; }
.web96-addressbar label { flex:0 0 auto; }
.web96-addressbar input {
  flex:1 1 auto;
  min-width:0;
  height:22px;
  padding:2px 4px;
  border:2px solid;
  border-color:#555 #fff #fff #555;
  background:#fff;
  color:#000;
  font:11px "Courier New",monospace;
}
.web96-viewport {
  min-height: 210px;
  overflow: auto;
  border: 2px solid;
  border-color:#555 #fff #fff #555;
  background:#fff;
}
.web96-statusbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:20px;
  padding:2px 5px;
  border-top:1px solid #fff;
  color:#222;
  background:#c0c0c0;
  font:9px Arial,sans-serif;
}
.web96-statusbar span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.web96-online-lamp { width:8px;height:8px;border-radius:50%;background:#157b1e;box-shadow:0 0 5px #32c642; }
.web96-offline {
  min-height:230px;
  display:grid;
  place-content:center;
  gap:10px;
  padding:25px;
  background:#fff;
  text-align:center;
}
.web96-offline h3 { margin:0;color:#000080;font:700 19px "Times New Roman",serif; }
.web96-offline p { max-width:360px;margin:0; }

.web96-page {
  min-height:100%;
  padding:12px;
  background:var(--web-bg,#fff);
  color:var(--web-color,#000);
  font-family:var(--web-font,"Times New Roman",serif);
  font-size:13px;
}
.web96-page a,
.web96-page button.web96-link {
  padding:0;
  border:0;
  background:transparent;
  color:var(--web-link,#0000ee);
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}
.web96-page a:visited { color:#551a8b; }
.web96-page h1 { margin:4px 0 8px;font-size:28px;line-height:1.05; }
.web96-page h2 { margin:10px 0 5px;font-size:20px; }
.web96-page h3 { margin:8px 0 4px;font-size:16px; }
.web96-page p { margin:6px 0; }
.web96-page hr { border:0;border-top:1px solid currentColor; }
.web96-page table { border-collapse:collapse; }
.web96-page td,.web96-page th { padding:4px;vertical-align:top; }
.web96-page img.web96-placeholder {
  width:88px;height:66px;
  border:1px solid #000;
  background:linear-gradient(135deg,#00a,#0aa 48%,#f0f 49%,#ff0);
  image-rendering:pixelated;
}
.web96-center { text-align:center; }
.web96-small { font-size:10px; }
.web96-counter { display:inline-block;padding:2px 4px;background:#000;color:#0f0;font:11px "Courier New",monospace;letter-spacing:.1em; }
.web96-badge { display:inline-block;margin:2px;padding:3px 6px;border:2px outset #ddd;background:#c0c0c0;color:#000;font:700 9px Arial,sans-serif;text-decoration:none!important; }
.web96-under-construction { display:inline-block;padding:3px 7px;background:#ff0;color:#000;font:bold 10px Arial,sans-serif;rotate:-2deg; }
.web96-marquee { overflow:hidden;white-space:nowrap;border:1px solid currentColor;padding:2px; }
.web96-marquee span { display:inline-block;padding-left:100%;animation:web96-marquee 14s linear infinite; }
@keyframes web96-marquee { to { transform:translateX(-100%); } }
.web96-blink { animation:web96-blink .8s steps(1,end) infinite; }
@keyframes web96-blink { 50% { opacity:0; } }
.web96-stars { background:#000;color:#fff; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:17px 17px; }
.web96-sidebar-layout { display:grid;grid-template-columns:120px 1fr;gap:10px; }
.web96-sidebar { padding:7px;border:2px ridge #ddd;background:#ddd;color:#000; }
.web96-sidebar button { display:block;margin:4px 0; }
.web96-result { margin:9px 0; }
.web96-result b { display:block;color:#008000;font:10px "Courier New",monospace; }
.web96-search-box { display:flex;gap:4px;max-width:520px; }
.web96-search-box input { flex:1;min-width:0; }
.web96-directory { columns:2;column-gap:26px; }
.web96-directory li { break-inside:avoid;margin:4px 0; }
.web96-phone-list { width:100%;border:2px ridge #ddd;background:#fff;color:#000;font-family:Arial,sans-serif; }
.web96-phone-list tr:nth-child(even) { background:#e9e9e9; }
.web96-phone-list button { color:#0000ee;text-decoration:underline;border:0;background:transparent;cursor:pointer; }
.web96-guestbook { border:2px inset #ddd;background:#fff;padding:6px;color:#000; }
.web96-code { padding:7px;background:#000;color:#0f0;font:11px/1.4 "Courier New",monospace;white-space:pre-wrap; }
.web96-webring { margin-top:12px;padding:6px;border:2px groove #bbb;background:#eee;color:#000;text-align:center;font:10px Arial,sans-serif; }
.web96-secret { background:#050505;color:#8dbb84; font-family:"Courier New",monospace; }
.web96-secret a,.web96-secret button.web96-link { color:#d9c66c; }
.web96-page [data-phone-number] { cursor:pointer; }

/* Browser is substantially larger and sharper in close-up. */
.device-in-focus[data-focus-kind="computer"] .web96-browser { min-height:430px;font-size:13px; }
.device-in-focus[data-focus-kind="computer"] .web96-toolbar button,
.device-in-focus[data-focus-kind="computer"] .web96-addressbar button { min-height:28px;font-size:12px; }
.device-in-focus[data-focus-kind="computer"] .web96-addressbar input { height:27px;font-size:13px; }
.device-in-focus[data-focus-kind="computer"] .web96-page { font-size:15px; }
.device-in-focus[data-focus-kind="computer"] .web96-viewport { min-height:360px; }

@media (max-width:620px) {
  .web96-toolbar { flex-wrap:wrap; }
  .web96-toolbar button { flex:1 1 auto; }
  .web96-sidebar-layout { grid-template-columns:1fr; }
  .web96-directory { columns:1; }
  .web96-page { padding:8px;font-size:11px; }
  .device-in-focus[data-focus-kind="computer"] .web96-page { font-size:12px; }
}

@media (prefers-reduced-motion:reduce) {
  .web96-marquee span,.web96-blink { animation:none!important; }
}