:root { --navy:#000080; --silver:#c0c0c0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  min-height:100vh;
  padding:12px;
  color:#000;
  font-family:"Times New Roman",Times,serif;
  background:#3a6ea5;
}
.browser-window {
  width:min(1000px,100%);
  margin:0 auto;
  border:2px outset #fff;
  background:#c0c0c0;
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
}
.browser-chrome { font-family:"MS Sans Serif",Tahoma,sans-serif; font-size:12px; background:var(--silver); border-bottom:2px solid #000; }
.titlebar { height:24px; display:flex; align-items:center; gap:6px; padding:2px 4px; color:#fff; font-weight:bold; background:linear-gradient(90deg,#000080,#1084d0); }
.netscape-n,.throbber { display:grid; place-items:center; color:#fff; background:#003d70; font:bold 17px Georgia; border:1px outset white; text-shadow:1px 1px #000; }
.netscape-n { width:20px; height:19px; }
.window-buttons { margin-left:auto; display:flex; gap:2px; color:#000; }
.window-buttons b { width:19px; height:18px; display:grid; place-items:center; background:#c0c0c0; border:2px outset #fff; line-height:1; }
.menubar { padding:4px 8px; border-bottom:1px solid #777; }
.toolbar { display:flex; gap:4px; align-items:center; padding:5px; border-top:1px solid #fff; border-bottom:1px solid #777; }
.toolbar button { width:49px; height:44px; background:#c0c0c0; border:2px outset #fff; font:18px "MS Sans Serif",Tahoma,sans-serif; cursor:pointer; }
.toolbar button:active { border-style:inset; }
.toolbar small { display:block; font-size:9px; }
.location { height:27px; flex:1; display:flex; align-items:center; gap:6px; padding:2px 4px; border:2px inset #fff; background:#fff; }
.location span { overflow:hidden; white-space:nowrap; }
.throbber { width:42px; height:42px; margin-left:3px; font-size:28px; animation:pulse 1.1s infinite steps(2); }
@keyframes pulse { 50% { filter:invert(1); } }
.viewport { background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h40v40H0z' fill='%23000033'/%3E%3Ccircle cx='5' cy='6' r='1' fill='%23fff'/%3E%3Ccircle cx='29' cy='20' r='.7' fill='%2300ffff'/%3E%3Ccircle cx='16' cy='33' r='.8' fill='%23fff'/%3E%3C/svg%3E"); }
.site-wrap { width:800px; max-width:100%; margin:0 auto; background:#000033; color:#fff; border-left:2px solid #00ffff; border-right:2px solid #00ffff; }
a { color:#00ffff; }
a:visited { color:#ff66ff; }
a:hover { color:#ffff00; background:#000080; }
.top-banner { min-height:116px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; text-align:center; background:linear-gradient(#000,#001d5b 45%,#000); border-bottom:4px ridge #00ffff; }
.top-banner img:first-child { width:120px; }
.top-banner img:last-child { width:65px; }
.eyebrow { color:#ffff00; font:bold 11px Arial,sans-serif; letter-spacing:1px; }
h1 { margin:5px 0; color:#00ff00; font:36px Impact,"Arial Black",sans-serif; letter-spacing:2px; text-shadow:3px 3px #0000ff,-2px -2px #800080; }
.callsign-line { color:#fff; font:bold 18px "Courier New",monospace; }
marquee { padding:5px; color:#000; background:#ffff00; font:bold 13px Arial,sans-serif; border-bottom:3px ridge #fff; }
.layout-table { width:100%; border-collapse:collapse; }
.sidebar { width:172px; padding:8px; background:#006060; border-right:4px ridge #c0c0c0; font:13px Arial,sans-serif; }
.nav-title { margin:6px 0 3px; padding:4px; color:#ffff00; background:#000080; border:2px outset #00a0a0; text-align:center; font-weight:bold; }
.sidebar>a { display:block; padding:5px 4px; color:#fff; border-bottom:1px dotted #8fffff; text-decoration:none; }
.sidebar>a::before { content:"▶ "; color:#ffff00; }
.status-box { padding:6px; background:#000; border:2px inset #aaa; color:#00ff00; font:11px "Courier New",monospace; line-height:1.5; }
.led { display:inline-block; width:7px; height:7px; border-radius:50%; background:#00ff00; box-shadow:0 0 5px #00ff00; animation:blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity:.25; } }
.badges { display:grid; gap:6px; margin-top:10px; }
.badge { padding:3px; text-align:center; font:8px Arial,sans-serif; border:2px outset #fff; line-height:1.05; }
.badge b { font-size:13px; }
.badge.blue { background:#001b8c; }
.badge.green { background:#087b2f; }
.badge.red { background:#9f0000; }
.badge.black { background:#111; }
.content { padding:8px; background:#000033; }
.under-construction { margin-bottom:8px; padding:5px; text-align:center; color:#000; background:repeating-linear-gradient(135deg,#ffff00 0 12px,#000 12px 24px); border:3px ridge #aaa; font:bold 12px Arial,sans-serif; text-shadow:0 0 2px #fff; }
.panel { margin:0 0 10px; padding:8px 10px 10px; color:#fff; background:#000066; border:3px ridge #00bcbc; }
.panel h2 { margin:-8px -10px 8px; padding:3px 7px; color:#ffff00; background:#000080; border-bottom:2px ridge #00ffff; font:bold 18px Arial,sans-serif; }
.panel p { line-height:1.35; }
.quote-box { margin:8px 20px; padding:8px; color:#00ff00; text-align:center; background:#000; border:1px dashed #00ff00; font:bold 14px "Courier New",monospace; }
.data-table { width:100%; border-collapse:collapse; background:#c0c0c0; color:#000; font:12px Arial,sans-serif; }
.data-table th { background:#000080; color:#fff; }
.data-table th,.data-table td { border:2px inset #fff; padding:5px; }
.pixel-list { list-style:"◆  "; padding-left:22px; line-height:1.65; }
.logo-frame { width:min(356px,100%); margin:10px auto 0; padding:5px; background:#000; border:4px groove #c0c0c0; text-align:center; }
.logo-frame img { display:block; width:100%; height:auto; }
.link-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.link-grid a { min-height:58px; padding:6px; background:#000; border:2px outset #00aaaa; text-decoration:none; font-family:Arial,sans-serif; }
.link-grid b,.link-grid span { display:block; }
.link-grid b { color:#ffff00; }
.link-grid span { margin-top:4px; color:#fff; font-size:11px; line-height:1.25; }
.email-address { padding:10px; text-align:center; background:#000; color:#00ff00; border:2px dashed #ff00ff; font:bold 18px "Courier New",monospace; }
.tiny { font-size:11px; }
.counter { margin:12px 0 6px; text-align:center; font:12px Arial,sans-serif; }
.counter span { padding:3px 5px; background:#000; color:#ff3333; border:2px inset #aaa; font:bold 16px "Courier New",monospace; letter-spacing:2px; }
footer { padding:10px; text-align:center; color:#aaa; border-top:3px ridge #00ffff; font:11px Arial,sans-serif; line-height:1.5; }
.fineprint { color:#777; }
.statusbar { display:flex; justify-content:space-between; padding:3px 5px; background:#c0c0c0; border-top:2px ridge #fff; font:11px "MS Sans Serif",Tahoma,sans-serif; }
.statusbar span { min-width:160px; padding:2px 5px; border:2px inset #fff; }
@media (max-width:760px) {
  body { padding:2px; }
  .browser-window { width:100%; box-shadow:none; }
  .toolbar button { display:none; }
  .location { font-size:10px; }
  .top-banner img { display:none; }
  h1 { font-size:27px; }
  .layout-table,.layout-table tbody,.layout-table tr,.layout-table td { display:block; width:100%; }
  .sidebar { border-right:0; border-bottom:4px ridge #c0c0c0; }
  .sidebar>a { display:inline-block; width:49%; }
  .link-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; }
  marquee { display:block; overflow:hidden; white-space:nowrap; }
}
