:root {
    --y2k-black: #000;
    --y2k-lime: #39ff14;
    --y2k-pink: #ff2bd6;
    --y2k-cyan: #00f0ff;
    --y2k-yellow: #fff200;
    --y2k-blue: #1f3cff;
    --y2k-violet: #7a1cff;
    --y2k-silver: #c0c0c0;
    --y2k-body: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
    --y2k-display: "Arial Black", "Arial Bold", Gadget, Impact, "Helvetica Neue", Arial, sans-serif;
    --y2k-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", "Segoe Print", cursive;
    --y2k-serif: "Times New Roman", Times, "Liberation Serif", "Noto Serif", serif;
  }

  * {
    box-sizing: border-box;
  }

  html {
    background: #000;
  }

  /* A starfield that twinkles: two tiled star layers drift at different speeds. */
  body {
    margin: 0;
    min-height: 100vh;
    color: #fff;
    font: 13px/1.45 var(--y2k-body);
    background-color: #000;
    background-image:
      radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 120px 80px, #9ff 50%, transparent 51%),
      radial-gradient(2px 2px at 60px 150px, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 170px 20px, #f9f 50%, transparent 51%),
      radial-gradient(1px 1px at 90px 110px, #ff9 50%, transparent 51%),
      radial-gradient(1px 1px at 40px 190px, #fff 50%, transparent 51%);
    background-size: 200px 200px;
    animation: y2k-starfield 90s linear infinite;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(2px 2px at 30px 60px, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 230px 140px, #0ff 50%, transparent 51%),
      radial-gradient(2px 2px at 150px 250px, #f0f 50%, transparent 51%),
      radial-gradient(1px 1px at 280px 40px, #fff 50%, transparent 51%);
    background-size: 300px 300px;
    animation: y2k-twinkle 2.4s steps(2) infinite;
  }

  @keyframes y2k-starfield {
    to { background-position: 0 2000px; }
  }

  @keyframes y2k-twinkle {
    50% { opacity: .25; }
  }

  a {
    color: #33ccff;
  }

  a:visited {
    color: #cc66ff;
  }

  a:hover {
    color: var(--y2k-yellow);
    background: var(--y2k-pink);
  }

  /* The page is a fixed 1000-px table of its time, centered on the stars. */
  .y2k-page {
    width: min(1000px, 100%);
    margin: 0 auto;
    padding: 6px;
  }

  /* Top strip: a running line and a live clock. */
  .y2k-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 6px;
    border: 2px ridge var(--y2k-silver);
    background: linear-gradient(#000080, #1084d0);
    font: bold 11px/1.2 var(--y2k-body);
  }

  .y2k-marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  .y2k-marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: y2k-marquee 18s linear infinite;
  }

  .y2k-marquee b:nth-child(odd) {
    color: var(--y2k-yellow);
  }

  .y2k-marquee b:nth-child(even) {
    color: var(--y2k-lime);
  }

  @keyframes y2k-marquee {
    to { transform: translateX(-100%); }
  }

  .y2k-clock {
    color: var(--y2k-lime);
    white-space: nowrap;
  }

  /* Header: WordArt title with chrome stroke, extruded shadow, and a hue that never stops. */
  .y2k-header {
    position: relative;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 12px 8px;
    border: 3px double var(--y2k-pink);
    background:
      repeating-linear-gradient(45deg, rgba(122, 28, 255, .25) 0 10px, transparent 10px 20px),
      radial-gradient(ellipse at center, #2a0050, #000 70%);
  }

  .y2k-wordart {
    margin: 0;
    text-align: center;
    font: 900 clamp(34px, 7vw, 66px)/.95 var(--y2k-display);
    letter-spacing: -1px;
    text-transform: uppercase;
  }

  .y2k-wordart span {
    display: block;
    background: linear-gradient(180deg, #fff 0%, var(--y2k-yellow) 30%, var(--y2k-pink) 55%, var(--y2k-violet) 80%, var(--y2k-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
    filter: drop-shadow(3px 3px 0 #000) drop-shadow(5px 5px 0 var(--y2k-blue));
    animation: y2k-hue 4s linear infinite, y2k-wobble 2.2s ease-in-out infinite;
  }

  .y2k-wordart span + span {
    margin-top: 4px;
    font-size: .52em;
    letter-spacing: 1px;
    text-transform: none;
    animation-delay: 0s, -1.1s;
  }

  @keyframes y2k-hue {
    to { filter: drop-shadow(3px 3px 0 #000) drop-shadow(5px 5px 0 var(--y2k-blue)) hue-rotate(360deg); }
  }

  @keyframes y2k-wobble {
    50% { transform: skewX(-6deg) scale(1.03); }
  }

  .y2k-tagline {
    margin: 8px 0 0;
    text-align: center;
    color: var(--y2k-yellow);
    font: bold italic 14px/1.3 var(--y2k-comic);
    text-shadow: 0 0 6px var(--y2k-pink);
  }

  /* A spinning starburst sticker and a spinning globe flank the title. */
  .y2k-burst {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 86% 52%, 100% 68%, 79% 72%, 82% 94%, 61% 84%, 50% 100%, 39% 84%, 18% 94%, 21% 72%, 0 68%, 14% 52%, 0 36%, 20% 30%, 18% 8%, 39% 18%);
    background: radial-gradient(circle, var(--y2k-yellow) 40%, #ff8a00 100%);
    color: #e00000;
    font: 900 18px/1 var(--y2k-display);
    text-align: center;
    animation: y2k-spin 6s linear infinite;
    cursor: pointer;
  }

  .y2k-burst:hover {
    animation-duration: .8s;
  }

  @keyframes y2k-spin {
    to { transform: rotate(360deg); }
  }

  .y2k-globe {
    justify-self: center;
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9), transparent 20%),
      radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 40, .75) 72%),
      radial-gradient(ellipse 14px 20px at 20px 30px, #2fd36b 90%, transparent),
      radial-gradient(ellipse 22px 12px at 70px 64px, #2fd36b 90%, transparent),
      radial-gradient(ellipse 10px 16px at 110px 26px, #3be07a 90%, transparent),
      radial-gradient(ellipse 18px 10px at 40px 78px, #1fb456 90%, transparent),
      radial-gradient(ellipse 12px 9px at 130px 70px, #2fd36b 90%, transparent),
      #0b4fd8;
    background-size: 100% 100%, 100% 100%, 160px 100%, 160px 100%, 160px 100%, 160px 100%, 160px 100%;
    box-shadow: 0 0 22px var(--y2k-cyan), inset -10px -10px 20px rgba(0, 0, 0, .55);
    animation: y2k-globe 4s linear infinite;
  }

  @keyframes y2k-globe {
    to { background-position: 0 0, 0 0, 160px 0, 160px 0, 160px 0, 160px 0, 160px 0; }
  }

  /* Three columns: navigation, content, sidebar. */
  .y2k-layout {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 200px;
    gap: 6px;
    margin-top: 6px;
  }

  .y2k-box {
    border: 2px solid var(--y2k-blue);
    background: rgba(0, 0, 20, .82);
    box-shadow: 0 0 10px rgba(31, 60, 255, .6);
  }

  .y2k-box + .y2k-box {
    margin-top: 6px;
  }

  .y2k-box h2 {
    margin: 0;
    padding: 3px 6px;
    background: linear-gradient(90deg, var(--y2k-blue), var(--y2k-violet), var(--y2k-blue));
    background-size: 200% 100%;
    color: var(--y2k-yellow);
    font: bold 12px/1.3 var(--y2k-body);
    text-transform: uppercase;
    animation: y2k-shine 3s linear infinite;
  }

  @keyframes y2k-shine {
    to { background-position: 200% 0; }
  }

  .y2k-box-body {
    padding: 8px;
  }

  /* Bevelled navigation buttons that glow, press in, and beep. */
  .y2k-nav {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 6px;
    list-style: none;
  }

  .y2k-nav a {
    display: block;
    padding: 5px 8px;
    border: 3px outset #6c8cff;
    background: linear-gradient(#3355ff, #1022aa);
    color: #fff;
    font: bold 12px/1.2 var(--y2k-body);
    text-decoration: none;
  }

  .y2k-nav a::before {
    content: "► ";
    color: var(--y2k-yellow);
  }

  .y2k-nav a:hover {
    background: linear-gradient(var(--y2k-pink), #8a0070);
    box-shadow: 0 0 12px var(--y2k-pink);
    color: var(--y2k-yellow);
  }

  .y2k-nav a:hover::before {
    animation: y2k-blink .4s steps(1) infinite;
  }

  .y2k-nav a:active {
    border-style: inset;
  }

  @keyframes y2k-blink {
    50% { visibility: hidden; }
  }

  .y2k-new {
    display: inline-block;
    margin-left: 4px;
    padding: 0 3px;
    background: #f00;
    color: var(--y2k-yellow);
    font: bold 9px/1.4 var(--y2k-body);
    animation: y2k-blink .8s steps(1) infinite;
  }

  /* Under construction: a moving caution stripe with a turning gear. */
  .y2k-construction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    border: 2px solid #000;
    background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #000 14px 28px);
    background-size: 40px 40px;
    animation: y2k-stripes 1s linear infinite;
  }

  .y2k-construction strong {
    padding: 2px 8px;
    background: #000;
    color: var(--y2k-yellow);
    font: bold 12px/1.3 var(--y2k-body);
  }

  .y2k-construction svg {
    width: 26px;
    height: 26px;
    animation: y2k-spin 2.5s linear infinite;
  }

  @keyframes y2k-stripes {
    to { background-position: 40px 0; }
  }

  /* Welcome: a portrait in a marching-ants frame beside a rainbow greeting. */
  .y2k-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 10px;
    align-items: start;
  }

  .y2k-hello {
    margin: 0 0 6px;
    font: bold 22px/1.1 var(--y2k-comic);
    background: linear-gradient(90deg, #f00, #ff8000, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: y2k-shine 2s linear infinite;
  }

  .y2k-list {
    margin: 6px 0;
    padding: 0;
    list-style: none;
  }

  .y2k-list li::before {
    content: "★ ";
    color: var(--y2k-yellow);
  }

  .y2k-frame {
    position: relative;
    padding: 6px;
    background:
      linear-gradient(90deg, var(--y2k-lime) 50%, transparent 50%) 0 0 / 12px 3px repeat-x,
      linear-gradient(90deg, var(--y2k-lime) 50%, transparent 50%) 0 100% / 12px 3px repeat-x,
      linear-gradient(0deg, var(--y2k-lime) 50%, transparent 50%) 0 0 / 3px 12px repeat-y,
      linear-gradient(0deg, var(--y2k-lime) 50%, transparent 50%) 100% 0 / 3px 12px repeat-y,
      #000;
    animation: y2k-ants .6s linear infinite;
    transition: transform .2s;
  }

  .y2k-frame:hover {
    transform: scale(1.04) rotate(-1deg);
  }

  .y2k-frame svg {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
  }

  .y2k-frame figcaption {
    margin-top: 4px;
    color: var(--y2k-cyan);
    font: 11px/1.2 var(--y2k-comic);
    text-align: center;
  }

  @keyframes y2k-ants {
    to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px, 0 0; }
  }

  /* A glitter word: a moving sparkle pattern clipped to the letters. */
  .y2k-glitter {
    background:
      radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 7px 7px,
      linear-gradient(90deg, var(--y2k-pink), var(--y2k-yellow), var(--y2k-cyan), var(--y2k-pink));
    background-size: 7px 7px, 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    animation: y2k-glitter 1.2s steps(4) infinite;
  }

  @keyframes y2k-glitter {
    to { background-position: 7px 7px, 300% 0; }
  }

  .y2k-hr {
    height: 4px;
    margin: 10px 0;
    border: 0;
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    background-size: 200% 100%;
    animation: y2k-shine 1.5s linear infinite;
  }

  /* Photo album: thumbnails in raised frames; a click opens one large. */
  .y2k-album {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .y2k-album button {
    padding: 3px;
    border: 3px outset var(--y2k-silver);
    background: var(--y2k-silver);
    cursor: pointer;
  }

  .y2k-album button:hover {
    border-color: var(--y2k-pink);
    box-shadow: 0 0 10px var(--y2k-pink);
  }

  .y2k-album svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .y2k-lightbox {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: none;
    place-items: center;
    background: rgba(0, 0, 0, .85);
    cursor: pointer;
  }

  .y2k-lightbox.is-open {
    display: grid;
  }

  .y2k-lightbox figure {
    width: min(480px, 90vw);
    margin: 0;
    padding: 8px;
    border: 4px ridge var(--y2k-silver);
    background: var(--y2k-silver);
    animation: y2k-zoom .3s cubic-bezier(.2, 1.4, .4, 1);
  }

  .y2k-lightbox svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .y2k-lightbox figcaption {
    padding-top: 6px;
    color: #000;
    font: bold 13px/1.2 var(--y2k-comic);
    text-align: center;
  }

  @keyframes y2k-zoom {
    from { transform: scale(.2) rotate(-12deg); }
  }

  /* Winamp-style player: scrolling title, dancing bars, a tune made by the browser. */
  .y2k-player {
    border: 2px outset #8a8a8a;
    background: linear-gradient(#3a3a4a, #1b1b26);
    font: 11px/1.2 var(--y2k-body);
  }

  .y2k-player-title {
    padding: 2px 6px;
    background: linear-gradient(90deg, #ffb000, #5a3a00);
    color: #000;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .y2k-player-screen {
    display: flex;
    gap: 6px;
    align-items: end;
    margin: 6px;
    padding: 4px;
    height: 44px;
    border: 2px inset #555;
    background: #000;
  }

  .y2k-bars {
    display: flex;
    gap: 2px;
    align-items: end;
    height: 100%;
  }

  .y2k-bars i {
    width: 4px;
    height: 20%;
    background: linear-gradient(0deg, var(--y2k-lime), var(--y2k-yellow), #f00);
  }

  .y2k-player.is-playing .y2k-bars i {
    animation: y2k-eq .5s ease-in-out infinite alternate;
  }

  .y2k-bars i:nth-child(2n) { animation-delay: -.2s; }
  .y2k-bars i:nth-child(3n) { animation-delay: -.35s; animation-duration: .38s; }
  .y2k-bars i:nth-child(5n) { animation-delay: -.1s; animation-duration: .6s; }

  @keyframes y2k-eq {
    from { height: 10%; }
    to { height: 100%; }
  }

  .y2k-track {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--y2k-lime);
    font: 12px/1 "Courier New", monospace;
    white-space: nowrap;
  }

  .y2k-track span {
    display: inline-block;
    animation: y2k-marquee 9s linear infinite;
    padding-left: 100%;
  }

  .y2k-player-controls {
    display: flex;
    gap: 3px;
    padding: 0 6px 6px;
  }

  .y2k-player-controls button {
    flex: 1;
    padding: 2px 0;
    border: 2px outset #aaa;
    background: linear-gradient(#ddd, #888);
    font: bold 11px/1.2 var(--y2k-body);
    cursor: pointer;
  }

  .y2k-player-controls button:active {
    border-style: inset;
  }

  /* Hit counter: odometer digits that roll to the visitor's number. */
  .y2k-counter {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 2px inset #666;
    background: #111;
  }

  .y2k-counter b {
    display: block;
    width: 16px;
    height: 22px;
    overflow: hidden;
    background: linear-gradient(#000, #222 50%, #000 50%, #222);
    color: var(--y2k-lime);
    font: bold 18px/22px "Courier New", monospace;
    text-align: center;
    text-shadow: 0 0 6px var(--y2k-lime);
  }

  .y2k-counter b span {
    display: block;
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
  }

  /* Guestbook: a real form above a table of entries. */
  .y2k-guestbook form {
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 2px dashed var(--y2k-pink);
    background: rgba(255, 43, 214, .08);
  }

  .y2k-guestbook label {
    display: grid;
    gap: 2px;
    color: var(--y2k-cyan);
    font: bold 11px/1.2 var(--y2k-body);
  }

  .y2k-guestbook input,
  .y2k-guestbook textarea {
    width: 100%;
    padding: 4px;
    border: 2px inset #aaa;
    background: #fff;
    color: #000;
    font: 13px/1.3 var(--y2k-comic);
  }

  .y2k-smileys {
    display: flex;
    gap: 6px;
    font-size: 18px;
  }

  .y2k-smileys button {
    padding: 0 4px;
    border: 2px outset #ffe14d;
    background: #ffd400;
    color: #000;
    font: bold 13px/1.4 var(--y2k-comic);
    cursor: pointer;
  }

  .y2k-smileys button:hover {
    transform: scale(1.4);
  }

  .y2k-button {
    justify-self: start;
    padding: 4px 16px;
    border: 3px outset #ff9ce9;
    background: linear-gradient(#ff5ae0, #a3008a);
    color: #fff;
    font: bold 13px/1.2 var(--y2k-body);
    text-shadow: 1px 1px 0 #000;
    cursor: pointer;
  }

  .y2k-button:hover {
    box-shadow: 0 0 14px var(--y2k-pink);
  }

  .y2k-button:active {
    border-style: inset;
  }

  .y2k-entries {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font: 12px/1.35 var(--y2k-comic);
  }

  .y2k-entries td {
    padding: 5px 6px;
    border: 1px solid #333399;
    vertical-align: top;
  }

  .y2k-entries tr:nth-child(odd) td {
    background: rgba(51, 51, 153, .35);
  }

  .y2k-entries .y2k-nick {
    width: 30%;
    color: var(--y2k-yellow);
    font-weight: bold;
  }

  .y2k-entries small {
    display: block;
    color: #8f8fff;
    font-weight: normal;
  }

  /* Poll: radio answers turn into growing result bars. */
  .y2k-poll label {
    display: block;
    margin: 2px 0;
    cursor: pointer;
  }

  .y2k-poll-bar {
    height: 10px;
    margin: 1px 0 5px;
    border: 1px solid #fff;
    background: #000;
  }

  .y2k-poll-bar i {
    display: block;
    width: 0;
    height: 100%;
    background: repeating-linear-gradient(90deg, var(--y2k-lime) 0 4px, #0a0 4px 6px);
    transition: width 1s ease-out;
  }

  /* 88×31 badges and blinkies drawn in CSS. */
  .y2k-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .y2k-badge {
    display: grid;
    place-items: center;
    width: 88px;
    height: 31px;
    padding: 1px;
    border: 1px solid #000;
    font: bold 8px/1.05 var(--y2k-body);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  .y2k-badge:nth-child(1) { background: linear-gradient(#003, #06c); color: #fff; }
  .y2k-badge:nth-child(2) { background: #fff; color: #00f; border-color: #00f; }
  .y2k-badge:nth-child(3) { background: linear-gradient(#0a0, #050); color: var(--y2k-yellow); }
  .y2k-badge:nth-child(4) { background: linear-gradient(#ff0, #f80); color: #c00; }
  .y2k-badge:nth-child(5) { background: #000; color: var(--y2k-pink); border-color: var(--y2k-pink); }
  .y2k-badge:nth-child(6) { background: linear-gradient(90deg, #f0f, #0ff); color: #000; }

  .y2k-blinkie {
    display: block;
    width: 150px;
    margin: 4px auto;
    padding: 2px;
    border: 1px solid #fff;
    font: bold 10px/1.2 var(--y2k-body);
    text-align: center;
    animation: y2k-blinkie 1s steps(1) infinite;
  }

  @keyframes y2k-blinkie {
    0% { background: var(--y2k-pink); color: #fff; }
    50% { background: #fff; color: var(--y2k-pink); }
  }

  .y2k-webring {
    text-align: center;
    font: bold 11px/1.4 var(--y2k-body);
  }

  .y2k-online {
    color: var(--y2k-lime);
    font-weight: bold;
  }

  .y2k-online::before {
    content: "● ";
    animation: y2k-blink 1s steps(1) infinite;
  }

  /* A pixel cat that jumps and meows when petted. */
  .y2k-pet {
    position: relative;
    display: grid;
    justify-items: center;
    cursor: pointer;
  }

  .y2k-pet svg {
    width: 96px;
    height: auto;
    image-rendering: pixelated;
  }

  .y2k-pet.is-jumping svg {
    animation: y2k-jump .45s ease-out;
  }

  .y2k-bubble {
    position: absolute;
    top: -8px;
    right: 6px;
    padding: 2px 6px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font: bold 12px/1.2 var(--y2k-comic);
    opacity: 0;
    transition: opacity .2s;
  }

  .y2k-pet.is-jumping .y2k-bubble {
    opacity: 1;
  }

  @keyframes y2k-jump {
    40% { transform: translateY(-22px) rotate(-8deg); }
  }

  /* Footer: the era's fine print and a way back up. */
  .y2k-footer {
    margin-top: 6px;
    padding: 8px;
    border: 2px ridge var(--y2k-silver);
    background: #000080;
    font: 10px/1.5 var(--y2k-body);
    text-align: center;
  }

  /* A Windows XP style message window that can be dragged and closed. */
  /* It arrives at the bottom left: the platform's badge holds the bottom right corner of a live site. */
  .y2k-window {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 30;
    width: 260px;
    border: 3px solid #0831d9;
    border-radius: 8px 8px 0 0;
    background: #ece9d8;
    color: #000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
    font: 11px/1.35 Tahoma, Verdana, sans-serif;
    transform: translateY(140%);
    transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
  }

  .y2k-window.is-open {
    transform: none;
  }

  .y2k-window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 8px;
    background: linear-gradient(#0a5bff, #0831d9 40%, #0a3ac8);
    color: #fff;
    font-weight: bold;
    cursor: move;
    user-select: none;
  }

  .y2k-window-bar span {
    flex: 1;
  }

  .y2k-window-bar button {
    width: 21px;
    height: 21px;
    border: 1px solid #fff;
    border-radius: 3px;
    background: linear-gradient(#e86a4a, #c0391c);
    color: #fff;
    font: bold 12px/1 Tahoma, sans-serif;
    cursor: pointer;
  }

  .y2k-window-body {
    display: flex;
    gap: 8px;
    padding: 10px;
  }

  .y2k-window-body svg {
    flex: none;
    width: 32px;
    height: 32px;
  }

  /* Sparkles that follow the pointer and burst where it clicks. */
  .y2k-spark {
    position: fixed;
    z-index: 40;
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
    animation: y2k-spark .9s ease-out forwards;
  }

  @keyframes y2k-spark {
    to { transform: translate(var(--dx, 0), var(--dy, 30px)) scale(.2) rotate(180deg); opacity: 0; }
  }

  .y2k-toast {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 50;
    padding: 10px 18px;
    border: 3px outset var(--y2k-yellow);
    background: #f00;
    color: var(--y2k-yellow);
    font: bold 16px/1.2 var(--y2k-comic);
    transform: translate(-50%, -50%) scale(0);
    transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
  }

  .y2k-toast.is-open {
    transform: translate(-50%, -50%) scale(1);
  }

  /* A phone keeps the era: the columns stack, the navigation becomes a row of buttons. */
  @media (max-width: 760px) {
    body {
      font-size: 14px;
    }

    .y2k-header {
      grid-template-columns: 64px minmax(0, 1fr) 64px;
      padding: 10px 4px;
    }

    .y2k-burst {
      width: 64px;
      height: 64px;
      font-size: 11px;
    }

    .y2k-globe {
      width: 56px;
      height: 56px;
    }

    .y2k-layout,
    .y2k-welcome {
      grid-template-columns: minmax(0, 1fr);
    }

    .y2k-layout > aside {
      display: contents;
    }

    .y2k-layout > main {
      order: 1;
    }

    .y2k-layout > aside > :not(nav) {
      order: 2;
      margin-top: 0;
    }

    .y2k-frame {
      justify-self: center;
      width: min(220px, 100%);
    }

    .y2k-nav {
      grid-template-columns: repeat(2, 1fr);
    }

    .y2k-album {
      grid-template-columns: repeat(2, 1fr);
    }

    .y2k-window {
      top: 12px;
      right: 12px;
      bottom: auto;
      left: 12px;
      width: auto;
      transform: translateY(-160%);
    }

    .y2k-window.is-open {
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
    }
  }