html { background: #ffffff; }

  body {
    margin: 0;
    padding: 24px 12px 60px 12px;
    background-color: #ffffff;
    background-image: repeating-linear-gradient(
      0deg, rgba(0,0,0,0.018) 0px, rgba(0,0,0,0.018) 1px,
      transparent 1px, transparent 3px);
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
  }

  table.shell {
    width: 640px; margin: 0 auto; border-collapse: collapse;
    background-color: #fdfdf7; border: 1px solid #999999;
  }

  td.pad { padding: 18px 22px 22px 22px; }

  .logo {
    font-family: Arial, Helvetica, sans-serif; font-size: 21px; font-weight: bold;
    letter-spacing: -0.5px; color: #000060; margin: 0;
  }
  .logo span { font-weight: normal; color: #000000; }
  .logo a { color: inherit; text-decoration: none; }

  .tagline {
    font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #555555;
    letter-spacing: 0.9px; text-transform: uppercase; margin: 3px 0 0 0;
  }

  .estab {
    font-family: Arial, Helvetica, sans-serif; font-size: 10px;
    color: #777777; text-align: right; line-height: 1.5;
  }

  hr { border: 0; border-top: 1px solid #000060; margin: 12px 0 0 0; }
  hr.thin { border-top: 1px solid #cccccc; margin: 16px 0; }

  .nav {
    font-family: Arial, Helvetica, sans-serif; font-size: 11px;
    padding: 6px 0 7px 0; border-bottom: 1px solid #000060; margin-bottom: 20px;
  }
  .nav a { margin: 0 2px; }
  .nav b { margin: 0 2px; color: #000000; }
  .sep { color: #aaaaaa; margin: 0 4px; }

  a { color: #0000cc; text-decoration: underline; }
  a:visited { color: #660099; }
  a:hover { color: #cc0000; }
  a:focus-visible { outline: 1px dotted #000000; outline-offset: 1px; }

  h2 {
    font-family: Arial, Helvetica, sans-serif; font-size: 13px;
    color: #000060; margin: 0 0 8px 0;
  }

  p { margin: 0 0 12px 0; line-height: 1.45; font-size: 15px; }
  ul { margin: 0 0 12px 0; padding-left: 22px; font-size: 15px; line-height: 1.6; }
  ol { margin: 0 0 12px 0; padding-left: 24px; font-size: 15px; line-height: 1.6; }

  .small {
    font-family: Arial, Helvetica, sans-serif; font-size: 11px;
    color: #444444; line-height: 1.5;
  }

  .notice {
    border: 1px solid #b3b3a0; background-color: #f3f2e4; padding: 9px 11px;
    margin: 0 0 18px 0; font-family: Arial, Helvetica, sans-serif;
    font-size: 11px; line-height: 1.55; color: #333333;
  }
  .notice b { color: #000000; }

  /* ---- data tables ---- */
  table.data {
    border-collapse: collapse; width: 100%; margin: 0 0 14px 0;
    font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  }
  table.data th {
    background: #e8e7d8; border: 1px solid #b3b3a0; padding: 4px 6px;
    text-align: left; color: #000060; font-size: 10px;
    letter-spacing: 0.4px; text-transform: uppercase;
  }
  table.data td {
    border: 1px solid #cfcec0; padding: 4px 6px; vertical-align: top; color: #222222;
  }
  table.data tr.dim td { color: #8a8a8a; }

  .tapeframe {
    display: block; border: 1px solid #999999;
    image-rendering: pixelated; max-width: 100%; height: auto;
  }

  .caption {
    font-family: Arial, Helvetica, sans-serif; font-size: 10px;
    color: #777777; padding-top: 4px;
  }

  .new {
    font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold;
    color: #cc0000; letter-spacing: 0.5px; animation: blink 1.3s steps(1) infinite;
  }
  @keyframes blink { 0%,55% { opacity:1; } 56%,100% { opacity:0; } }
  @media (prefers-reduced-motion: reduce) { .new { animation: none; } }

  .counter {
    display: inline-block; background: #000000; color: #33ff33;
    font-family: "Courier New", Courier, monospace; font-size: 12px;
    letter-spacing: 3px; padding: 2px 5px; border: 1px solid #555555;
    vertical-align: middle;
  }

  .footer {
    text-align: center; font-family: Arial, Helvetica, sans-serif;
    font-size: 10px; color: #666666; line-height: 1.7; padding-top: 4px;
  }
  .footer a { color: #0000cc; }

  /* ---- auth terminal ---- */
  .authbox {
    border: 1px solid #999999; background: #f0efe2; padding: 14px 16px;
    margin: 0 0 14px 0; font-family: Arial, Helvetica, sans-serif; font-size: 11px;
  }
  .authbox label { display: inline-block; width: 96px; color: #333333; }
  .authbox input[type=text], .authbox input[type=password] {
    font-family: "Courier New", Courier, monospace; font-size: 12px;
    border: 1px solid #808080; background: #ffffff; padding: 2px 4px;
    width: 150px; margin-bottom: 7px;
  }
  .authbox button {
    font-family: Arial, Helvetica, sans-serif; font-size: 11px;
    padding: 2px 12px; border: 1px solid #808080; background: #e4e3d6;
    cursor: pointer; margin-top: 3px;
  }
  .authbox button:active { border-color: #555555; background: #d6d5c8; }

  .denied {
    font-family: "Courier New", Courier, monospace; font-size: 11px;
    color: #cc0000; line-height: 1.6; margin-top: 10px; white-space: pre-line;
  }


  @media (max-width: 680px) {
    table.shell { width: 100%; }
    td.pad { padding: 14px; }
    .estab { display: none; }
    .authbox label { display: block; width: auto; margin-bottom: 3px; }
  }