/* Ali's Homepage: styles */
  body {
    margin: 0;
    padding: 12px;
    background: #808080;
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 12px;
    color: #000000;
  }
  a:link    { color: #0000EE; font-weight: bold; }
  a:visited { color: #551A8B; font-weight: bold; }
  a:hover   { color: #FF0000; font-weight: bold; }
  a:active  { color: #FF0000; }

  #wrapper {
    max-width: 780px;
    margin: 0 auto;
    background: #C0C0C0;
    border: 2px outset #FFFFFF;
  }
  #header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    background: #404040;
    background: linear-gradient(#5A5A5A, #2E2E2E);
    color: #FFFFFF;
    padding: 14px 16px;
    border-bottom: 2px solid #000000;
  }
  #header h1 {
    margin: 0;
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 26px;
    letter-spacing: 1px;
  }
  #header .tagline { font-size: 11px; color: #D0D0D0; }

  #navbar {
    background: #A0A0A0;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #606060;
    padding: 4px 8px;
    font-size: 11px;
  }
  #navbar a { margin: 0 4px; }

  table.layout { width: 100%; border-collapse: collapse; }
  td.sidebar {
    width: 170px;
    vertical-align: top;
    background: #D4D0C8;
    border-right: 1px solid #808080;
    padding: 8px;
  }
  td.content { vertical-align: top; padding: 10px 12px; background: #E8E8E8; }

  .box {
    background: #F0F0F0;
    border: 1px solid #808080;
    margin-bottom: 12px;
  }
  .box .title {
    background: #6B6B6B;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 6px;
    border-bottom: 1px solid #404040;
  }
  .box .inner { padding: 8px; line-height: 1.5; }

  .side .title { background: #505050; }
  .side ul { margin: 0; padding-left: 16px; }
  .side li { margin-bottom: 3px; }

  h2 {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    color: #333333;
    border-bottom: 1px dashed #808080;
    padding-bottom: 2px;
    margin: 0 0 8px 0;
  }

  /* 90s photo: white print border, faded colours, grain, vignette, date stamp */
  .photo {
    float: right;
    position: relative;
    width: 120px;
    margin: 0 0 8px 12px;
    padding: 6px 6px 22px 6px;
    background: #F4F1EA;
    border: 1px solid #9A9A9A;
    box-shadow: 3px 3px 0 #707070;
    transform: rotate(2deg);
  }
  .photo img {
    display: block;
    width: 120px;
    height: 140px;
    object-fit: cover;
    object-position: center 30%;
  }
  .photo img {
    filter: sepia(0.45) saturate(1.4) contrast(1.15) brightness(1.05) hue-rotate(-10deg) blur(0.4px);
    image-rendering: pixelated;
  }
  /* grain + vignette over the picture */
  .photo::after {
    content: "";
    position: absolute;
    left: 6px; top: 6px;
    width: 120px; height: 140px;
    pointer-events: none;
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(40,20,0,0.45) 100%),
      repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, rgba(255,255,255,0.04) 1px 2px);
    mix-blend-mode: multiply;
  }
  .photo .caption {
    position: absolute;
    left: 0; right: 0; bottom: 4px;
    text-align: center;
    font-family: "Comic Sans MS", "Marker Felt", cursive;
    font-size: 11px;
    color: #333366;
  }

  table.facts { border-collapse: collapse; width: 100%; font-size: 11px; }
  table.facts td { border: 1px solid #A0A0A0; padding: 3px 6px; }
  table.facts td.k { background: #D8D8D8; font-weight: bold; width: 35%; }

  .button {
    display: inline-block;
    background: #C0C0C0;
    border: 2px outset #FFFFFF;
    padding: 2px 10px;
    font-size: 11px;
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    font-family: Tahoma, Verdana, sans-serif;
  }
  .button:active { border-style: inset; }

  .counter {
    display: inline-block;
    background: #000000;
    color: #33FF33;
    font-family: "Courier New", monospace;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 2px 5px;
    border: 2px inset #808080;
  }

  .badge {
    display: inline-block;
    width: 88px;
    height: 31px;
    line-height: 29px;
    font-size: 9px;
    text-align: center;
    border: 1px solid #000000;
    margin: 2px;
    font-weight: bold;
    box-sizing: border-box;
  }

  .ticker {
    background: #000000;
    color: #FFFF66;
    font-family: "Courier New", monospace;
    font-size: 11px;
    padding: 3px 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .ticker span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 50s linear infinite;
  }
  @keyframes scroll { to { transform: translateX(-100%); } }

  .new { color: #FF0000; font-weight: bold; font-size: 10px; }
  .small { font-size: 10px; color: #444444; }

  #footer {
    background: #A0A0A0;
    border-top: 2px solid #606060;
    text-align: center;
    padding: 8px;
    font-size: 10px;
  }

  hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #FFFFFF; }

  /* Small screens: stack the sidebar above the content */
  @media (max-width: 600px) {
    td.sidebar, td.content { display: block; width: auto; }
    td.sidebar { border-right: 0; border-bottom: 1px solid #808080; }
    body { padding: 0; }
  }

  /* ===== Winamp player ===== */
  .winamp {
    background: linear-gradient(#3A3A4A, #23232E);
    border: 2px outset #6A6A7A;
    padding: 0 4px 4px 4px;
    margin-bottom: 12px;
    font-family: Tahoma, Verdana, sans-serif;
    color: #C8C8D8;
  }
  .wa-titlebar {
    display: flex; justify-content: space-between;
    font-size: 9px; font-weight: bold; letter-spacing: 2px;
    color: #E0E0F0;
    background: repeating-linear-gradient(0deg, #4A4A6A 0 1px, #2A2A40 1px 2px);
    margin: 0 -4px 4px -4px; padding: 2px 4px;
  }
  .wa-dots { letter-spacing: 1px; color: #A0A0B0; }
  .wa-display {
    background: #000000;
    border: 2px inset #555566;
    padding: 4px;
    position: relative;
    height: 52px;
  }
  .wa-time {
    font-family: "Courier New", monospace;
    font-size: 18px; font-weight: bold;
    color: #00E000; text-shadow: 0 0 3px #00A000;
    line-height: 18px;
  }
  .wa-viz { position: absolute; right: 4px; top: 4px; height: 16px; display: flex; align-items: flex-end; gap: 1px; }
  .wa-viz i { display: block; width: 4px; height: 2px; background: linear-gradient(#FF3000, #FFD000 40%, #00D000); background-size: 4px 16px; background-position: bottom; }
  .wa-marquee { overflow: hidden; white-space: nowrap; margin-top: 4px; }
  .wa-marquee span {
    display: inline-block;
    font-family: "Courier New", monospace; font-size: 10px; color: #00E000;
    padding-left: 100%;
    animation: scroll 9s linear infinite;
  }
  .wa-info { font-size: 8px; color: #00A000; margin-top: 3px; }
  .wa-info span { color: #00E000; }
  .wa-info b { float: right; color: #00E000; text-transform: uppercase; }
  .wa-vol { width: 100%; margin: 4px 0 2px 0; height: 10px; accent-color: #D0A000; }
  .wa-progress { height: 6px; background: #111118; border: 1px inset #555566; margin-bottom: 4px; }
  .wa-progress div { height: 100%; width: 0; background: #D0A000; }
  .wa-buttons { display: flex; gap: 1px; }
  .wa-buttons button {
    flex: 1; padding: 2px 0;
    font-size: 8px; font-weight: bold;
    background: linear-gradient(#9A9AAA, #5A5A6A);
    color: #101018;
    border: 1px outset #C0C0D0;
    cursor: pointer;
  }
  .wa-buttons button:active { border-style: inset; }
  .wa-pl-title {
    font-size: 8px; font-weight: bold; letter-spacing: 1px; text-align: center;
    color: #E0E0F0; margin-top: 5px;
    background: repeating-linear-gradient(0deg, #4A4A6A 0 1px, #2A2A40 1px 2px);
  }
  .wa-playlist {
    background: #000000; border: 2px inset #555566;
    margin: 0; padding: 3px 3px 3px 20px;
    font-family: Arial, sans-serif; font-size: 9px;
    color: #00E000;
  }
  .wa-playlist li { cursor: pointer; padding: 1px 0; }
  .wa-playlist li:hover { color: #FFFFFF; }
  .wa-playlist li.on { color: #FFFFFF; background: #0000C0; }
  .wa-note { font-size: 8px; color: #8888A0; text-align: right; margin-top: 2px; }

  .wa-playlist { max-height: 118px; overflow-y: auto; }

  /* ===== Extra retro touches (motion kept minimal) ===== */
  body {
    background-color: #808080;
    background-image:
      linear-gradient(45deg, #787878 25%, transparent 25%, transparent 75%, #787878 75%),
      linear-gradient(45deg, #787878 25%, transparent 25%, transparent 75%, #787878 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
  }
  .blink { animation: blink 1.4s steps(1) infinite; }
  @keyframes blink { 50% { visibility: hidden; } }

  #navbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }

  .construction {
    height: 14px;
    border: 1px solid #000000;
    background: repeating-linear-gradient(-45deg, #FFCC00 0 10px, #222222 10px 20px);
    background-size: 28px 28px;
    animation: stripes 2.5s linear infinite;
    margin: 4px 0;
  }
  @keyframes stripes { to { background-position: 28px 0; } }
  .construction-label { font-size: 10px; font-weight: bold; text-align: center; }

  .clock {
    font-family: "Courier New", monospace;
    font-size: 15px; font-weight: bold;
    background: #D8E0D0; color: #203020;
    border: 2px inset #A0A0A0;
    padding: 2px 4px; text-align: center;
  }

  .webring { text-align: center; font-size: 11px; }
  .webring .ring-name { display: block; font-weight: bold; color: #333333; margin-bottom: 3px; }

  .mail-icon { display: inline-block; animation: bob 2.4s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-2px); } }

  .totop {
    position: fixed; right: 10px; bottom: 10px;
    font-size: 10px; text-decoration: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .blink, .construction, .mail-icon, .ticker span, .wa-marquee span { animation: none !important; }
    .ticker span, .wa-marquee span { padding-left: 0; }
  }

  /* ===== Social buttons (88x31 style) ===== */
  .social { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .social a {
    display: block; width: 120px; height: 31px; line-height: 27px;
    text-align: center; text-decoration: none;
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; font-weight: bold;
    color: #FFFFFF; border: 2px outset #E0E0E0; box-sizing: border-box;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  }
  .social a:active { border-style: inset; }
  .social a:hover { filter: brightness(1.12); }
  .social .ig { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
  .social .li { background: linear-gradient(#1A7BC4, #0A5A99); }
  .social .ico {
    display: inline-block; width: 16px; height: 16px; line-height: 16px;
    margin-right: 5px; vertical-align: -3px;
    background: #FFFFFF; font-size: 10px; border-radius: 3px;
  }
  .social .ig .ico { color: #DD2A7B; }
  .social .li .ico { color: #0A66C2; font-family: Arial, sans-serif; }

  .movies { margin: 0; padding-left: 16px; }
  .movies li { margin-bottom: 4px; }

  /* ===== Arcade Corner: mini cabinet ===== */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .arcade-cabinet {
    --arc-font: "Press Start 2P", "Courier New", monospace;
    max-width: 380px;
    margin: 6px auto 4px auto;
    padding: 10px 12px 12px 12px;
    background: linear-gradient(#45455A, #24242F 60%, #1A1A22);
    border: 3px outset #8A8A9A;
    border-radius: 16px 16px 6px 6px;
    box-shadow: 4px 4px 0 #606060;
    font-family: var(--arc-font);
    color: #D8D8E8;
  }
  .arcade-marquee {
    position: relative;
    padding: 9px 4px;
    background: linear-gradient(#2A0F3A, #120720);
    border: 2px solid #000000;
    border-radius: 6px 6px 2px 2px;
    text-align: center;
    font-size: 15px;
    letter-spacing: 2px;
    color: #FFE45C;
    text-shadow: 0 0 3px #FFB000, 0 0 9px #FF5A00, 0 0 16px #FF2A6D;
    box-shadow: inset 0 0 14px rgba(255, 120, 0, 0.45), 0 0 12px rgba(255, 170, 0, 0.35);
    animation: marquee-glow 3.2s ease-in-out infinite;
  }
  .arcade-marquee::before, .arcade-marquee::after {
    content: "\2605"; position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: #4DE1FF; text-shadow: 0 0 6px #4DE1FF;
  }
  .arcade-marquee::before { left: 10px; }
  .arcade-marquee::after { right: 10px; }
  @keyframes marquee-glow {
    50% { text-shadow: 0 0 2px #FFB000, 0 0 6px #FF5A00, 0 0 10px #FF2A6D;
          box-shadow: inset 0 0 10px rgba(255, 120, 0, 0.3), 0 0 7px rgba(255, 170, 0, 0.2); }
  }

  .arcade-bezel {
    margin-top: 10px;
    padding: 10px;
    background: #0B0B10;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #34343F, inset 0 0 18px #000000;
  }
  .arcade-hud {
    display: flex; justify-content: space-between; gap: 6px;
    margin-bottom: 7px;
    font-size: 9px; color: #7CFF7C;
    font-variant-numeric: tabular-nums;
  }
  .arcade-hud b { color: #FFFFFF; font-weight: normal; }
  .arcade-hud .arc-name { color: #FFE45C; }

  .arcade-screen-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    background: #071A07;
    border-radius: 8px;
    overflow: hidden;
    outline: none;
    touch-action: none;
    box-shadow: 0 0 14px rgba(80, 255, 120, 0.15);
  }
  .arcade-screen-wrap:focus-visible { box-shadow: 0 0 0 3px #FFE45C, 0 0 14px rgba(255, 228, 92, 0.5); }
  .arcade-screen-wrap canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
  .arcade-screen-wrap::after {   /* CRT scanlines + curved-glass shading */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
  }
  .arcade-overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 14px;
    background: rgba(0, 8, 0, 0.72);
    text-align: center; font-size: 9px; line-height: 1.7; color: #CFFFCF;
  }
  .arcade-overlay[hidden] { display: none; }
  .arcade-overlay h3 {
    margin: 0; font-size: 16px; line-height: 1.3; color: #FFE45C;
    text-shadow: 0 0 6px #FF7A00;
  }
  .arcade-overlay p { margin: 0; }
  .arcade-overlay .big { font-size: 13px; color: #FFFFFF; }
  .arcade-overlay .hot { color: #FF5CA8; animation: blink 1s steps(1) infinite; }
  .arcade-overlay .soon { color: #6F8F6F; font-size: 8px; }
  .arc-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

  .arc-pill {
    font-family: var(--arc-font); font-size: 9px;
    padding: 8px 10px;
    color: #102010; background: #7CFF7C;
    border: 0; border-radius: 4px;
    box-shadow: 0 3px 0 #2E8A2E;
    cursor: pointer;
    transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
  }
  .arc-pill:hover { filter: brightness(1.1); }
  .arc-pill:active { transform: translateY(3px); box-shadow: 0 0 0 #2E8A2E; }
  .arc-pill.alt { background: #C8C8D8; box-shadow: 0 3px 0 #6A6A7A; }
  .arc-pill:focus-visible, .arc-btn:focus-visible, .arc-diff button:focus-visible, .arcade-dpad button:focus-visible {
    outline: 3px solid #FFE45C; outline-offset: 2px;
  }

  .arc-game-list { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 230px; }
  .arc-game {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
    padding: 9px 10px; text-align: left;
    font-family: var(--arc-font); font-size: 11px; color: #FFE45C;
    background: #0F2A0F; border: 2px solid #3E9A3E; border-radius: 4px;
    cursor: pointer;
    transition: transform 0.08s, background 0.15s, border-color 0.15s;
  }
  .arc-game small { font-size: 7px; line-height: 1.6; color: #A8DDA8; }
  .arc-game:hover, .arc-game:focus-visible { background: #164016; border-color: #7CFF7C; outline: none; }
  .arc-game:active { transform: scale(0.97); }

  .arcade-panel {
    margin-top: 10px;
    padding: 10px 8px 8px 8px;
    background: linear-gradient(#2C2C3A, #1C1C26);
    border: 2px solid #0E0E14;
    border-radius: 6px;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
  }
  .arc-diff { display: flex; gap: 0; border: 2px solid #0E0E14; border-radius: 4px; overflow: hidden; }
  .arc-diff[hidden] { display: none; }
  .arc-diff button {
    font-family: var(--arc-font); font-size: 8px;
    padding: 7px 9px;
    color: #C8C8D8; background: #3A3A4C;
    border: 0; border-right: 1px solid #0E0E14;
    cursor: pointer; transition: background 0.15s, color 0.15s;
  }
  .arc-diff button:last-child { border-right: 0; }
  .arc-diff button[aria-pressed="true"] { background: #FFE45C; color: #201A00; }
  .arc-diff button:disabled { opacity: 0.45; cursor: not-allowed; }

  .arc-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
  .arc-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0; background: none; border: 0; cursor: pointer;
    font-family: var(--arc-font); font-size: 7px; color: #D8D8E8;
  }
  .arc-btn .cap {
    --c: #2ED158; --d: #158A32;
    display: block; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.75) 0 10%, var(--c) 34%, var(--d) 100%);
    box-shadow: 0 5px 0 var(--d), 0 7px 8px rgba(0,0,0,0.55), inset 0 -3px 5px rgba(0,0,0,0.3);
    transition: transform 0.07s, box-shadow 0.07s, filter 0.15s;
  }
  .arc-btn:hover .cap { filter: brightness(1.12) drop-shadow(0 0 5px var(--c)); }
  .arc-btn:active .cap, .arc-btn.pressed .cap {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--d), 0 2px 3px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(0,0,0,0.3);
  }
  .arc-btn:disabled { cursor: not-allowed; opacity: 0.4; }
  .arc-btn:disabled .cap { filter: grayscale(0.6); }
  .arc-btn.yellow .cap { --c: #FFD23F; --d: #B8860B; }
  .arc-btn.red .cap    { --c: #FF4D5E; --d: #A3172A; }
  .arc-btn.blue .cap   { --c: #4DA8FF; --d: #1A5FA8; }
  .arc-btn.grey .cap   { --c: #B8B8C8; --d: #66667A; }
  .arc-btn.blue[aria-pressed="true"] .cap { box-shadow: 0 5px 0 var(--d), 0 0 12px #4DA8FF, inset 0 -3px 5px rgba(0,0,0,0.3); }

  .arcade-dpad {
    display: none;
    grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px);
    gap: 4px;
  }
  .arcade-dpad button {
    font-size: 22px; color: #D8D8E8;
    background: linear-gradient(#4A4A5E, #2A2A38);
    border: 2px solid #0E0E14; border-radius: 10px;
    box-shadow: 0 4px 0 #0E0E14;
    touch-action: none; cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: transform 0.06s, box-shadow 0.06s, background 0.1s;
  }
  .arcade-dpad button:active, .arcade-dpad button.pressed {
    transform: translateY(3px); box-shadow: 0 1px 0 #0E0E14; background: #5A5A72;
  }
  .arcade-dpad .up    { grid-column: 2; grid-row: 1; }
  .arcade-dpad .left  { grid-column: 1; grid-row: 2; }
  .arcade-dpad .right { grid-column: 3; grid-row: 2; }
  .arcade-dpad .down  { grid-column: 2; grid-row: 3; }
  .arcade-dpad .hub   { grid-column: 2; grid-row: 2; border-radius: 50%; background: #1C1C26; box-shadow: none; margin: 10px; }
  @media (hover: none) and (pointer: coarse), (max-width: 600px) {
    .arcade-dpad { display: grid; }
    .arcade-cabinet.custom-pad .arc-pad { display: grid; }
    .arc-help .keys { display: none; }
    .arc-help .touch { display: inline; }
  }
  @media (max-width: 420px) {
    .arc-buttons { gap: 8px 6px; }
    .arc-btn .cap { width: 34px; height: 34px; }
    .arc-btn { font-size: 6px; }
  }
  .arcade-overlay { overflow-y: auto; }
  .arcade-overlay .tiny { font-size: 7px; line-height: 1.7; color: #CFFFCF; max-width: 270px; }
  .arc-pad { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .arcade-cabinet.custom-pad .arcade-dpad { display: none !important; }
  .arc-padbtn {
    min-height: 54px; padding: 4px; font-family: var(--arc-font); font-size: 8px; line-height: 1.4; color: #FFFFFF;
    background: linear-gradient(#4A4A5E, #2A2A38); border: 2px solid #0E0E14; border-radius: 10px; box-shadow: 0 4px 0 #0E0E14;
    touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
  }
  .arc-padbtn.wide { grid-column: span 3; }
  .arc-padbtn.pressed, .arc-padbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0E0E14; background: #5A5A72; }
  .arc-padbtn:focus-visible { outline: 3px solid #FFE45C; outline-offset: 2px; }
  .arc-help { margin: 9px 0 0 0; text-align: center; font-size: 7px; line-height: 1.8; color: #9A9AB0; }
  .arc-help .touch { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .arcade-marquee, .arcade-overlay .hot { animation: none !important; }
  }


  /* ===== Dark mode switch ===== */
  .mode-switch {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: Tahoma, Verdana, sans-serif; font-size: 10px; color: #000000;
    background: #C0C0C0; border: 2px outset #FFFFFF; padding: 3px 8px; cursor: pointer;
  }
  .mode-switch:active, .mode-switch[aria-checked="true"] { border-style: inset; }
  .mode-switch:focus-visible { outline: 2px dotted #FFFF66; outline-offset: 2px; }
  .mode-led { width: 8px; height: 8px; border-radius: 50%; background: #FFD23F; border: 1px solid #000000; box-shadow: 0 0 4px #FFD23F; }
  .mode-switch[aria-checked="true"] .mode-led { background: #4D7FFF; box-shadow: 0 0 5px #4D7FFF; }

  /* ===== Image Gallery: 90s slideshow window ===== */
  .slideshow {
    max-width: 440px; margin: 0 auto;
    background: #C0C0C0; border: 2px outset #FFFFFF;
    padding: 0 6px 8px 6px;
    outline: none;
  }
  .slideshow:focus-visible { box-shadow: 0 0 0 2px #0000EE; }
  .slide-bar {
    display: flex; justify-content: space-between; gap: 8px;
    margin: 0 -6px 6px -6px; padding: 3px 6px;
    background: linear-gradient(90deg, #000080, #1084D0);
    color: #FFFFFF; font-size: 11px; font-weight: bold;
  }
  .slide-count { font-variant-numeric: tabular-nums; }
  .slide-frame {
    aspect-ratio: 4 / 3; max-width: 100%;
    background: #000000; border: 2px inset #808080;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .slide-frame { position: relative; }
  /* 90s film look: warm faded colour, a touch of softness, grain, dark corners */
  .slide-frame img {
    display: block; max-width: 100%; max-height: 100%; object-fit: contain;
    filter: sepia(0.4) saturate(1.35) contrast(1.12) brightness(1.04) hue-rotate(-8deg) blur(0.35px);
  }
  .slide-frame::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(40,20,0,0.5) 100%),
      repeating-linear-gradient(0deg, rgba(0,0,0,0.07) 0 1px, rgba(255,240,220,0.05) 1px 2px);
    mix-blend-mode: multiply;
  }
  .slide-caption {
    margin: 6px 0; padding: 3px 6px; min-height: 18px;
    background: #FFFFE1; border: 1px solid #808080;
    font-family: "Comic Sans MS", "Marker Felt", cursive; font-size: 13px; text-align: center;
  }
  .slide-nav { display: flex; justify-content: space-between; gap: 8px; }
  .slide-btn {
    flex: 1; padding: 5px 8px;
    font-family: Tahoma, Verdana, sans-serif; font-size: 12px; font-weight: bold;
    color: #000000; background: #C0C0C0; border: 2px outset #FFFFFF; cursor: pointer;
  }
  .slide-btn:active { border-style: inset; padding: 6px 7px 4px 9px; }
  .slide-btn:focus-visible { outline: 1px dotted #000000; outline-offset: -5px; }

  /* ===== Guestbook ===== */
  .gb { --gb-font: "Press Start 2P", "Courier New", monospace; }
  .gb-banner {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 6px; margin-bottom: 8px;
    background: #000040;
    border: 3px solid transparent;
    border-image: linear-gradient(90deg, #FF4D9A, #FFD23F, #4DE1FF, #7CFF7C, #B07CFF) 1;
  }
  .gb-heading {
    margin: 0; padding: 0; border: 0;
    font-family: var(--gb-font); font-size: 13px; line-height: 1.5;
    color: #FFE45C; text-shadow: 2px 2px 0 #FF2A6D;
    text-align: center; text-wrap: balance;
  }
  .gb-sub { color: #000080; text-shadow: 1px 1px 0 #FF9AC8; font-size: 11px; text-align: left; margin: 14px 0 8px 0; }
  .gb-spark { color: #4DE1FF; font-size: 16px; animation: gb-twinkle 2.4s ease-in-out infinite; }
  .gb-spark + .gb-heading + .gb-spark { animation-delay: 1.2s; color: #FF9AC8; }
  @keyframes gb-twinkle { 50% { opacity: 0.35; transform: scale(0.8) rotate(20deg); } }
  .gb-intro { margin: 0 0 8px 0; }
  .gb-demo {
    margin: 0 0 10px 0; padding: 6px 8px;
    background: #FFFFCC; border: 2px dashed #CC9900; font-size: 11px;
  }

  .gb-form { background: #F8F8FF; border: 2px ridge #C0C0E0; padding: 10px; display: grid; gap: 10px; }
  .gb-fields { display: grid; gap: 8px; }
  .gb-field label, .gb-pick legend { font-weight: bold; font-size: 11px; color: #000080; }
  .gb-field input, .gb-field textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 3px;
    font-family: Verdana, Tahoma, sans-serif; font-size: 13px;
    padding: 4px 5px; border: 2px inset #D0D0D0; background: #FFFFFF; color: #000000;
  }
  .gb-field textarea { resize: vertical; min-height: 70px; }
  .gb-field input:focus, .gb-field textarea:focus { outline: 2px solid #4DA8FF; outline-offset: 1px; }
  .gb-field [aria-invalid="true"] { border-color: #CC0000; background: #FFF0F0; }
  .gb-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; min-height: 14px; margin-top: 2px; }
  .gb-err { color: #CC0000; font-weight: bold; }
  .gb-count { color: #666666; font-variant-numeric: tabular-nums; margin-left: auto; }
  .gb-count.near { color: #CC6600; font-weight: bold; }

  .gb-pick { margin: 0; padding: 6px 8px 8px 8px; border: 2px groove #C0C0E0; min-width: 0; }
  .gb-chosen { font-weight: normal; color: #444444; }
  .gb-options { display: flex; flex-wrap: wrap; gap: 6px; }
  .gb-opt { position: relative; cursor: pointer; }
  .gb-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .gb-tile {
    display: block; width: 40px; height: 40px; padding: 4px; box-sizing: border-box;
    background: #1A1A40; border: 2px outset #8888AA;
    transition: transform 0.1s;
  }
  .gb-tile svg { display: block; width: 100%; height: 100%; }
  .gb-opt:hover .gb-tile { transform: translateY(-2px); }
  .gb-opt input:checked + .gb-tile { border: 2px solid #FFD23F; box-shadow: 0 0 0 2px #FF4D9A; background: #2A2A66; }
  .gb-opt input:focus-visible + .gb-tile { outline: 3px solid #4DA8FF; outline-offset: 2px; }

  .gb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .gb-preview { border: 2px dashed #A0A0C8; padding: 8px; background: #EEEEFA; }
  .gb-label { font-family: var(--gb-font); font-size: 8px; color: #666688; margin-bottom: 6px; }

  .gb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .gb-sign {
    font-family: var(--gb-font); font-size: 10px; line-height: 1.4;
    padding: 10px 14px; cursor: pointer;
    color: #000000; background: linear-gradient(#FFF27A, #FFC21F);
    border: 3px outset #FFE48A; box-shadow: 3px 3px 0 #806000;
    transition: transform 0.08s, box-shadow 0.08s;
  }
  .gb-sign:hover { filter: brightness(1.05); }
  .gb-sign:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #806000; border-style: inset; }
  .gb-sign:disabled { cursor: wait; filter: grayscale(0.6); }
  .gb-sign:focus-visible { outline: 3px solid #4DA8FF; outline-offset: 2px; }
  .gb-status { margin: 0; font-size: 11px; font-weight: bold; color: #006600; }
  .gb-status.err { color: #CC0000; }

  .gb-list { display: grid; gap: 10px; }
  .gb-card {
    position: relative;
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start;
    padding: 10px 56px 10px 10px;
    background: #FFFFFF;
    border: 3px solid var(--gb-c, #FF4D9A);
    box-shadow: 4px 4px 0 #9090B0;
  }
  .gb-list .gb-card:nth-child(4n+2) { --gb-c: #4DB8FF; }
  .gb-list .gb-card:nth-child(4n+3) { --gb-c: #F2B600; }
  .gb-list .gb-card:nth-child(4n+4) { --gb-c: #3CC85A; }
  .gb-card .gb-av { width: 48px; height: 48px; padding: 5px; box-sizing: border-box; background: #1A1A40; border: 2px outset #8888AA; }
  .gb-card .gb-av svg, .gb-card .gb-stamp svg { display: block; width: 100%; height: 100%; }
  .gb-card .gb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
  .gb-card .gb-nick { font-family: var(--gb-font); font-size: 10px; color: #000080; overflow-wrap: anywhere; }
  .gb-card time { font-size: 10px; color: #666666; }
  .gb-card .gb-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
  .gb-card .gb-stamp {
    position: absolute; top: 8px; right: 8px;
    width: 40px; height: 44px; padding: 5px; box-sizing: border-box;
    background: #FFF8E8;
    border: 2px dashed #C08A5A; outline: 2px solid #FFF8E8;
    transform: rotate(6deg);
  }
  .gb-card.gb-new { animation: gb-flash 1.6s ease-out; }
  .gb-card.gb-new .gb-stamp { animation: gb-thud 0.5s cubic-bezier(.3, 1.6, .5, 1) both; }
  @keyframes gb-flash { from { background: #FFFFA0; } }
  @keyframes gb-thud { from { transform: rotate(-18deg) scale(2.2); opacity: 0; } }

  .gb-empty {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border: 3px dashed #B0B0D0; background: #FAFAFF;
  }
  .gb-empty .gb-tile { width: 44px; height: 44px; flex: none; }
  .gb-empty p { margin: 0; }
  .gb-more-wrap { text-align: center; margin-top: 10px; }
  .gb-more-wrap .button { font-size: 12px; padding: 4px 14px; }

  @media (min-width: 640px) {
    .gb-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  }
  @media (max-width: 600px) {
    .gb-heading { font-size: 11px; }
    .gb-tile { width: 44px; height: 44px; }   /* bigger touch targets */
    .gb-sign { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gb-spark, .gb-card.gb-new, .gb-card.gb-new .gb-stamp { animation: none !important; }
    .gb-opt:hover .gb-tile { transform: none; }
  }

  /* ===== Dial-up intro (a nostalgic simulation, no real connection) ===== */
  html.dialup-open { overflow: hidden; }
  .dialup { display: none; }
  html.dialup-open .dialup {
    display: flex; align-items: center; justify-content: center;
    position: fixed; inset: 0; z-index: 10000;
    padding: 16px;
    background: #008080;   /* the classic desktop teal */
    font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; font-size: 12px; color: #000000;
  }
  /* Failsafe: if the intro script never starts, get out of the way after 20s */
  html.dialup-open .dialup:not(.ready) { animation: dialup-failsafe 0s linear 20s forwards; }
  @keyframes dialup-failsafe { to { visibility: hidden; pointer-events: none; } }
  .dialup.closing { opacity: 0; transition: opacity 0.3s; }

  .du-win {
    width: 420px; max-width: 100%;
    background: #D4D0C8;
    border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
    box-shadow: 1px 1px 0 #000000, 4px 4px 0 rgba(0, 0, 0, 0.35);
  }
  .du-titlebar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 3px 3px 3px 6px;
    background: linear-gradient(90deg, #000080, #1084D0);
    color: #FFFFFF; font-weight: bold;
  }
  .du-titlebar h2 { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; }
  .du-x {
    width: 18px; height: 16px; padding: 0; line-height: 12px;
    font-family: inherit; font-size: 11px; font-weight: bold; color: #000000;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; cursor: pointer;
  }
  .du-body { padding: 12px; display: grid; gap: 10px; }

  .du-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; }
  .du-pc { width: 56px; height: 52px; flex: none; }
  .du-pc svg { display: block; width: 100%; height: 100%; }
  .du-pc-label { display: block; text-align: center; font-size: 10px; margin-top: 2px; }
  .du-wire {
    position: relative; flex: 1; height: 14px; min-width: 60px;
    background: repeating-linear-gradient(90deg, #808080 0 4px, transparent 4px 8px) center / 100% 2px no-repeat;
  }
  .du-packet {
    position: absolute; top: 3px; width: 8px; height: 8px;
    background: #00A000; border: 1px solid #004000;
    opacity: 0;
  }
  .du-packet.back { background: #E0A000; border-color: #604000; }
  .dialup.live .du-packet { animation: du-send 0.9s linear infinite; }
  .dialup.live .du-packet:nth-child(2) { animation-delay: 0.3s; }
  .dialup.live .du-packet:nth-child(3) { animation-delay: 0.6s; }
  .dialup.live .du-packet.back { animation-name: du-return; }
  @keyframes du-send   { 0% { left: 0; opacity: 1; } 100% { left: calc(100% - 8px); opacity: 1; } }
  @keyframes du-return { 0% { left: calc(100% - 8px); opacity: 1; } 100% { left: 0; opacity: 1; } }

  .du-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; }
  .du-fields[hidden] { display: none; }
  .du-fields span:nth-child(odd) { text-align: right; }
  .du-box {
    padding: 2px 4px; background: #FFFFFF;
    border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080;
    overflow-wrap: anywhere;
  }
  .du-status {
    min-height: 32px; padding: 6px 8px;
    background: #FFFFFF; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080;
    font-weight: bold;
  }
  .du-status small { display: block; font-weight: normal; color: #444444; margin-top: 2px; }
  .du-progress {
    height: 16px; padding: 2px;
    border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; background: #FFFFFF;
  }
  .du-progress div {
    height: 100%; width: 0;
    background: repeating-linear-gradient(90deg, #000080 0 9px, transparent 9px 11px);
    transition: width 0.5s linear;
  }
  .du-note { margin: 0; font-size: 11px; color: #333333; }

  .du-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .du-buttons { display: flex; gap: 6px; }
  .du-btn {
    min-width: 88px; padding: 4px 10px;
    font-family: inherit; font-size: 12px; color: #000000;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
    box-shadow: inset -1px -1px 0 #808080; cursor: pointer;
  }
  .du-btn:active:not(:disabled) { border-color: #404040 #FFFFFF #FFFFFF #404040; box-shadow: inset 1px 1px 0 #808080; }
  .du-btn:disabled { color: #808080; text-shadow: 1px 1px 0 #FFFFFF; cursor: default; }
  .du-btn.default { outline: 1px solid #000000; }
  .du-soundbtn { font-weight: bold; }
  .du-soundbtn[aria-pressed="true"] { border-color: #404040 #FFFFFF #FFFFFF #404040; box-shadow: inset 1px 1px 0 #808080; background: #E8E6E0; }
  .du-btn:focus-visible, .du-x:focus-visible {
    outline: 1px dotted #000000; outline-offset: -5px;
  }
  .du-x:focus-visible { outline-offset: 1px; }

  .du-welcome {
    text-align: center; padding: 10px 6px;
    font-size: 15px; font-weight: bold; color: #000080;
  }

  .replay-intro { background: none; border: 0; padding: 0; font: inherit; color: #0000EE; font-weight: bold; text-decoration: underline; cursor: pointer; }
  .replay-intro:hover { color: #FF0000; }

  @media (max-width: 420px) {
    .du-actions { flex-direction: column; align-items: stretch; }
    .du-buttons { flex-direction: column; }
    .du-btn { min-height: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dialup.live .du-packet { animation: none; opacity: 0; }
    .du-progress div { transition: none; }
    .dialup.closing { transition: none; }
  }

  /* ===== Retro Desktop mode ===== */
  .desk-launch {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: Tahoma, Verdana, sans-serif; font-size: 10px; font-weight: bold; color: #000000;
    background: #C0C0C0; border: 2px outset #FFFFFF; padding: 3px 8px; cursor: pointer;
  }
  .desk-launch:active { border-style: inset; }
  .desk-launch:focus-visible { outline: 2px dotted #FFFF66; outline-offset: 2px; }
  .desk-launch svg { width: 14px; height: 12px; }
  .nav-desk { background: none; border: 0; padding: 0; font: inherit; font-size: inherit; font-weight: bold; color: #0000EE; text-decoration: underline; cursor: pointer; }
  .nav-desk:hover { color: #FF0000; }

  html.desk-open { overflow: hidden; }
  html.desk-dragging, html.desk-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: move; }
  .desk {
    position: fixed; inset: 0; z-index: 9000;
    font-family: Tahoma, "MS Sans Serif", Verdana, sans-serif; font-size: 12px; color: #000000;
    overflow: hidden;
  }
  .desk[hidden] { display: none; }
  .desk-area { position: absolute; inset: 0 0 32px 0; overflow: hidden; }

  /* Wallpapers */
  .desk[data-wp="teal"]   .desk-area { background: #008080; }
  .desk[data-wp="clouds"] .desk-area { background:
      radial-gradient(ellipse 120px 40px at 18% 22%, rgba(255,255,255,0.95), transparent 70%),
      radial-gradient(ellipse 90px 30px at 24% 18%, rgba(255,255,255,0.9), transparent 70%),
      radial-gradient(ellipse 160px 46px at 70% 40%, rgba(255,255,255,0.9), transparent 70%),
      radial-gradient(ellipse 100px 34px at 78% 35%, rgba(255,255,255,0.85), transparent 70%),
      radial-gradient(ellipse 140px 40px at 40% 78%, rgba(255,255,255,0.85), transparent 70%),
      linear-gradient(#3A7BD5, #8EC5FF); }
  .desk[data-wp="tiles"]  .desk-area { background-color: #808080; background-image:
      linear-gradient(45deg, #9A9A9A 25%, transparent 25%, transparent 75%, #9A9A9A 75%),
      linear-gradient(45deg, #9A9A9A 25%, transparent 25%, transparent 75%, #9A9A9A 75%);
      background-size: 24px 24px; background-position: 0 0, 12px 12px; }
  .desk[data-wp="night"]  .desk-area { background:
      radial-gradient(1px 1px at 10% 20%, #FFFFFF, transparent), radial-gradient(1px 1px at 30% 70%, #FFFFFF, transparent),
      radial-gradient(1px 1px at 55% 15%, #FFFFFF, transparent), radial-gradient(1px 1px at 80% 55%, #FFFFFF, transparent),
      radial-gradient(1px 1px at 65% 85%, #FFFFFF, transparent), radial-gradient(1px 1px at 90% 10%, #FFFFFF, transparent),
      linear-gradient(#000030, #1A2A5A); }
  .desk[data-wp="stars"]  .desk-area { background:
      radial-gradient(2px 2px at 12% 18%, #FFFFFF, transparent), radial-gradient(1px 1px at 22% 62%, #FFFFFF, transparent),
      radial-gradient(2px 2px at 37% 30%, #FFE45C, transparent), radial-gradient(1px 1px at 48% 80%, #FFFFFF, transparent),
      radial-gradient(1px 1px at 58% 12%, #FFFFFF, transparent), radial-gradient(2px 2px at 67% 52%, #B8E0FF, transparent),
      radial-gradient(1px 1px at 76% 28%, #FFFFFF, transparent), radial-gradient(2px 2px at 86% 74%, #FFFFFF, transparent),
      radial-gradient(1px 1px at 93% 40%, #FFE45C, transparent), radial-gradient(1px 1px at 5% 88%, #FFFFFF, transparent),
      radial-gradient(ellipse at 70% 30%, rgba(120, 60, 200, 0.45), transparent 55%),
      linear-gradient(#05030F, #120A30); }

  /* Desktop icons */
  .desk-icons {
    position: absolute; top: 8px; left: 8px; bottom: 8px;
    display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 6px;
  }
  .di {
    width: 76px; padding: 4px 2px; background: none; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font: inherit; color: #FFFFFF;
  }
  .di-img { width: 32px; height: 32px; }
  .di-img svg { display: block; width: 100%; height: 100%; }
  .di-label { padding: 1px 3px; font-size: 11px; line-height: 1.3; text-align: center; text-shadow: 1px 1px 0 #000000; overflow-wrap: anywhere; }
  .di.selected .di-label { background: #000080; text-shadow: none; }
  .di.selected .di-img { filter: drop-shadow(0 0 0 #000080) brightness(0.75) sepia(1) hue-rotate(180deg) saturate(3); }
  .di:focus-visible { outline: none; }
  .di:focus-visible .di-label { outline: 1px dotted #FFFFFF; outline-offset: 1px; }

  /* Windows */
  .dw {
    position: absolute; display: flex; flex-direction: column; box-sizing: border-box;
    min-width: 200px; min-height: 120px;
    background: #D4D0C8;
    border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
    box-shadow: 1px 1px 0 #000000;
    outline: none;
  }
  .dw[hidden] { display: none; }
  .dw.opening { animation: dw-open 0.14s ease-out; }
  @keyframes dw-open { from { transform: scale(0.92); opacity: 0.4; } }
  .dw-bar {
    display: flex; align-items: center; gap: 4px; flex: none;
    padding: 2px 2px 2px 4px; margin: 1px;
    background: linear-gradient(90deg, #808080, #B0B0B0);
    color: #D4D0C8; cursor: default; touch-action: none;
  }
  .dw.active .dw-bar { background: linear-gradient(90deg, #000080, #1084D0); color: #FFFFFF; }
  .dw-ico { width: 16px; height: 16px; flex: none; }
  .dw-ico svg { display: block; width: 100%; height: 100%; }
  .dw-title { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; font: inherit; font-weight: bold; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: none; }
  .dw-ctrls { display: flex; gap: 2px; flex: none; }
  .dw-ctrls button {
    width: 18px; height: 16px; padding: 0;
    font-family: inherit; font-size: 11px; font-weight: bold; line-height: 10px; color: #000000;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; cursor: pointer;
  }
  .dw-ctrls button:active { border-color: #404040 #FFFFFF #FFFFFF #404040; }
  .dw-ctrls button:focus-visible { outline: 1px dotted #000000; outline-offset: 1px; }
  .dw-close { margin-left: 2px; }
  .dw-body { flex: 1; min-height: 0; overflow: auto; margin: 2px; }
  .dw-body.pad { padding: 8px; }
  .dw-body.inset { background: #FFFFFF; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
  .dw.max { border-width: 0; }

  /* Hosted site features */
  .dw[data-app="arcade"] .dw-body { background: #2A2A36; display: flex; justify-content: center; }
  .dw[data-app="arcade"] .arcade-cabinet { margin: 8px; width: 100%; }
  .dw[data-app="walkman"] .dw-body { background: #23232E; }
  .dw[data-app="walkman"] .winamp { margin: 0; }
  .dw[data-app="guestbook"] .dw-body { background: #F0F0F0; }
  .dw[data-app="guestbook"] .inner.gb { padding: 10px; }

  /* Messenger */
  .msn-head { display: flex; align-items: center; gap: 8px; padding: 8px; background: linear-gradient(#FFFFFF, #DCE8F8); border-bottom: 1px solid #A0B4D0; }
  .msn-head .di-img { width: 28px; height: 28px; }
  .msn-head b { display: block; font-size: 13px; color: #000080; }
  .msn-group { margin: 8px 8px 2px 8px; font-weight: bold; color: #000080; }
  .msn-list { list-style: none; margin: 0; padding: 0 8px; }
  .msn-list li { padding: 3px 0; }
  .msn-list a, .msn-list button.linkish { color: #0000EE; font-weight: bold; }
  .linkish { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
  .msn-note { margin: 10px 8px; font-size: 11px; color: #444444; }
  .msn-copy { margin-left: 4px; }

  /* Shared small controls */
  .dbtn {
    min-width: 72px; padding: 3px 10px;
    font-family: inherit; font-size: 12px; color: #000000;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
    box-shadow: inset -1px -1px 0 #808080; cursor: pointer;
  }
  .dbtn:active:not(:disabled) { border-color: #404040 #FFFFFF #FFFFFF #404040; box-shadow: inset 1px 1px 0 #808080; }
  .dbtn:disabled { color: #808080; text-shadow: 1px 1px 0 #FFFFFF; cursor: default; }
  .dbtn:focus-visible { outline: 1px dotted #000000; outline-offset: -5px; }

  /* Recycle Bin */
  .rb { display: flex; flex-direction: column; height: 100%; }
  .rb-tools { display: flex; gap: 4px; padding: 4px; border-bottom: 1px solid #808080; }
  .rb-list { flex: 1; overflow: auto; margin: 4px; background: #FFFFFF; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; outline: none; }
  .rb-list:focus-visible { outline: 1px dotted #000000; outline-offset: -3px; }
  .rb-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 2px 6px; cursor: default; }
  .rb-row .dw-ico { width: 16px; height: 16px; }
  .rb-row small { color: #555555; }
  .rb-row[aria-selected="true"] { background: #000080; color: #FFFFFF; }
  .rb-row[aria-selected="true"] small { color: #D0D0FF; }
  .rb-empty { padding: 10px; color: #555555; }
  .rb-status { padding: 2px 6px; border-top: 1px solid #FFFFFF; box-shadow: inset 0 1px 0 #808080; font-size: 11px; }

  /* Notepad-style file viewer */
  .np { white-space: pre-wrap; font-family: "Courier New", monospace; font-size: 13px; line-height: 1.5; margin: 0; padding: 8px; overflow-wrap: anywhere; }
  .np-art { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; }
  .np-art svg { width: 100%; max-width: 256px; height: auto; border: 2px solid #000000; }
  .np-art p { margin: 0; font-family: "Courier New", monospace; text-align: center; }

  /* Stargazer (secret program) */
  .dw[data-app="secret"] .dw-body { background: #000000; position: relative; }
  .star-canvas { display: block; width: 100%; height: 100%; }
  .star-msg { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #FFE45C; font-family: "Courier New", monospace; font-weight: bold; text-shadow: 0 0 4px #000000; }

  /* Message box */
  .mb { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
  .mb-ico { width: 32px; height: 32px; flex: none; }
  .mb p { margin: 0 0 4px 0; line-height: 1.5; }
  .mb-btns { display: flex; justify-content: center; gap: 8px; padding: 0 12px 12px 12px; }

  /* Taskbar */
  .desk-taskbar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; align-items: center; gap: 4px; padding-left: 2px; padding-right: 2px;
    background: #D4D0C8; border-top: 2px solid #FFFFFF; box-shadow: 0 -1px 0 #D4D0C8;
    box-sizing: content-box;
  }
  .ds-start {
    display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px; flex: none;
    font-family: inherit; font-size: 12px; font-weight: bold; color: #000000;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; cursor: pointer;
  }
  .ds-start[aria-expanded="true"] { border-color: #404040 #FFFFFF #FFFFFF #404040; }
  .ds-start svg { width: 16px; height: 16px; }
  .ds-start:focus-visible, .ds-task:focus-visible, .ds-tray button:focus-visible { outline: 1px dotted #000000; outline-offset: -4px; }
  .ds-tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
  .ds-task {
    display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 6px;
    flex: 0 1 150px; min-width: 32px;
    font-family: inherit; font-size: 11px; color: #000000; text-align: left;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; cursor: pointer;
  }
  .ds-task span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ds-task .dw-ico { width: 14px; height: 14px; }
  .ds-task[aria-pressed="true"] {
    border-color: #404040 #FFFFFF #FFFFFF #404040; font-weight: bold;
    background-color: #E8E6E0;
    background-image: repeating-conic-gradient(#D4D0C8 0 25%, #FFFFFF 0 50%); background-size: 2px 2px;
  }
  .ds-tray {
    display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; flex: none;
    border: 1px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; font-size: 11px;
  }
  .ds-tray button { background: none; border: 0; padding: 0 2px; cursor: pointer; font-size: 13px; line-height: 1; }
  .ds-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Start menu */
  .ds-menu {
    position: absolute; left: 2px; bottom: 34px; z-index: 100000;
    display: flex;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
    box-shadow: 1px 1px 0 #000000;
  }
  .ds-menu[hidden] { display: none; }
  .ds-side {
    width: 22px; background: linear-gradient(#000080, #1084D0);
    color: #D4D0C8; font-weight: bold; font-size: 14px; letter-spacing: 1px;
    writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; padding: 6px 2px;
  }
  .ds-side b { color: #FFFFFF; }
  .ds-menu ul { list-style: none; margin: 0; padding: 2px; min-width: 190px; }
  .ds-menu li { position: relative; }
  .ds-menu li.sep { height: 0; margin: 3px 2px; border-top: 1px solid #808080; border-bottom: 1px solid #FFFFFF; }
  .ds-item {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px 4px 4px; box-sizing: border-box;
    font-family: inherit; font-size: 12px; color: #000000; text-align: left;
    background: none; border: 0; cursor: pointer;
  }
  .ds-item .dw-ico { width: 24px; height: 24px; }
  .ds-item .ds-mark { width: 24px; text-align: center; font-weight: bold; }
  .ds-item .ds-arrow { margin-left: auto; }
  .ds-item:hover, .ds-item:focus-visible, .ds-item[aria-expanded="true"] { background: #000080; color: #FFFFFF; outline: none; }
  .ds-sub {
    position: absolute; left: 100%; bottom: -4px; margin: 0;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; box-shadow: 1px 1px 0 #000000;
  }
  .ds-sub[hidden] { display: none; }

  @media (max-height: 620px) and (min-width: 601px) {
    .ds-menu { max-height: calc(100% - 40px); overflow: auto; }
    .ds-menu ul { flex: 1; }
    .ds-sub { position: static; border: 0; box-shadow: none; padding-left: 24px; }
    .ds-item .dw-ico { width: 16px; height: 16px; }
  }
  @media (max-width: 600px) {
    .desk-icons { right: 8px; bottom: auto; flex-direction: row; }
    .dw { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-width: 0; }
    .dw-max { display: none; }
    .dw-ctrls button { width: 30px; height: 26px; font-size: 14px; }
    .dw-bar { padding: 4px; }
    .ds-task { flex-basis: 44px; }
    .ds-task span:last-child { display: none; }
    .ds-menu { right: 2px; max-height: calc(100% - 40px); overflow: auto; }
    .ds-menu ul { min-width: 0; flex: 1; }
    .ds-sub { position: static; border: 0; box-shadow: none; padding-left: 24px; }
    .ds-item { padding-top: 8px; padding-bottom: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dw.opening { animation: none; }
  }

  /* More desktop apps */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dw[data-app="photos"] .dw-body { background: #D4D0C8; padding: 6px; }
  .dw[data-app="photos"] .slideshow { max-width: none; }
  .sysp { display: flex; gap: 12px; align-items: flex-start; }
  .sysp-ico { width: 64px; height: 64px; flex: none; }
  .sysp-ico svg { width: 100%; height: 100%; }
  .sysp-info { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 12px; }
  .sysp-info dt { font-weight: bold; }
  .sysp-info dd { margin: 0; }
  .np-wrap { display: flex; flex-direction: column; height: 100%; }
  .np-area {
    flex: 1; min-height: 120px; resize: none; margin: 0; padding: 6px; box-sizing: border-box; width: 100%;
    font-family: "Courier New", monospace; font-size: 13px; line-height: 1.5;
    border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; background: #FFFFFF; color: #000000;
  }
  .np-area:focus { outline: 1px dotted #000000; outline-offset: -4px; }
  .np-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 2px 0 2px; font-size: 11px; }
  .pt { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
  .pt-tools { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
  .pt-pal { display: grid; grid-template-columns: repeat(8, 18px); gap: 2px; }
  .pt-swatch { width: 18px; height: 18px; padding: 0; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; cursor: pointer; }
  .pt-swatch[aria-checked="true"] { outline: 2px solid #000000; outline-offset: 1px; }
  .pt-swatch:focus-visible { outline: 2px dotted #FF00FF; outline-offset: 2px; }
  .pt-canvas {
    display: block; width: 100%; max-width: 288px; aspect-ratio: 1 / 1; margin: 0 auto;
    image-rendering: pixelated; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080;
    touch-action: none; cursor: crosshair;
  }
  .pt-canvas:focus-visible { outline: 2px dotted #000000; outline-offset: 2px; }
  .pt-hint { margin: 0; font-size: 11px; color: #333333; text-align: center; }
  .ms { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px; }
  .ms-top { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 234px; padding: 4px; box-sizing: border-box; border: 2px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
  .ms-lcd { background: #000000; color: #FF2020; font-family: "Courier New", monospace; font-weight: bold; font-size: 18px; padding: 0 3px; font-variant-numeric: tabular-nums; }
  .ms-face { width: 30px; height: 30px; padding: 0; font-size: 18px; line-height: 1; background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF; cursor: pointer; }
  .ms-face:active { border-color: #404040 #FFFFFF #FFFFFF #404040; }
  .ms-face:focus-visible { outline: 1px dotted #000000; outline-offset: -5px; }
  .ms-board { border: 3px solid; border-color: #808080 #FFFFFF #FFFFFF #808080; }
  .ms-row { display: flex; }
  .ms-cell {
    width: 26px; height: 26px; padding: 0; font-family: Tahoma, sans-serif; font-weight: bold; font-size: 14px;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #808080 #808080 #FFFFFF; cursor: pointer;
  }
  .ms-cell.open { border: 1px solid #A0A0A0; background: #C8C8C8; cursor: default; }
  .ms-cell.ms-boom { background: #FF0000; }
  .ms-cell:focus-visible { outline: 2px solid #000080; outline-offset: -3px; position: relative; z-index: 1; }
  .ms-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .ms-status { font-size: 11px; text-align: center; min-height: 15px; }
  @media (max-width: 600px) {
    .ms-cell { width: 34px; height: 34px; font-size: 16px; }
    .ms-top { max-width: 306px; }
  }

  /* ===== Camera: snap the screen, then share ===== */
  .nav-cam { background: none; border: 0; padding: 0; font: inherit; font-weight: bold; color: #0000EE; text-decoration: underline; cursor: pointer; }
  .nav-cam:hover { color: #FF0000; }
  .nav-cam:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }

  .cam-frame { position: fixed; inset: 10px; z-index: 8000; pointer-events: none; }
  .cam-frame[hidden] { display: none; }
  .cf-c { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255, 255, 255, 0.9); filter: drop-shadow(0 0 1px #000000); }
  .cf-c.tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; }
  .cf-c.tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; }
  .cf-c.bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; }
  .cf-c.br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; }
  .cam-frame.snap { animation: cam-iris 0.35s ease-in-out; }
  @keyframes cam-iris { 50% { box-shadow: inset 0 0 0 40vmax rgba(0, 0, 0, 0.55); } }

  .cam {
    position: fixed; left: 16px; bottom: 16px; z-index: 8001;
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: linear-gradient(#FFD23F, #F2A900);
    border: 3px solid #1A1A1A; border-radius: 10px; box-shadow: inset 0 -8px 0 #2E7D32, 4px 4px 0 rgba(0, 0, 0, 0.35);
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; color: #000000;
  }
  .cam[hidden] { display: none; }
  .cam-lens { width: 42px; height: 42px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8AB4FF, #20305A 45%, #000000 60%, #1A1A1A 61%); }
  .cam-shutter {
    font-family: "Press Start 2P", "Courier New", monospace; font-size: 10px; letter-spacing: 1px;
    padding: 12px 14px; color: #FFFFFF; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #FF8A8A, #D82020 60%, #8A1010);
    border: 3px solid #1A1A1A; border-radius: 8px; box-shadow: 0 4px 0 #1A1A1A; transform: translateY(-2px);
    transition: transform 0.06s, box-shadow 0.06s;
  }
  .cam-shutter:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 #1A1A1A; }
  .cam-shutter:disabled { filter: grayscale(0.8); cursor: wait; }
  .cam-shutter:focus-visible, .cam-x:focus-visible { outline: 3px solid #0000EE; outline-offset: 3px; }
  .cam-x { width: 28px; height: 28px; padding: 0; font-size: 16px; font-weight: bold; cursor: pointer; background: #D4D0C8; border: 2px outset #FFFFFF; }
  .cam-msg { position: absolute; left: 0; bottom: calc(100% + 6px); width: max-content; max-width: min(320px, calc(100vw - 32px)); margin: 0; padding: 4px 6px; background: #FFFFE1; border: 1px solid #808080; }
  .cam-msg:empty { display: none; }
  .cam-msg.err { color: #CC0000; font-weight: bold; }

  .snap-share {
    position: fixed; inset: 0; z-index: 9500; padding: 16px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.78);
  }
  .snap-share[hidden] { display: none; }
  .ss-win {
    width: min(720px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box;
    background: #D4D0C8; border: 2px solid; border-color: #FFFFFF #404040 #404040 #FFFFFF;
    font-family: Tahoma, Verdana, sans-serif; font-size: 12px; color: #000000;
  }
  .ss-bar { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 3px 6px; background: linear-gradient(90deg, #000080, #1084D0); color: #FFFFFF; font-weight: bold; }
  .ss-bar h2 { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; text-shadow: none; }
  .ss-body { padding: 12px; display: grid; gap: 12px; }
  .ss-photo { margin: 0; padding: 10px 10px 8px 10px; background: #FFFFFF; box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.3); }
  .ss-photo img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; background: #111111; }
  .ss-q { margin: 0; text-align: center; font-size: 15px; font-weight: bold; color: #000080; }
  .ss-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .ss-btn {
    min-width: 120px; padding: 9px 14px; cursor: pointer;
    font-family: Tahoma, Verdana, sans-serif; font-size: 13px; font-weight: bold; color: #FFFFFF;
    border: 2px outset #E0E0E0; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  }
  .ss-btn:active { border-style: inset; }
  .ss-btn:focus-visible, .ss-no:focus-visible { outline: 3px dotted #000000; outline-offset: 2px; }
  .ss-li { background: #0A66C2; }
  .ss-fb { background: #1877F2; }
  .ss-ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); }
  .ss-no { justify-self: center; font-family: inherit; font-size: 12px; padding: 4px 14px; background: #D4D0C8; border: 2px outset #FFFFFF; cursor: pointer; }
  .ss-note { margin: 0; text-align: center; font-size: 11px; color: #333333; min-height: 14px; }
  .ss-note.done { color: #006600; font-weight: bold; }

  @media (max-width: 600px) {
    .cam { left: 8px; right: 8px; bottom: 8px; justify-content: center; }
    .ss-btn { flex: 1 1 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cam-frame.snap { animation: none; }
  }

  /* ===== Quotes ===== */
  .quotes blockquote {
    margin: 0 0 8px 0; padding: 0 0 8px 0; border-bottom: 1px dotted #A0A0A0;
    font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 12px; line-height: 1.45; color: #222222;
  }
  .quotes blockquote:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .quotes cite { display: block; margin-top: 3px; font-family: Verdana, sans-serif; font-style: normal; font-size: 10px; font-weight: bold; color: #000080; }
  .quotes cite::before { content: "\2014 "; }

  /* ===== Player profile (About Me facts) ===== */
  .pp { clear: both; margin-top: 10px; background: #10102A; border: 3px solid #000000; box-shadow: inset 0 0 0 2px #4A4AA0, 3px 3px 0 #808080; color: #E8E8FF; }
  .pp-head { display: flex; justify-content: space-between; padding: 6px 10px; background: linear-gradient(90deg, #2A0F5A, #4A1F8A); font-family: "Press Start 2P", "Courier New", monospace; font-size: 10px; color: #FFE45C; }
  .pp-ready { color: #7CFF7C; animation: blink 1.4s steps(1) infinite; }
  .pp-stats { margin: 0; padding: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: baseline; }
  .pp-stats dt { font-family: "Press Start 2P", "Courier New", monospace; font-size: 8px; color: #4DE1FF; white-space: nowrap; }
  .pp-stats dd { margin: 0; font-size: 12px; line-height: 1.45; }
  .pp-stats small { color: #A8A8D0; }
  .pp-name { display: block; font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive; font-size: 16px; font-weight: bold; color: #FFE45C; text-shadow: 2px 2px 0 #FF2A6D; overflow-wrap: anywhere; }
  .pp-real { display: block; margin-top: 2px; }
  .pp-path { margin: 0; padding: 0; list-style: none; counter-reset: lvl; }
  .pp-path li { counter-increment: lvl; padding-left: 0; }
  .pp-path li::before { content: "> "; font-family: "Press Start 2P", monospace; font-size: 8px; color: #FF9AC8; }
  .pp-skills { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
  .pp-skills li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .pp-bar { display: inline-flex; gap: 2px; }
  .pp-bar i { width: 12px; height: 9px; background: #2A2A4A; border: 1px solid #000000; }
  .pp-bar i.on { background: linear-gradient(#FFE45C, #FF9A3C); }

  /* ===== Interests as an inventory of power-ups ===== */
  .inv-intro { margin: 0 0 8px 0; font-family: "Press Start 2P", "Courier New", monospace; font-size: 8px; color: #333366; }
  .inv { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .inv-slot {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; text-align: center;
    background: #1A1A3A; border: 2px solid #000000; box-shadow: inset 0 0 0 2px #3A3A7A; color: #E8E8FF;
    transition: transform 0.12s, box-shadow 0.12s;
  }
  .inv-slot:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px #FFE45C; }
  .inv-ico { width: 34px; height: 34px; }
  .inv-ico svg { display: block; width: 100%; height: 100%; }
  .inv-name { font-size: 12px; font-weight: bold; line-height: 1.25; }
  .inv-tag { font-size: 10px; color: #A8A8D0; font-style: italic; }
  .inv-lvl { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-family: "Press Start 2P", "Courier New", monospace; font-size: 7px; color: #7CFF7C; }
  .inv-meter { width: 46px; height: 6px; background: #2A2A4A; border: 1px solid #000000; }
  .inv-meter span { display: block; height: 100%; background: #7CFF7C; }
  @media (max-width: 600px) {
    .inv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-stats { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .pp-stats dd { margin-bottom: 6px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pp-ready { animation: none; }
    .inv-slot { transition: none; }
    .inv-slot:hover { transform: none; }
  }

  /* ===== Rearrangeable modules ===== */
  .layout-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px;
    padding: 4px 8px; background: #D4D0C8; border-bottom: 1px solid #808080; font-size: 11px;
  }
  .layout-bar .button:disabled { color: #808080; cursor: default; }
  .mod-grip {
    flex: none; width: 14px; height: 14px; margin-right: 6px; padding: 0; vertical-align: -2px;
    border: 0; border-radius: 2px; cursor: grab; touch-action: none;
    background: radial-gradient(circle, currentColor 1.1px, transparent 1.4px) 0 0 / 5px 5px;
    color: inherit; opacity: 0.8;
  }
  .mod-grip.demo { display: inline-block; color: #333333; cursor: default; }
  .mod-grip:hover { opacity: 1; }
  .mod-grip:focus-visible { outline: 2px dotted #FFFF66; outline-offset: 2px; opacity: 1; }
  .box > .title { display: flex; align-items: center; }
  .wa-titlebar { align-items: center; }
  .wa-titlebar .mod-grip { width: 12px; height: 10px; margin-right: 4px; }
  html.mod-dragging, html.mod-dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
  .mod-dragged { position: fixed !important; z-index: 7000; pointer-events: none; opacity: 0.92; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35); margin: 0 !important; }
  .mod-placeholder { border: 3px dashed #000080; background: rgba(0, 0, 128, 0.08); margin-bottom: 12px; box-sizing: border-box; }
  .mod-moved { animation: mod-flash 0.8s ease-out; }
  @keyframes mod-flash { from { outline: 3px solid #FFE45C; outline-offset: 2px; } to { outline: 3px solid transparent; outline-offset: 2px; } }
  @media (prefers-reduced-motion: reduce) { .mod-moved { animation: none; } }

  /* Camera box in the sidebar */
  .cam-box { text-align: center; }
  .cam-box .small { margin: 6px 0 0 0; }
  .cam-launch {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer;
    font-family: Tahoma, Verdana, sans-serif; font-size: 12px; font-weight: bold; color: #000000;
    background: linear-gradient(#FFE45C, #FFB000); border: 2px outset #FFF2A8;
  }
  .cam-launch:active { border-style: inset; }
  .cam-launch:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }
  .cam-launch-ico { font-size: 20px; line-height: 1; }

  /* ===== Dark mode: everything hangs off html.dark ===== */
  html.dark { color-scheme: dark; }
  html.dark body {
    background-color: #121218;
    background-image:
      linear-gradient(45deg, #17171F 25%, transparent 25%, transparent 75%, #17171F 75%),
      linear-gradient(45deg, #17171F 25%, transparent 25%, transparent 75%, #17171F 75%);
    color: #E6E6EE;
  }
  html.dark a:link { color: #8AB4FF; }
  html.dark a:visited { color: #C9A4FF; }
  html.dark a:hover { color: #FF8A8A; }
  html.dark #wrapper { background: #24242C; border-color: #4A4A58; }
  html.dark #header { background: linear-gradient(#2A2A36, #101016); border-bottom-color: #000000; }
  html.dark #navbar { background: #34343F; border-top-color: #4A4A58; border-bottom-color: #18181E; color: #C8C8D4; }
  html.dark td.sidebar { background: #1E1E25; border-right-color: #3A3A46; }
  html.dark td.content { background: #1A1A21; }
  html.dark .box { background: #2A2A33; border-color: #4A4A58; }
  html.dark .box .title { background: #3D3D4C; border-bottom-color: #18181E; color: #FFFFFF; }
  html.dark .side .title { background: #34344A; }
  html.dark .box .inner { color: #E6E6EE; }
  html.dark h2 { color: #E8E8F4; border-bottom-color: #5A5A68; }
  html.dark .small, html.dark .status-list, html.dark .cam-box .small { color: #C2C2CE; }
  html.dark hr { border-top-color: #4A4A58; border-bottom-color: #2E2E38; }
  html.dark .button { background: #4A4A58; color: #F0F0F6; border-color: #6A6A7A; }
  html.dark .layout-bar { background: #2E2E38; border-bottom-color: #18181E; color: #D8D8E2; }
  html.dark .layout-bar .button:disabled { color: #8A8A98; }
  html.dark .mod-grip.demo { color: #D8D8E2; }
  html.dark .new { color: #FF7A7A; }
  html.dark #footer { background: #34343F; border-top-color: #18181E; color: #D8D8E2; }
  html.dark .construction-label { color: #E6E6EE; }
  html.dark div[style*="background:#E8E8E8"] { background: #1A1A21 !important; }
  html.dark .replay-intro, html.dark .nav-desk { color: #8AB4FF; }
  html.dark .nav-desk:hover { color: #FF8A8A; }
  html.dark .replay-intro:hover { color: #FF8A8A; }
  html.dark .clock { background: #1A2A1A; color: #9CFF9C; border-color: #3A4A3A; }
  html.dark .quotes blockquote { color: #E2E2EC; border-bottom-color: #4A4A58; }
  html.dark .quotes cite { color: #8AB4FF; }
  html.dark .inv-intro { color: #B8B8F0; }
  html.dark .cam-launch { color: #000000; }
  /* photo album window */
  html.dark .slideshow { background: #3A3A46; border-color: #5A5A6A; }
  html.dark .slide-caption { background: #2A2A20; color: #FFF2B0; border-color: #5A5A6A; }
  html.dark .slide-btn { background: #4A4A58; color: #F0F0F6; border-color: #6A6A7A; }
  /* guestbook */
  html.dark .gb-form { background: #22222E; border-color: #4A4A60; }
  html.dark .gb-field label, html.dark .gb-pick legend { color: #A8C4FF; }
  html.dark .gb-field input, html.dark .gb-field textarea { background: #15151C; color: #F0F0F6; border-color: #4A4A58; }
  html.dark .gb-field [aria-invalid="true"] { background: #3A1A1A; border-color: #FF6A6A; }
  html.dark .gb-err { color: #FF8A8A; }
  html.dark .gb-count { color: #A8A8B8; }
  html.dark .gb-chosen { color: #C2C2CE; }
  html.dark .gb-pick { border-color: #4A4A60; }
  html.dark .gb-preview { background: #1E1E2A; border-color: #5A5A78; }
  html.dark .gb-label { color: #A8A8C8; }
  html.dark .gb-status { color: #7CFF9C; }
  html.dark .gb-status.err { color: #FF8A8A; }
  html.dark .gb-demo { background: #3A3418; border-color: #A08A30; color: #FFEFB0; }
  html.dark .gb-sub { color: #A8C4FF; text-shadow: 1px 1px 0 #6A2A50; }
  html.dark .gb-card { background: #2E2E3A; box-shadow: 4px 4px 0 #0E0E14; }
  html.dark .gb-card .gb-nick { color: #A8C4FF; }
  html.dark .gb-card time { color: #A8A8B8; }
  html.dark .gb-card .gb-text { color: #EDEDF4; }
  html.dark .gb-empty { background: #22222E; border-color: #4A4A60; }
  html.dark .gb-card .gb-stamp { outline-color: #2E2E3A; }
  html.dark .totop { background: #4A4A58; color: #F0F0F6; }
  @media (prefers-reduced-motion: no-preference) {
    html.theme-anim, html.theme-anim * { transition: background-color 0.25s, color 0.25s, border-color 0.25s !important; }
  }

  /* Badges that double as shortcuts */
  a.badge-link { text-decoration: none; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; cursor: pointer; }
  a.badge-link:hover { filter: brightness(1.15); outline: 1px solid #FFE45C; }
  a.badge-link:focus-visible { outline: 2px dotted #000000; outline-offset: 2px; }

  /* ===== 90s gadgets in the sidebar ===== */
  .pet { text-align: center; }
  .pet-egg {
    margin: 0 auto; width: 132px; padding: 16px 12px 12px 12px;
    background: radial-gradient(circle at 35% 25%, #FFB8E0, #E8327C 70%);
    border: 3px solid #7A1040; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
    box-shadow: inset -4px -6px 0 rgba(0,0,0,0.15), 2px 3px 0 #808080;
  }
  .pet-screen { width: 84px; height: 66px; margin: 0 auto; padding: 4px; box-sizing: border-box; background: #B8C8A0; border: 3px inset #5A6A48; }
  .pet-screen svg { display: block; width: 100%; height: 100%; }
  .pet-screen.bounce svg { animation: pet-bounce 0.5s steps(2) 2; }
  @keyframes pet-bounce { 50% { transform: translateY(-4px); } }
  .pet-stats { display: flex; justify-content: space-between; margin-top: 6px; font-family: "Courier New", monospace; font-size: 9px; font-weight: bold; color: #FFFFFF; }
  .pet-stats b { color: #FFE45C; letter-spacing: -1px; }
  .pet-btns { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
  .pet-btn {
    font-family: Tahoma, Verdana, sans-serif; font-size: 11px; font-weight: bold; padding: 4px 8px; cursor: pointer;
    color: #000000; background: #C0C0C0; border: 2px outset #FFFFFF;
  }
  .pet-btn:active { border-style: inset; }
  .pet-btn:focus-visible, .eb-ball:focus-visible { outline: 2px dotted #000080; outline-offset: 2px; }
  .pet-msg { margin: 6px 0 0 0; font-size: 11px; min-height: 15px; }

  .eightball { text-align: center; }
  .eb-ball {
    width: 104px; height: 104px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: radial-gradient(circle at 32% 28%, #6A6A6A 0 6%, #2A2A2A 30%, #000000 70%);
    box-shadow: 2px 4px 0 #808080; display: inline-flex; align-items: center; justify-content: center;
  }
  .eb-window {
    width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #20307A, #0A1240);
    border: 3px solid #3A3A3A; display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box;
  }
  .eb-answer { color: #CFE0FF; font-family: Verdana, sans-serif; font-size: 8px; font-weight: bold; line-height: 1.15; text-transform: uppercase; }
  .eb-answer.eight { color: #000000; background: #FFFFFF; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
  .eb-ball.shake { animation: eb-shake 0.5s; }
  @keyframes eb-shake { 20% { transform: translate(-4px, 2px) rotate(-6deg); } 40% { transform: translate(4px, -2px) rotate(6deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(3px, -1px); } }
  .eightball .small { margin: 6px 0 0 0; }

  .y2k { text-align: center; }
  .y2k-head { margin: 0 0 6px 0; font-size: 11px; }
  .y2k-count { display: inline-flex; flex-direction: column; padding: 4px 10px; background: #000000; border: 2px inset #808080; }
  .y2k-count span { font-family: "Courier New", monospace; font-size: 22px; font-weight: bold; color: #FF5A5A; text-shadow: 0 0 4px #FF0000; font-variant-numeric: tabular-nums; }
  .y2k-count small { font-size: 8px; font-weight: bold; color: #FFE45C; letter-spacing: 1px; }
  .y2k .small { margin: 6px 0 0 0; }

  .away-head { display: flex; align-items: center; gap: 6px; font-size: 12px; }
  .away-dot { width: 10px; height: 10px; border-radius: 50%; background: #FFB000; border: 1px solid #8A5A00; }
  .away-msg { margin: 6px 0; padding: 6px 8px; background: #FFFFE1; border: 1px solid #C0A000; font-family: "Comic Sans MS", "Marker Felt", cursive; font-size: 12px; color: #333366; }
  .away-auto { margin: 0; font-size: 10px; color: #444444; }
  html.dark .away-msg { background: #3A3418; border-color: #A08A30; color: #FFEFB0; }
  html.dark .away-auto, html.dark .y2k-head { color: #D8D8E2; }
  @media (prefers-reduced-motion: reduce) {
    .pet-screen.bounce svg, .eb-ball.shake { animation: none; }
  }