/* ==========================================================================
   Hen_na's blog — a Windows 95/98 desktop.
   Deliberately NOT the Frutiger Aero stylesheet: this page is its own island,
   the way a 90s site had a different look in every corner.

   Everything is drawn with borders and gradients — no image files, no GIFs.
   The 4-colour bevel (white / #dfdfdf / #808080 / #0a0a0a) is the whole trick,
   and it is what every raised or sunken edge on this page is made of.
   ========================================================================== */

:root {
  --face: #c0c0c0;
  --hi: #ffffff;            /* outer top-left */
  --hi-2: #dfdfdf;          /* inner top-left */
  --sh: #808080;            /* inner bottom-right */
  --sh-2: #0a0a0a;          /* outer bottom-right */
  --navy: #000080;
  --navy-2: #1084d0;
  --link: #0000ee;
  --visited: #551a8b;
  --desk: #008080;          /* the teal every one of us stared at */

  --font: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
  --mono: 'Courier New', Courier, monospace;
  --taskbar-h: 0px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 12px/1.4 var(--font);
  color: #000;
  background: var(--desk);
  overflow-x: hidden;
  cursor: default;
  -webkit-user-select: none; user-select: none;   /* dragging must not select text */
}
/* Text you are meant to read and copy opts back in. */
.win-body, .post, .box-body, input, textarea { -webkit-user-select: text; user-select: text; }

/* The alternate wallpaper, switched from the Display icon on the desktop. */
body.wallpaper-stars {
  background-color: #120c33;
  background-image:
    radial-gradient(circle at 12px 18px, rgba(255, 255, 255, .9) 0 1px, transparent 1.2px),
    radial-gradient(circle at 48px 8px, rgba(190, 220, 255, .75) 0 1px, transparent 1.2px),
    radial-gradient(circle at 30px 52px, rgba(255, 255, 255, .55) 0 1px, transparent 1.2px),
    radial-gradient(circle at 62px 40px, rgba(255, 240, 200, .8) 0 1px, transparent 1.2px),
    radial-gradient(circle at 4px 62px, rgba(255, 255, 255, .4) 0 1px, transparent 1.2px);
  background-size: 72px 72px, 72px 72px, 72px 72px, 72px 72px, 72px 72px;
}

a { color: var(--link); }
a:visited { color: var(--visited); }
a:active { color: #e00; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------- bevels ---- */
.outset {
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--sh);
}
.inset {
  background: #fff;
  border: 2px solid;
  border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow: inset 1px 1px 0 var(--sh-2), inset -1px -1px 0 var(--hi-2);
}

/* ====================================================== desktop + icons == */
.desktop {
  position: relative;
  min-height: 100vh;
  padding: 8px;
  overflow: hidden;
}

.desk-icons { position: absolute; left: 8px; top: 8px; display: grid; gap: 14px; width: 76px; }
.desk-icon {
  display: grid; justify-items: center; gap: 4px;
  padding: 4px 2px; text-align: center; text-decoration: none;
  font-size: 11px; color: #fff; text-shadow: 1px 1px 0 #000;
}
.desk-icon:visited { color: #fff; }
.desk-icon:hover .ico { filter: brightness(1.15); }
.desk-icon:focus-visible { outline: 1px dotted #fff; }
.desk-icon span { padding: 1px 2px; }
.desk-icon:hover span { background: var(--navy); }

/* Real Windows icons, from the win95-winxp_icons set. The .ico files carry
   several sizes each; the browser picks one and `pixelated` keeps it crisp
   instead of smearing it when it is scaled. */
.ico, .tb-icon {
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  flex: 0 0 auto;
}
.ico { width: 32px; height: 32px; background-size: 32px 32px; }
.tb-icon { width: 16px; height: 16px; background-size: 16px 16px; border: 0; }

.i-pc     { background-image: url('../images/icons/w2k-my_computer.ico'); }
.i-folder { background-image: url('../images/icons/w2k_folder_closed.ico'); }
.i-note   { background-image: url('../images/icons/w98_notepad_file.ico'); }
.i-bin    { background-image: url('../images/icons/w2k_dustbin2.ico'); }
.i-sound  { background-image: url('../images/icons/w98_computer_sound.ico'); }
.i-net    { background-image: url('../images/icons/w98_internet_connection_wiz.ico'); }

/* =============================================================== window == */
.window {
  position: absolute; padding: 3px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--sh);
}
.window[hidden] { display: none; }

.title-bar {
  display: flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 2px 0 3px; margin-bottom: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; font-weight: bold; font-size: 12px;
  cursor: move; touch-action: none;
}
.window.inactive .title-bar { background: linear-gradient(90deg, #7b7b7b 0%, #b5b5b5 100%); color: #dcdcdc; }
.tb-text { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.tb-btns { display: flex; gap: 2px; }
.tb-btns button {
  width: 16px; height: 14px; padding: 0;
  font: bold 9px/1 var(--font); color: #000;
  background: var(--face);
  border: 1px solid; border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--sh);
  display: grid; place-items: center; cursor: default;
}
.tb-btns button:active { border-color: var(--sh-2) var(--hi) var(--hi) var(--sh-2); box-shadow: none; }

.menu-bar { display: flex; gap: 2px; padding: 1px 2px; font-size: 12px; }
.menu-bar span { padding: 2px 7px; }
.menu-bar span:hover { background: var(--navy); color: #fff; }

.win-body { padding: 6px; overflow: auto; }
.win-body.scroll { max-height: 60vh; }

/* Chunky Win95 scrollbars. */
.scroll::-webkit-scrollbar { width: 16px; height: 16px; }
.scroll::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px; }
.scroll::-webkit-scrollbar-thumb {
  background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--sh);
}
.scroll { scrollbar-color: var(--face) #e8e8e8; }

.status-bar { display: flex; gap: 3px; margin-top: 3px; }
.status-bar > span {
  padding: 2px 6px; font-size: 11px;
  border: 1px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
}
.status-bar > span:first-child { flex: 1 1 auto; }

/* The corner grip: three diagonal ridges, and the only handle that resizes. */
.grip {
  width: 16px; padding: 0 !important; border: 0 !important;
  cursor: nwse-resize; touch-action: none; flex: 0 0 auto;
  background:
    linear-gradient(135deg, transparent 0 42%, var(--hi) 42% 52%, var(--sh) 52% 62%, transparent 62%),
    linear-gradient(135deg, transparent 0 62%, var(--hi) 62% 72%, var(--sh) 72% 82%, transparent 82%),
    linear-gradient(135deg, transparent 0 82%, var(--hi) 82% 92%, var(--sh) 92% 100%);
}
.window.resizing { user-select: none; }

/* ------------------------------------------------------------ marquee ---- */
.marquee {
  overflow: hidden; white-space: nowrap; margin: 0 0 7px; padding: 3px 0;
  background: #000; color: #0f0; font: bold 12px var(--mono);
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
}
.marquee span { display: inline-block; padding-left: 100%; animation: slide 24s linear infinite; }
@keyframes slide { to { transform: translateX(-100%); } }

/* --------------------------------------------------------------- posts --- */
.post { background: #fff; padding: 10px 12px 12px; border: 1px solid #808080; }
.post-head {
  margin: -10px -12px 10px; padding: 4px 8px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff;
}
.post-head h2 { margin: 0; font-size: 13px; }
.post-date { font-size: 11px; color: #cfe4ff; }

.post-meta {
  margin: 0 0 10px; padding: 4px 6px; font-size: 11px;
  background: #ffffcc; border: 1px dashed #808080;
}
.post-meta b { color: #800080; }

.post p { margin: 0 0 .8em; }
.post p:last-child { margin-bottom: 0; }
.post code { font-family: var(--mono); font-size: 11px; background: #e8e8e8; border: 1px solid #a0a0a0; padding: 0 3px; }

.rainbow-hr {
  height: 4px; border: 0; margin: 10px 0;
  background: linear-gradient(90deg, #f00, #f80, #ff0, #0c0, #0cf, #00f, #b0f, #f00);
  background-size: 200% 100%; animation: shift 6s linear infinite;
}
@keyframes shift { to { background-position: 200% 0; } }

/* ----------------------------------------------------- small window bits -- */
.box-body { font-size: 11px; }
.box-body p { margin: 0 0 .7em; }
.box-body p:last-child { margin: 0; }

.notepad { background: #fff; padding: 7px; font-size: 11px; border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); }
.notepad hr { height: 0; margin: 8px 0; border: 0; border-top: 1px solid var(--sh); border-bottom: 1px solid var(--hi); }
/* Scrolling and the resize height both live on .win-body now, so the pane and
   the grip agree on what they are sizing. */
#lyrics-body { min-height: 60px; }
.muted-note { color: #555; }

/* Genius notes: the "About" text, then a few annotated lines. Each quoted line
   sits in a sunken box, its explanation underneath. */
.notes-heading { margin: 10px 0 5px; font-size: 11px; font-weight: bold; }
.notes-about { margin: 0 0 4px; line-height: 1.5; }
.annotation { margin-bottom: 8px; }
.annotation-line {
  margin: 0 0 3px; padding: 4px 6px; font-style: italic; line-height: 1.4;
  background: #ffffcc; border-left: 3px solid var(--navy);
}
.annotation-note { margin: 0; padding-left: 6px; line-height: 1.45; color: #222; }
.notes-credit { margin: 10px 0 0; font-size: 10px; color: #555; }
.reroll { margin-top: 2px; font-size: 11px; padding: 3px 10px; min-width: 0; }

/* Credits and connections: role on the left, names on the right, ruled like a
   liner-notes table. */
.credits { margin: 0 0 4px; display: grid; }
.credits > div {
  display: flex; gap: 8px; padding: 3px 0;
  border-bottom: 1px dotted #b0b0b0;
}
.credits > div:last-child { border-bottom: 0; }
.credits dt { flex: 0 0 40%; color: #444; }
.credits dd { margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.notes-media { margin: 8px 0 0; }

/* --------------------------------------------------------- hit counter --- */
.counter { display: flex; gap: 1px; justify-content: center; padding: 4px; background: #000; }
.counter b {
  width: 14px; padding: 2px 0; text-align: center;
  font: bold 14px/1 var(--mono); color: #33ff33; background: #062006; border: 1px solid #0a4a0a;
}
.counter-note { margin-top: 5px; text-align: center; font-size: 10px; color: #333; }

/* ------------------------------------------------------------- blinkies -- */
.blinkies { display: grid; gap: 5px; justify-items: center; }
.blinkie {
  position: relative; overflow: hidden;
  width: 150px; height: 20px; display: grid; place-items: center;
  font: bold 9px/1 Verdana, var(--font); letter-spacing: .3px;
  color: #fff; text-shadow: 1px 1px 0 #000;
  border: 1px solid #000;
  animation: blink 1.1s steps(1, end) infinite;
}
.blinkie::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 3px 4px, rgba(255, 255, 255, .95) 0 1px, transparent 1.3px),
    radial-gradient(circle at 11px 13px, rgba(255, 255, 255, .8) 0 1px, transparent 1.3px);
  background-size: 16px 16px;
  animation: sparkle 1.4s linear infinite;
}
.blinkie span { position: relative; z-index: 1; }
@keyframes blink { 0%, 55% { filter: none; } 56%, 100% { filter: brightness(1.45) saturate(1.5); } }
@keyframes sparkle { to { background-position: 16px 0, -16px 0; } }

.blinkie.b-pink   { background: linear-gradient(90deg, #ff5bb0, #ff9ad5, #ff5bb0); }
.blinkie.b-cyan   { background: linear-gradient(90deg, #00c2c7, #6ff0ff, #00c2c7); }
.blinkie.b-lime   { background: linear-gradient(90deg, #2f8f00, #8cff2f, #2f8f00); }
.blinkie.b-purple { background: linear-gradient(90deg, #5b2fb0, #b48cff, #5b2fb0); }
.blinkie.b-fire   { background: linear-gradient(90deg, #b02f00, #ffb800, #b02f00); }

.buttons88 { display: grid; grid-template-columns: repeat(2, 88px); gap: 4px; justify-content: center; }
.btn88 {
  width: 88px; height: 31px; padding: 2px;
  display: grid; place-items: center; text-align: center;
  font: bold 8px/1.15 Verdana, var(--font);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  text-decoration: none;
}
.btn88:hover { filter: brightness(1.15); }
.btn88.k-1 { background: linear-gradient(180deg, #000 50%, #202060 50%); color: #0f0; }
.btn88.k-2 { background: linear-gradient(180deg, #ffd800 50%, #ff8a00 50%); color: #000; }
.btn88.k-3 { background: linear-gradient(180deg, #4b0082 50%, #8a2be2 50%); color: #fff; }
.btn88.k-4 { background: linear-gradient(180deg, #c0c0c0 50%, #808080 50%); color: #000; }
.btn88:visited { color: inherit; }

/* --------------------------------------------------- under construction -- */
.construction {
  margin: 0 0 7px; padding: 4px; text-align: center;
  font: bold 11px var(--font);
  background: repeating-linear-gradient(45deg, #ffd800 0 10px, #1a1a1a 10px 20px);
  border: 2px solid; border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
}
.construction span { background: #ffd800; padding: 2px 8px; border: 1px solid #000; }

/* ----------------------------------------------------------- cd player --- */
.cd { display: grid; gap: 6px; }
.cd-top { display: flex; gap: 7px; }
.cd-art {
  width: 54px; height: 54px; flex: 0 0 auto;
  background: repeating-conic-gradient(from 0deg, #b8b8c8 0deg 12deg, #e8e8f4 12deg 24deg);
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  position: relative;
}
.cd-art::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--face); border: 1px solid #666;
}
/* Once a cover is picked it covers the disc art entirely, spindle and all. */
.cd-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.cd-art:has(img:not([hidden]))::after { display: none; }

.cd-fields { flex: 1 1 auto; display: grid; gap: 4px; align-content: start; font-size: 11px; }
.cd-field { display: flex; align-items: center; gap: 5px; margin: 0; }
.cd-field label { width: 34px; flex: 0 0 auto; }
.cd-field output,
.cd-field input {
  flex: 1 1 auto; min-width: 0; padding: 2px 4px;
  background: #fff; color: #000; font: 11px var(--font);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
}
.cd-field input:focus { outline: 1px dotted #000; outline-offset: -3px; }

/* ------------------------------------------------------- track search --- */
/* The results drop below the window's own edge, so this one body must not clip
   its contents the way the scrolling ones do. */
#cd-win .win-body { overflow: visible; }

.cd-search { position: relative; }
.cd-results {
  position: absolute; left: 39px; right: 0; top: 100%; z-index: 60;
  margin: 1px 0 0; padding: 0; list-style: none;
  max-height: 168px; overflow-y: auto;
  background: #fff;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .35);
}
.cd-results[hidden] { display: none; }
.cd-results li {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 5px; font-size: 11px; line-height: 1.25; cursor: default;
}
.cd-results li[aria-selected="true"] { background: var(--navy); color: #fff; }
.cd-results li[aria-selected="true"] .cd-r-artist { color: #b9d4ff; }
.cd-results img {
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 1px solid var(--sh); background: var(--face); object-fit: cover;
}
.cd-r-text { min-width: 0; }
.cd-r-track { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cd-r-artist { display: block; color: #555; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cd-note { padding: 4px 6px; font-size: 11px; color: #555; }
.cd-seek {
  position: relative; height: 12px; padding: 2px;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh); background: #fff;
}
.cd-seek i {
  position: absolute; top: 2px; bottom: 2px; left: 0; width: 8px;
  background: var(--face); border: 1px solid #000;
  transition: left .18s linear;
}

/* Transport keys. They control nothing but the needle — no audio is loaded —
   but they press in properly, which is the whole point of a fake CD player. */
.cd-keys { display: flex; gap: 3px; }
.cd-keys button {
  flex: 1 1 auto; padding: 4px 0; font: 10px/1 var(--font); color: #000; cursor: default;
  background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--sh);
}
.cd-keys button:active,
.cd-keys button[aria-pressed="true"] {
  border-color: var(--sh-2) var(--hi) var(--hi) var(--sh-2);
  box-shadow: none;
  padding: 5px 0 3px;
}
.cd-keys button:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.cd-keys button[data-cd="rec"] { color: #a00000; }
.cd-keys button[data-cd="rec"].blinking { color: #fff; background: #cc0000; }

/* ----------------------------------------------------------- guestbook --- */
.gb-form { display: grid; gap: 5px; }
.gb-form label { font-size: 11px; font-weight: bold; }
.gb-form input, .gb-form textarea {
  width: 100%; padding: 3px; font: 12px var(--font); color: #000; background: #fff;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
}
.gb-form textarea { resize: vertical; min-height: 48px; }

.btn95 {
  min-width: 75px; padding: 4px 12px; cursor: default;
  font: 12px var(--font); color: #000; background: var(--face);
  border: 2px solid; border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi);
  box-shadow: inset 1px 1px 0 var(--hi-2), inset -1px -1px 0 var(--sh);
}
.btn95:active { border-color: var(--sh-2) var(--hi) var(--hi) var(--sh-2); box-shadow: none; }
.btn95:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.gb-entries { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.gb-entry { padding: 4px 6px; font-size: 11px; background: #fff; border: 1px solid #a0a0a0; }
.gb-entry b { color: var(--navy); }
.gb-entry time { color: #666; font-size: 10px; }
.gb-entry p { margin: 3px 0 0; overflow-wrap: anywhere; }
.gb-note { margin: 6px 0 0; font-size: 10px; color: #333; }

/* Rolled up: the classic window shade — only the title bar is left. */
.window.shaded > :not(.title-bar) { display: none; }
.window.shaded { padding-bottom: 3px; }

.window.maximized {
  left: 6px !important; top: 6px !important;
  width: calc(100% - 12px) !important;
}

/* ============================================================ responsive = */
/* Below this width, absolute windows are unusable: they stack in flow instead
   and dragging is switched off by the script. */
@media (max-width: 820px) {
  .desktop { padding: 6px; overflow: visible; }
  .desk-icons {
    position: static; width: auto; grid-auto-flow: column; justify-content: start;
    gap: 6px; margin-bottom: 10px;
  }
  .window {
    position: static !important;
    width: auto !important; max-width: 100%; margin: 0 0 10px;
  }
  .title-bar { cursor: default; }
  .win-body.scroll { max-height: none; }
  .buttons88 { grid-template-columns: repeat(auto-fit, 88px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; }
  .marquee span { padding-left: 0; }
}


/* ============================================================== browser == */
/* blog.exe wears a 1999 browser: toolbar, address bar, status line — and the
   page loaded inside it is styled like the personal sites of the time, black
   background and all. The chrome is decoration; only the grip and the window
   buttons actually do anything. */
.browser-bar {
  display: flex; align-items: stretch; gap: 2px; padding: 3px 4px;
  border-bottom: 1px solid var(--sh);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 44px; padding: 3px 6px 2px; cursor: default;
  font: 10px/1 var(--font); color: #000; background: var(--face);
  border: 2px solid transparent;
}
.nav-btn:hover { border-color: var(--hi) var(--sh-2) var(--sh-2) var(--hi); }
.nav-btn:active { border-color: var(--sh-2) var(--hi) var(--hi) var(--sh-2); padding: 4px 5px 1px 7px; }
.nav-btn:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }

/* Toolbar pictograms, drawn rather than loaded — five shapes, no files. */
.nav-ico { width: 20px; height: 18px; position: relative; }
.nav-ico::before, .nav-ico::after { content: ''; position: absolute; }
.nav-ico.back::before, .nav-ico.fwd::before {
  left: 3px; top: 3px; border: 6px solid transparent; border-right-color: #1c6b2e; border-left: 0;
}
.nav-ico.fwd::before { transform: scaleX(-1); left: 5px; }
.nav-ico.reload::before {
  left: 3px; top: 2px; width: 13px; height: 13px; border: 3px solid #1c5e8a;
  border-radius: 50%; border-right-color: transparent;
}
.nav-ico.home::before {
  left: 2px; top: 7px; width: 15px; height: 9px; background: #b25a1a; border: 1px solid #000;
}
.nav-ico.home::after {
  left: 1px; top: 2px; border: 8px solid transparent; border-bottom-color: #d97b2c; border-top: 0;
}
.nav-ico.print::before {
  left: 2px; top: 6px; width: 16px; height: 9px; background: #9a9a9a; border: 1px solid #000;
}
.nav-ico.print::after { left: 5px; top: 2px; width: 10px; height: 5px; background: #fff; border: 1px solid #000; }
.nav-ico.stop::before {
  left: 3px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #c62828; border: 1px solid #7a1111;
}
.nav-ico.stop::after { left: 6px; top: 8px; width: 8px; height: 2px; background: #fff; }

.bar-sep { width: 2px; margin: 2px 3px; border-left: 1px solid var(--sh); border-right: 1px solid var(--hi); }

.browser-location {
  display: flex; align-items: center; gap: 6px; padding: 3px 5px;
  font-size: 11px; border-bottom: 1px solid var(--sh);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.loc-label { flex: 0 0 auto; }
.loc-field {
  flex: 1 1 auto; padding: 2px 5px; background: #fff; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
}

/* ========================================================== the page 1999 = */
.page99 {
  padding: 0;
  color: #ffffff;
  background-color: #000;
  /* The starfield every homepage had, tiled. */
  background-image:
    radial-gradient(circle at 14px 20px, #fff 0 1px, transparent 1.3px),
    radial-gradient(circle at 52px 9px, #cfe4ff 0 1px, transparent 1.3px),
    radial-gradient(circle at 33px 58px, #fff 0 1px, transparent 1.3px),
    radial-gradient(circle at 70px 44px, #fff2c0 0 1px, transparent 1.3px);
  background-size: 84px 84px;
}

.page-head { padding: 14px 10px 8px; text-align: center; position: relative; }
.page-title {
  margin: 0; font: bold 30px/1.1 'Times New Roman', Georgia, serif;
  color: #ffd700; letter-spacing: 1px;
  text-shadow: 2px 2px 0 #6b4f00, 0 0 10px rgba(255, 215, 0, .45);
}
.page-sub { margin: 4px 0 10px; font: italic 13px 'Times New Roman', Georgia, serif; color: #fff; }

/* The butterfly, flapping away next to the title. */
.butterfly { width: 64px; height: auto; image-rendering: auto; margin: 0 auto 4px; display: block; }
.butterfly.small { width: 40px; margin-bottom: 6px; }

.page-cols { display: grid; gap: 10px; grid-template-columns: 1fr; padding: 0 10px 10px; }
@media (min-width: 560px) { .page-cols { grid-template-columns: 168px minmax(0, 1fr); } }

/* Left rail of links with a caption under each — the Danny's Homepage school. */
.page-side { text-align: center; }
.side-head {
  margin: 12px 0 6px; font: bold 11px var(--font); color: #00ffff; letter-spacing: 1px;
}
.side-head:first-child { margin-top: 0; }
.side-menu { list-style: none; margin: 0 0 4px; padding: 0; }
.side-menu li { margin-bottom: 8px; }
.side-menu a {
  display: block; font: bold 14px 'Times New Roman', Georgia, serif;
  color: #6cf; text-decoration: underline;
}
.side-menu a:visited { color: #b98cff; }
.side-menu a:hover { color: #ff0; }
.side-menu span { display: block; font-size: 10px; color: #cfcfcf; }

.page-side .blinkies { gap: 4px; }
.page-side .buttons88 { grid-template-columns: repeat(auto-fit, 88px); }
.page-side .counter { padding: 3px; }
.page-side .counter-note { color: #bdbdbd; }

.page-main { min-width: 0; }

/* Posts on the dark page: a lighter panel, still bordered like everything else. */
.page99 .post {
  background: #101018; color: #f2f2f2;
  border: 2px solid; border-color: #5a5a72 #26263a #26263a #5a5a72;
}
.page99 .post-head {
  background: linear-gradient(90deg, #2a1a5e 0%, #6d3fbe 100%);
}
.page99 .post-meta { background: #262010; border-color: #6b5a1a; color: #ffe98a; }
.page99 .post-meta b { color: #ff9de2; }
.page99 .post a { color: #6cf; }
.page99 .post a:visited { color: #b98cff; }
.page99 .post code { background: #1e1e2c; border-color: #45455e; color: #b7f7c0; }
.page99 .construction { margin: 0 0 10px; }

.page-foot {
  padding: 10px; text-align: center; font-size: 11px; color: #cfcfcf;
  border-top: 1px dashed #555;
}
.page-foot p { margin: 0; }


/* =============================================================== the eggs = */
/* The butterfly is a button, but nothing about it says so — no border, no
   focus ring until you tab to it. */
.butterfly-btn {
  display: block; margin: 0 auto; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.butterfly-btn:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }
.butterfly-btn:hover .butterfly { filter: brightness(1.15) saturate(1.2); }

/* The viewer the butterfly opens. */
.eyes-body { padding: 3px; background: #000; }
.eyes-body img { display: block; width: 100%; height: auto; }

/* The runner. Crosses the marquee once, then hides again. */
.marquee { position: relative; }
.dino {
  position: absolute; left: 0; top: 50%; z-index: 2;
  height: 22px; width: auto;
  transform: translate(-120px, -50%);
  image-rendering: pixelated;
  pointer-events: none;
}
.dino.running { animation: dino-run 5s linear 1; }
@keyframes dino-run {
  from { transform: translate(-120px, -50%); }
  to   { transform: translate(calc(100vw + 120px), -50%); }
}

/* Print, twice: a console window opens on its own, shows what it came to show
   and shuts again two seconds later. */
.console-win .title-bar { background: linear-gradient(90deg, #000 0%, #3a3a3a 100%); }
.console-body {
  padding: 6px; background: #000; color: #c0c0c0;
  font: 12px/1.3 var(--mono);
  border: 2px solid; border-color: var(--sh) var(--hi) var(--hi) var(--sh);
}
.console-line { margin: 0 0 5px; color: #b8b8b8; }
.console-body img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .dino.running { animation-duration: 5s; }   /* still crosses, just no flicker elsewhere */
}

/* ========================================================= icon selection = */
/* One click picks, Ctrl adds, a drag across the desktop lassos, a click on bare
   desktop clears. Opening is a double click, the way it always was. */
.desk-icon .ico { position: relative; }
.desk-icon.selected .ico::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0, 0, 128, .45);
  mix-blend-mode: multiply;
}
.desk-icon.selected span:last-child {
  background: var(--navy); color: #fff;
  outline: 1px dotted #b9c8ff; outline-offset: -1px;
  text-shadow: none;
}

.selection-box {
  position: absolute; z-index: 8000; pointer-events: none;
  width: 0; height: 0;
  border: 1px dotted #fff;
  background: rgba(0, 0, 128, .22);
}

/* The honeypot has to be reachable to a bot parsing the HTML and invisible to
   everyone else — off-screen rather than display:none, which some bots skip. */
.trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.gb-status { margin: 4px 0 0; font-size: 11px; color: #000080; min-height: 14px; }