* { box-sizing: border-box; }
body {
  margin: 0; padding: 10px;
  color: #ffff00;
  background-color: #000080;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ctext x='4' y='18' font-size='14' fill='%23ffff66'%3E%E2%98%85%3C/text%3E%3Ctext x='28' y='42' font-size='10' fill='%23ff66ff'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, #000080 0 12px, #000066 12px 24px);
  font: 16px/1.25 "Comic Sans MS", "Comic Sans", cursive;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 2L5 26L11 20L16 30L22 27L17 17L27 16Z' fill='%23ffff00' stroke='%23800080' stroke-width='2'/%3E%3C/svg%3E") 3 2, auto;
}
a { color: #00ffff; }
a:visited { color: #ff99ff; }
a:hover { color: #ff0000; background: #ffff00; }
a:focus-visible, summary:focus-visible, audio:focus-visible, input:focus-visible { outline: 3px dashed #ff0000; outline-offset: 3px; }

.frame { width: 100%; max-width: 820px; margin: 0 auto; border-collapse: separate; border: 6px ridge #c0c0c0; background: #000; }
.frame td { vertical-align: top; padding: 8px; }

.masthead { text-align: center; background: #800080; border-bottom: 4px double #00ff00; }
.masthead .welcome { margin: 0; color: #00ff00; font: bold 13px "Courier New", monospace; }
h1 {
  margin: 6px 0 0; font: bold clamp(30px, 7vw, 60px)/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #ff00ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px #fff; filter: drop-shadow(4px 4px 0 #000);
}
.acronym { margin: 4px 0; color: #fff; font: bold 22px "Times New Roman", serif; }
.acronym .blink { color: #ff0000; background: #ffff00; padding: 0 6px; }

.ticker { padding: 0 !important; background: #ffff00; border-top: 3px outset #fff; border-bottom: 3px outset #fff; }
.ticker marquee { display: block; color: #cc0000; font: bold 20px/1.6 "Times New Roman", serif; }

hr.rainbow { height: 6px; margin: 0; border: 0; background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta); }

.bottom { text-align: center; background: #000033; }
.construction { display: inline-block; margin: 4px; padding: 5px; background: repeating-linear-gradient(135deg, #000 0 10px, #ffff00 10px 20px); }
.construction span { display: block; padding: 4px 10px; background: #ffff00; color: #000; font: bold 14px Arial, sans-serif; }
a.construction:hover { background: repeating-linear-gradient(135deg, #ff0000 0 10px, #ffff00 10px 20px); }
.fine { margin: 2px 0; color: #ccc; font: italic 12px "Times New Roman", serif; }
.button { display: inline-block; padding: 3px 10px; background: #c0c0c0; color: #000; border: 3px outset #fff; font: bold 13px Arial, sans-serif; text-decoration: none; }
.button:visited { color: #000; }
.button:active { border-style: inset; }
.webring { margin: 8px auto; padding: 4px; max-width: 440px; background: #c0c0c0; color: #000; border: 3px outset #fff; font: 13px Arial, sans-serif; }
.webring a { color: #0000ee; }
.motion-control {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, .94); color: #1d1d1f; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  font: 500 13px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: left; cursor: pointer;
}
.motion-control input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0;
  border-radius: 999px; background: #d1d1d6; transition: background .2s; cursor: pointer;
}
.motion-control input::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s;
}
.motion-control input:checked { background: #34c759; }
.motion-control input:checked::before { transform: translateX(16px); }
.motion-control input:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }
footer p { margin: 3px 0; }

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { visibility: hidden; } }
body.still .blink { animation: none; }
.trail { position: fixed; pointer-events: none; z-index: 9; color: #ffff00; font-size: 14px; animation: trail-fade .8s linear forwards; }
@keyframes trail-fade { to { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

@media (max-width: 640px) {
  body { padding: 4px; }
  .frame, .frame tbody, .frame tr, .frame td { display: block; width: 100%; }
  .acronym { font-size: 17px; }
  .ticker marquee { font-size: 16px; }
}