@font-face {
  font-family: 'Comic Neue';
  src: url('../vendor/fonts/ComicNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Comic Neue';
  src: url('../vendor/fonts/ComicNeue-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Early-2000s portal styling, with responsive layout and keyboard access. */
* { box-sizing: border-box; }
html { scroll-padding-top: 20px; }
body {
  margin: 0;
  padding: 28px 16px;
  font: 13px Verdana, Arial, sans-serif;
  color: #17213c;
  background-color: #12264e;
  background-image: radial-gradient(circle, #6684b0 1px, transparent 1px), linear-gradient(45deg, #ffffff05 25%, transparent 25%, transparent 75%, #ffffff05 75%);
  background-size: 12px 12px, 24px 24px;
}
a { color: #0000cc; text-decoration: underline; }
a:visited { color: #663399; }
a:hover { color: #b02000; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #c35000; outline-offset: 3px; }
.site-shell { max-width: 980px; margin: auto; background: #78bbcb; border: 3px outset #d9d9d9; box-shadow: 8px 8px 0 #0006; }
.browser-bar { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; background: linear-gradient(90deg, #000066, #256ca5); color: white; font: bold 12px Tahoma, sans-serif; }
header { padding: 25px 20px; text-align: center; background: #f5e6b8; background: linear-gradient(#f3dfaa, #fff8e3 50%, #e4cc8c); border-bottom: 2px solid #b39a5d; }
.brand { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; }
.brand-name { font: bold clamp(25px, 6vw, 46px) 'Arial Black', Impact, sans-serif; letter-spacing: 2px; color: #163e86; text-shadow: 2px 2px 0 #fff, 4px 4px 0 #93a0c1; }
.brand-icon { font: bold 32px Arial, sans-serif; color: #ffec64; background: #173b83; border: 3px outset #92b9ee; padding: 0 8px; }
.header-note { display: block; margin-top: 12px; font: italic 15px Georgia, serif; color: #213c69; }
nav { text-align: center; padding: 12px; background: #d3d3d3; border-top: 2px solid white; border-bottom: 2px solid #888; font-weight: bold; line-height: 1.9; }
nav span { padding: 0 12px; color: #777; }
.welcome { margin: 14px 18px 0; padding: 9px 12px; text-align: center; color: #001e60; background: #cce5ff; border: 1px dashed #a68b3c; font-size: 11px; line-height: 1.7; }
main { padding: 24px; }
.intro { text-align: center; margin-bottom: 26px; }
.eyebrow { color: #42577a; font: bold 10px 'Courier New', monospace; letter-spacing: 2px; }
h1 { font: bold 32px Georgia, 'Times New Roman', serif; margin: 14px 0; color: #142f67; }
h1 em { color: #6c3483; }
.intro p { line-height: 1.7; }
.workspace { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
.input-panel, .result-panel { min-width: 0; padding: 0 18px 20px; background: #f8f8f3; border: 2px ridge #b5bed0; }
.step { display: block; margin: 0 -18px 18px; padding: 8px 12px; background: linear-gradient(#335e9b, #16356b); color: #fff; border-bottom: 2px solid #a8b4ce; font: bold 11px Tahoma, sans-serif; letter-spacing: .5px; }
h2 { font: bold 19px 'Trebuchet MS', Arial, sans-serif; margin: 14px 0 20px; color: #173465; }
label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 8px; text-align: left; }
input { width: 100%; min-width: 0; border: 2px inset #bbb; border-radius: 0; background: white; color: #17213c; font: 13px Arial, sans-serif; padding: 11px 8px; }
.hint { font-size: 11px; line-height: 1.7; color: #46516a; }
button { cursor: pointer; color: #17213c; font: bold 12px Tahoma, sans-serif; background: linear-gradient(#fff, #d0d0d0); border: 2px outset #ddd; border-radius: 0; padding: 10px 12px; }
button:hover { background: #ffffd8; }
button:active { border-style: inset; }
.primary { display: flex; justify-content: space-between; gap: 8px; width: 100%; margin-top: 18px; }
.examples { margin-top: 24px; }
.examples > span { font: bold 10px 'Courier New', monospace; color: #4c5871; }
.examples > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.examples button { font-size: 10px; padding: 7px; }
.coverage { display: flex; align-items: start; gap: 10px; border-top: 1px dashed #9ca9bd; margin-top: 24px; padding-top: 14px; }
.coverage > span { color: #77510c; margin-top: 10px; }
.coverage p { font-size: 11px; line-height: 1.7; margin: 4px 0; }
.result-panel { text-align: center; background: #e9eef8; }
.result-panel h2 { margin-bottom: 8px; }
.result-caption { font: italic 12px Georgia, serif; margin-bottom: 20px; }
.qr-frame { width: 220px; max-width: 100%; padding: 12px; background: white; border: 2px inset #ccc; margin: 0 auto 18px; }
canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.download { width: 100%; margin-bottom: 22px; }
.download span { font-size: 9px; margin-left: 8px; }
.link-row { display: flex; gap: 6px; }
.link-row input { font-size: 11px; }
.link-row button { font-size: 11px; padding: 8px; }
#open { display: inline-block; margin-top: 16px; font-size: 12px; }
.error { color: #9d1717; font-weight: bold; line-height: 1.6; }
.status { text-align: center; font: 11px 'Courier New', monospace; min-height: 15px; line-height: 1.7; margin-top: 20px; overflow-wrap: anywhere; }
.bottom-note { text-align: center; font-size: 11px; line-height: 1.8; margin-top: 16px; }
.web-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 0 16px 22px; }
.web-badges span { min-width: 100px; padding: 5px 8px; text-align: center; font: 9px/1.4 'Courier New', monospace; color: white; background: #173465; border: 3px ridge #bac9db; }
.web-badges span:nth-child(2) { background: #655089; }
.web-badges span:nth-child(3) { background: #365c42; }
footer { display: flex; align-items: start; gap: 25px; padding: 20px 24px; background: #d9deea; border-top: 2px groove white; font-size: 11px; line-height: 1.7; }
.footer-brand { flex-shrink: 0; font-weight: bold; color: #173465; }
.footer-details { min-width: 0; }
footer p { margin: 0; overflow-wrap: anywhere; }
.footer-disclosure { margin-top: 9px; }
@media (max-width: 700px) {
  body { padding: 12px 8px; }
  main { padding: 20px 12px; }
  header { padding: 22px 10px; }
  .brand { gap: 8px; }
  .brand-name { letter-spacing: 0; }
  .brand-icon { font-size: 25px; padding: 0 5px; }
  .welcome { margin: 12px 12px 0; }
  nav span { padding: 0 5px; }
  nav { font-size: 11px; }
  .workspace { grid-template-columns: 1fr; }
  .desktop { display: none; }
  footer { flex-direction: column; gap: 10px; padding: 18px; }
}

/* Solid colors and block layout remain usable without Grid, Flexbox, or animation. */
header, nav, main, section, footer { display: block; }
[hidden] { display: none; }
a:focus, button:focus, input:focus { outline: 2px solid #c35000; }
.browser-bar { background-color: #14376e; }
.step { background-color: #16356b; }
button { background-color: #dedede; }
.brand-name { font-family: 'Arial Black', Impact, sans-serif; font-size: 36px; font-weight: bold; }
.workspace { display: block; }
.input-panel, .result-panel { margin-bottom: 18px; }
#qr { display: block; width: 100%; height: auto; border: 0; }
.web-badges { display: block; text-align: center; }
.web-badges span { display: inline-block; margin: 4px; }
.footer-details { margin-top: 10px; }
.animation-tools { text-align: center; padding: 12px 16px 0; font: 11px/1.8 'Courier New', monospace; }
.orbit { display: inline-block; color: #77510c; font-size: 22px; animation: orbit 8s linear infinite; }
.brand-icon { display: inline-block; animation: bob 3s ease-in-out infinite; }
.web-badges span:nth-child(2) { animation: badge 4s ease-in-out infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .orbit, .brand-icon, .web-badges span { animation: none; }
}
@supports (display: grid) {
  .workspace { display: grid; }
  .input-panel, .result-panel { margin-bottom: 0; }
}
@media (max-width: 700px) { .brand-name { font-size: 25px; } }

/* Personal-homepage flourishes: no flashing, and never over the QR image. */
.welcome-ticker { overflow: hidden; }
.ticker-text { display: inline-block; animation: welcome-scroll 16s ease-in-out infinite; }
.star-divider { text-align: center; color: #77510c; padding-top: 14px; font-size: 18px; letter-spacing: 8px; }
.star-divider span { display: inline-block; animation: twinkle 4s ease-in-out infinite; }
.star-divider span:nth-child(2n) { animation-delay: -2s; }
.star-divider span:nth-child(3) { animation-delay: -1s; }
.mail-route { margin: 0 24px 18px; padding: 8px 0; overflow: hidden; border-top: 1px dashed #9ca9bd; border-bottom: 1px dashed #9ca9bd; }
.mail-traveler { position: relative; display: inline-block; color: #173465; font-size: 25px; animation: mail-delivery 12s ease-in-out infinite; }
.mail-traveler small { font: bold 10px 'Courier New', monospace; vertical-align: middle; }
.web-badges span:first-child { animation: badge-tilt 5s ease-in-out infinite; }
.web-badges span:nth-child(3) { animation: badge-tilt 5s ease-in-out -2.5s infinite reverse; }
@keyframes welcome-scroll { 0%, 100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } }
@keyframes twinkle { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes mail-delivery { 0%, 100% { left: 0; transform: translateX(0); } 50% { left: 100%; transform: translateX(-100%); } }
@keyframes badge-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@media (max-width: 700px) { .ticker-text { max-width: 84%; } }
@media (prefers-reduced-motion: reduce) {
  .orbit, .brand-icon, .web-badges span, .ticker-text, .star-divider span, .mail-traveler { animation: none; }
}

/* User-supplied animated GIF, kept clear of the generator and QR image. */
.retro-dancer { text-align: center; margin: 0 16px 20px; }
.retro-dancer img { display: block; width: 140px; max-width: 100%; height: auto; margin: 0 auto; border: 0; image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) {
  .retro-dancer { display: none; }
}

/* Keep the intro and dancer centered as a pair; table layout supports older browsers. */
.intro-layout { display: table; table-layout: fixed; width: 100%; margin-bottom: 26px; }
.intro-copy { display: table-cell; vertical-align: middle; padding-right: 20px; }
.intro-layout .intro { margin: 24px 0 0; }
.intro-layout .animation-tools { padding: 0; }
.intro-layout .retro-dancer { display: table-cell; width: 190px; vertical-align: middle; margin: 0; }
.intro-layout .retro-dancer img { width: 170px; }
@media (max-width: 700px) {
  .intro-layout, .intro-copy { display: block; }
  .intro-copy { padding-right: 0; }
  .intro-layout .retro-dancer { display: block; width: auto; margin: 18px auto 0; }
  .intro-layout .retro-dancer img { width: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-layout .retro-dancer { display: none; }
  .intro-copy { padding-right: 0; }
}

/* Locally hosted Comic Neue for the title bar, step labels, and sharing messages. */
.browser-bar > span:first-child,
.step,
.status,
.bottom-note {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
}

/* Use Comic Neue throughout the retro body and its controls. */
body,
button,
input,
.header-note,
.eyebrow,
.result-caption,
.animation-tools,
.examples > span,
.mail-traveler small,
.web-badges span {
  font-family: 'Comic Neue', 'Comic Sans MS', 'Comic Sans', cursive;
}