/* ============================================================
   ~*~ JULIE'S CAULDRON ~*~  era-1990.css
   it's 1997. you're on a 486 at the computer lab. the site is
   open in Netscape Navigator 3.0 on Windows 95. teal desktop,
   gray beveled everything, blue underlined links. :3
   only applies when <html data-era="1990">.
   (the menu/tool/location/status bars are added by js/era-1990.js)
   ============================================================ */

html[data-era="1990"] {
  --w95-face: #c0c0c0;
  --w95-light: #dfdfdf;
  --w95-hi: #ffffff;
  --w95-shadow: #808080;
  --w95-dark: #0a0a0a;
  --w95-navy: #000080;
  --w95-blue: #1084d0;
  --w95-ui: Tahoma, "MS Sans Serif", "Microsoft Sans Serif", "Segoe UI", Geneva, Verdana, sans-serif;
  --w95-serif: "Times New Roman", Times, "Liberation Serif", serif;
  /* raised window frame */
  --w95-window: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-light), inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-hi);
  /* raised push button */
  --w95-raised: inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-hi), inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-light);
  /* pushed-in button */
  --w95-pressed: inset -1px -1px var(--w95-hi), inset 1px 1px var(--w95-dark), inset -2px -2px var(--w95-light), inset 2px 2px var(--w95-shadow);
  /* sunken text field */
  --w95-sunken: inset -1px -1px var(--w95-hi), inset 1px 1px var(--w95-shadow), inset -2px -2px var(--w95-light), inset 2px 2px var(--w95-dark);
  /* thin status bar cell */
  --w95-cell: inset -1px -1px var(--w95-hi), inset 1px 1px var(--w95-shadow);
  /* title bar buttons: minimize, maximize, close */
  --w95-tbtns: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='14'><defs><g id='b'><rect width='16' height='14' fill='%230a0a0a'/><rect width='15' height='13' fill='%23fff'/><rect x='1' y='1' width='14' height='12' fill='%23808080'/><rect x='1' y='1' width='13' height='11' fill='%23dfdfdf'/><rect x='2' y='2' width='12' height='10' fill='%23c0c0c0'/></g></defs><use href='%23b'/><rect x='4' y='9' width='6' height='2' fill='%23000'/><use href='%23b' x='16'/><path d='M19 2h9v9h-9z M20 4v6h7v-6z' fill='%23000' fill-rule='evenodd'/><use href='%23b' x='34'/><path d='M38 3l7 7M45 3l-7 7' stroke='%23000' stroke-width='1.7'/></svg>");
  /* little pumpkin app icon */
  --w95-appicon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='7' y='1' width='2' height='3' fill='%23008000'/><path d='M3 5h10v1h1v2h1v4h-1v1h-1v1h-10v-1h-1v-1h-1v-4h1v-2h1z' fill='%23ff8000' stroke='%23000' stroke-width='0'/><rect x='4' y='7' width='2' height='2' fill='%23000'/><rect x='10' y='7' width='2' height='2' fill='%23000'/><path d='M4 10h8v1h-1v1h-6v-1h-1z' fill='%23000'/></svg>");
  --w95-folder: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path d='M1.5 3.5h5l1 1h7v9h-13z' fill='%23ffe680' stroke='%23000'/><path d='M2 5.5h5l1-1' fill='none' stroke='%23fff'/><path d='M2 6h12.5' stroke='%23c8a000'/></svg>");
  --w95-folder-open: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path d='M1.5 3.5h5l1 1h5v3' fill='%23ffe680' stroke='%23000'/><path d='M1.5 13.5v-10' stroke='%23000'/><path d='M1.5 13.5l2.5-6h11.5l-2.5 6z' fill='%23fff3b0' stroke='%23000'/></svg>");
  --w95-drive: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='1.5' y='5.5' width='13' height='6' fill='%23c0c0c0' stroke='%23000'/><path d='M2 6h12' stroke='%23fff'/><rect x='11' y='8' width='2' height='1' fill='%2300c000'/><rect x='3' y='8' width='6' height='1' fill='%23808080'/></svg>");
  --w95-check: repeating-conic-gradient(#c0c0c0 0 25%, #ffffff 0 50%) 0 0 / 2px 2px;

  --w95-text: #000;
  --w95-selbtn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17'><rect width='16' height='17' fill='%230a0a0a'/><rect width='15' height='16' fill='%23dfdfdf'/><rect x='1' y='1' width='14' height='15' fill='%23808080'/><rect x='1' y='1' width='13' height='14' fill='%23fff'/><rect x='2' y='2' width='12' height='13' fill='%23c0c0c0'/><path d='M4.5 7h7L8 10.5z' fill='%23000'/></svg>");
  --w95-paper: #fff;
  cursor: auto;
}

/* ---------- the desktop ---------- */
html[data-era="1990"] body {
  color: var(--w95-text);
  font-family: var(--w95-serif);
  font-size: 16px;
  background-color: #008080;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='1' height='1' fill='%23000' opacity='.06'/><rect x='2' y='2' width='1' height='1' fill='%23fff' opacity='.05'/></svg>");
  background-attachment: scroll;
}
html[data-era="1990"] a:hover { cursor: pointer; }
html[data-era="1990"] ::selection { background: var(--w95-navy); color: #fff; }

/* win95 scrollbars (page + a few inner boxes) */
html[data-era="1990"]::-webkit-scrollbar,
html[data-era="1990"] #content textarea::-webkit-scrollbar,
html[data-era="1990"] .navi-output::-webkit-scrollbar { width: 16px; height: 16px; }
html[data-era="1990"]::-webkit-scrollbar-track,
html[data-era="1990"] #content textarea::-webkit-scrollbar-track,
html[data-era="1990"] .navi-output::-webkit-scrollbar-track { background: var(--w95-check); }
html[data-era="1990"]::-webkit-scrollbar-thumb,
html[data-era="1990"] #content textarea::-webkit-scrollbar-thumb,
html[data-era="1990"] .navi-output::-webkit-scrollbar-thumb { background: var(--w95-face); border: 0; box-shadow: var(--w95-raised); }
html[data-era="1990"]::-webkit-scrollbar-button:single-button {
  display: block; height: 16px; width: 16px;
  background-color: var(--w95-face); box-shadow: var(--w95-raised);
  background-repeat: no-repeat; background-position: center;
}
html[data-era="1990"]::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3.5 0L7 4H0z'/></svg>");
}
html[data-era="1990"]::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M0 0h7L3.5 4z'/></svg>");
}
html[data-era="1990"]::-webkit-scrollbar-button:single-button:active { box-shadow: var(--w95-cell); }

/* ============================================================
   THE NETSCAPE WINDOW
   ============================================================ */
html[data-era="1990"] #wrapper,
html[data-era="1990"] #wrapper-bottom {
  width: 960px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  margin: 14px auto 40px;
  padding: 3px;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window), 2px 2px 0 rgba(0, 0, 0, .25);
  font-family: var(--w95-serif);
}

/* title bar */
html[data-era="1990"] #wrapper::before {
  content: "Netscape - [Julie's Cauldron]";
  display: block;
  height: 18px;
  line-height: 18px;
  padding: 0 60px 0 22px;
  margin-bottom: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: bold 11px/18px var(--w95-ui);
  color: #fff;
  letter-spacing: 0;
  background:
    var(--w95-tbtns) right 2px center / 50px 14px no-repeat,
    var(--w95-appicon) 3px center / 16px 16px no-repeat,
    linear-gradient(90deg, var(--w95-navy), var(--w95-blue));
  -webkit-font-smoothing: none;
}
html[data-era="1990"] #wrapper[data-w95-title]::before { content: attr(data-w95-title); }

/* ----- the document area (everything between the toolbars and status bar) ----- */
html[data-era="1990"] #header,
html[data-era="1990"] .marquee-strip,
html[data-era="1990"] #layout,
html[data-era="1990"] #footer {
  border-left: 2px solid var(--w95-shadow);
  border-right: 2px solid var(--w95-hi);
}

/* the page "banner" (like a big banner.gif) */
html[data-era="1990"] #header {
  padding: 16px 10px 10px;
  border-top: 2px solid var(--w95-shadow);
  border-bottom: 0;
  background-color: #000;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='64'><rect x='12' y='9' width='1' height='1' fill='%23fff'/><rect x='70' y='20' width='1' height='1' fill='%23ffff80'/><rect x='40' y='44' width='1' height='1' fill='%23fff'/><rect x='86' y='55' width='1' height='1' fill='%23aaa'/><rect x='25' y='58' width='1' height='1' fill='%23aaa'/><rect x='55' y='5' width='1' height='1' fill='%23aaa'/></svg>"),
    linear-gradient(#000 0%, #1c0033 100%);
}
html[data-era="1990"] #header .title {
  font-family: var(--w95-serif);
  font-style: italic;
  font-weight: bold;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: 0;
  color: #ff8c1a;
  animation: none;
  /* WordArt (tm) extrude */
  text-shadow:
    1px 1px 0 #a020f0, 2px 2px 0 #9010e0, 3px 3px 0 #7a00c8, 4px 4px 0 #5e00a0, 5px 5px 0 #400070,
    6px 6px 6px rgba(0, 0, 0, .8);
}
html[data-era="1990"] #header .subtitle {
  font-family: var(--w95-serif);
  font-style: italic;
  font-size: 17px;
  color: #ffd27f;
  text-shadow: none;
  margin: 8px 0 2px;
}

/* <marquee> on a plain white page, in red, as god intended */
html[data-era="1990"] .marquee-strip {
  background: #ffffcc;
  color: #cc0000;
  border-top: 0;
  border-bottom: 1px solid #c8c890;
  font-family: var(--w95-serif);
  font-weight: bold;
  font-size: 16px;
  padding: 3px 0;
}

/* frames page: left nav frame + main frame */
html[data-era="1990"] #layout {
  align-items: stretch;
  background: var(--w95-paper);
}

/* ============================================================
   LEFT FRAME: explorer-style tree + group boxes
   ============================================================ */
html[data-era="1990"] #sidebar {
  width: 196px;
  padding: 8px 8px 12px;
  border-right: 0;
  background: var(--w95-face);
  box-shadow: inset -1px 0 var(--w95-hi), inset -5px 0 var(--w95-face), inset -6px 0 var(--w95-shadow), inset -7px 0 var(--w95-dark);
  padding-right: 15px;
  font-family: var(--w95-ui);
  font-size: 11px;
  color: var(--w95-text);
}

/* the little pane header ("All Folders") */
html[data-era="1990"] #sidebar .nav-title {
  font: 11px/1 var(--w95-ui);
  color: var(--w95-text);
  background: var(--w95-face);
  text-align: left;
  padding: 4px 6px;
  margin: 0 0 3px;
  border: 0;
  box-shadow: var(--w95-raised);
}

/* the tree */
html[data-era="1990"] #sidebar #nav {
  margin: 0 0 16px;
  padding: 6px 4px 6px 4px;
  background: var(--w95-paper);
  box-shadow: var(--w95-sunken);
  list-style: none;
}
html[data-era="1990"] #sidebar #nav::before {
  content: "Cauldron (C:)";
  display: block;
  padding: 1px 0 3px 20px;
  font: 11px/16px var(--w95-ui);
  background: var(--w95-drive) 0 1px / 16px 16px no-repeat;
}
html[data-era="1990"] #sidebar #nav li {
  position: relative;
  margin: 0;
  padding: 1px 0 1px 22px;
}
/* dotted tree lines */
html[data-era="1990"] #sidebar #nav li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  border-left: 1px dotted var(--w95-shadow);
}
html[data-era="1990"] #sidebar #nav li:last-child::before { bottom: 50%; }
html[data-era="1990"] #sidebar #nav li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 10px;
  border-top: 1px dotted var(--w95-shadow);
}
html[data-era="1990"] #sidebar #nav a {
  position: relative;
  display: inline-block;
  margin-left: 18px;
  padding: 1px 3px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--w95-text);
  font: 11px/14px var(--w95-ui);
  font-weight: normal;
  text-decoration: none;
  text-shadow: none;
}
html[data-era="1990"] #sidebar #nav a::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 0;
  width: 16px;
  height: 16px;
  background: var(--w95-folder) center / 16px 16px no-repeat;
}
html[data-era="1990"] #sidebar #nav a:visited { color: var(--w95-text); }
html[data-era="1990"] #sidebar #nav a:hover {
  color: var(--w95-navy);
  background: transparent;
  text-decoration: underline;
  text-shadow: none;
  border-style: solid;
}
html[data-era="1990"] #sidebar #nav a:hover::before { content: ""; }
html[data-era="1990"] #sidebar #nav a.here {
  background: var(--w95-navy);
  color: #fff;
  border: 1px dotted #ffff80;
}
html[data-era="1990"] #sidebar #nav a.here::before { content: ""; background-image: var(--w95-folder-open); }

/* side boxes become etched group boxes */
html[data-era="1990"] #sidebar .side-box {
  position: relative;
  margin: 16px 0 12px;
  padding: 14px 7px 8px;
  background: transparent;
  border: 1px solid var(--w95-shadow);
  box-shadow: inset 1px 1px var(--w95-hi), 1px 1px var(--w95-hi);
  font-size: 11px;
  text-align: center;
}
html[data-era="1990"] #sidebar .side-box .box-title {
  position: absolute;
  top: -7px;
  left: 7px;
  margin: 0;
  padding: 0 3px;
  border: 0;
  background: var(--w95-face);
  color: var(--w95-text);
  font: 11px/13px var(--w95-ui);
  text-align: left;
  letter-spacing: 0;
}
html[data-era="1990"] #sidebar .side-box img { max-width: 100%; height: auto; }
html[data-era="1990"] #sidebar .tiny { font-size: 10px; }
html[data-era="1990"] #sidebar .small { font-size: 11px; }
html[data-era="1990"] #sidebar #mood { font: bold 12px var(--w95-ui); }

/* now playing = a sunken little field */
html[data-era="1990"] #now-playing {
  font: 11px/16px var(--w95-ui);
  color: var(--w95-text);
  background: var(--w95-paper);
  box-shadow: var(--w95-sunken);
  padding: 3px 4px;
  margin-top: 6px;
  text-shadow: none;
}

/* classic web counter.gif */
html[data-era="1990"] #wrapper .counter {
  background: #000;
  padding: 2px;
  gap: 1px;
  border: 0;
  box-shadow: 0 0 0 1px var(--w95-shadow), 1px 1px 0 1px var(--w95-hi);
}
html[data-era="1990"] #wrapper .counter span {
  width: 13px;
  font: bold 16px/22px "Courier New", Courier, monospace;
  color: #fff;
  background: linear-gradient(#333, #000 50%, #222 50%, #000);
  border: 1px solid #555;
  text-shadow: none;
}

html[data-era="1990"] #wrapper .countdown {
  display: block;
  margin: 2px 0 6px;
  padding: 4px 3px;
  background: var(--w95-paper);
  box-shadow: var(--w95-sunken);
  font: bold 13px/1.3 var(--w95-ui);
  color: #800000;
  text-shadow: none;
}

/* ============================================================
   PUSH BUTTONS
   ============================================================ */
html[data-era="1990"] #wrapper .btn,
html[data-era="1990"] #wrapper-bottom .btn,
html[data-era="1990"] .realm .btn,
html[data-era="1990"] .enter-box .enter-link {
  font: 11px/1.2 var(--w95-ui);
  font-weight: normal;
  color: var(--w95-text);
  background: var(--w95-face);
  border: 0;
  border-radius: 0;
  padding: 5px 12px;
  min-height: 23px;
  box-shadow: var(--w95-raised);
  text-shadow: none;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0;
}
html[data-era="1990"] #wrapper a.btn { display: inline-block; }
html[data-era="1990"] #wrapper .btn:hover,
html[data-era="1990"] .realm .btn:hover { color: var(--w95-text); text-shadow: none; filter: none; }
html[data-era="1990"] #wrapper .btn:active,
html[data-era="1990"] #wrapper-bottom .btn:active,
html[data-era="1990"] .realm .btn:active,
html[data-era="1990"] .enter-box .enter-link:active {
  box-shadow: var(--w95-pressed);
  padding: 6px 11px 4px 13px;
}
html[data-era="1990"] #wrapper .btn:focus-visible,
html[data-era="1990"] .realm .btn:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px;
}
html[data-era="1990"] #sidebar #music-box .btn { width: 100%; }
html[data-era="1990"] #sidebar #music-next { margin-top: 3px; }

/* ============================================================
   MAIN FRAME: a plain 1997 web page
   ============================================================ */
html[data-era="1990"] #content {
  background: var(--w95-paper);
  color: var(--w95-text);
  padding: 14px 22px 20px;
  font-family: var(--w95-serif);
  font-size: 16px;
  line-height: 1.35;
}
html[data-era="1990"] #content p { margin: 10px 0; }

html[data-era="1990"] #content h1,
html[data-era="1990"] #content h2,
html[data-era="1990"] #content h3 {
  font-family: var(--w95-serif);
  font-weight: bold;
  letter-spacing: 0;
  text-shadow: none;
}
html[data-era="1990"] #content h1 {
  font-size: 34px;
  color: #d35400;
  margin: 8px 0 12px;
}
html[data-era="1990"] #content h2 {
  font-size: 24px;
  color: #5a0099;
  margin: 26px 0 10px;
  padding-bottom: 6px;
  /* the beveled <hr> under every heading */
  border-bottom: 2px solid;
  border-image: linear-gradient(var(--w95-shadow) 50%, #fff 50%) 0 0 2 0 / 0 0 2px 0;
  box-shadow: 0 1px 0 #e6e6e6;
}
html[data-era="1990"] #content h3 { font-size: 19px; color: #993300; margin: 16px 0 6px; }

html[data-era="1990"] #wrapper a:not(.b88):not(.btn),
html[data-era="1990"] #wrapper-bottom a:not(.b88):not(.btn) { color: #0000ee; font-weight: normal; text-decoration: underline; }
html[data-era="1990"] #wrapper a:not(.b88):not(.btn):visited,
html[data-era="1990"] #wrapper-bottom a:not(.b88):not(.btn):visited { color: #551a8b; }
html[data-era="1990"] #wrapper a:not(.b88):not(.btn):hover,
html[data-era="1990"] #wrapper-bottom a:not(.b88):not(.btn):hover { color: #0000ee; text-shadow: none; }
html[data-era="1990"] #wrapper a:not(.b88):not(.btn):active,
html[data-era="1990"] #wrapper-bottom a:not(.b88):not(.btn):active { color: #ff0000; }

/* text effects, recolored for a white page */
html[data-era="1990"] #wrapper .glow-green,
html[data-era="1990"] #wrapper-bottom .glow-green { color: #007a00; text-shadow: none; }
html[data-era="1990"] #wrapper .glow-purple,
html[data-era="1990"] #wrapper-bottom .glow-purple { color: #7a1fa2; text-shadow: none; }
html[data-era="1990"] #wrapper .glow-orange,
html[data-era="1990"] #wrapper-bottom .glow-orange { color: #c04a00; text-shadow: none; }
html[data-era="1990"] #wrapper .rainbow,
html[data-era="1990"] #wrapper-bottom .rainbow {
  background-image: linear-gradient(90deg, #cc0000, #d36b00, #008000, #0000cc, #800080, #cc0000);
}
html[data-era="1990"] #content .small { font-size: 13px; }
html[data-era="1990"] #content .tiny { font-size: 11px; }
html[data-era="1990"] #content .pixel { font-family: var(--w95-ui); font-size: 12px; line-height: 1.6; }
html[data-era="1990"] #content .terminal { font-family: "Courier New", Courier, monospace; font-size: 15px; }
html[data-era="1990"] #content [style*="color:#ffae42"],
html[data-era="1990"] #content [style*="color: #ffae42"] { color: #c04a00 !important; }
html[data-era="1990"] #content [style*="color:#39ff14"] { color: #007a00 !important; }
html[data-era="1990"] #content [style*="color:#ff9de2"],
html[data-era="1990"] #content [style*="color:#ff3fa4"] { color: #c0007a !important; }
html[data-era="1990"] #content [style*="color:#d9a6ff"],
html[data-era="1990"] #content [style*="color:#c58bff"] { color: #7a1fa2 !important; }

html[data-era="1990"] #wrapper .sticker {
  background: #fff;
  border: 0;
  padding: 3px;
  box-shadow: var(--w95-raised);
}
html[data-era="1990"] #content hr,
html[data-era="1990"] #content hr.spooky {
  height: 0;
  border: 0;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid #fff;
  box-shadow: 0 1px 0 #e6e6e6;
  background: none;
  margin: 16px 0;
}

/* ----- panels: <table border=3 bgcolor=...> ----- */
html[data-era="1990"] #content .panel {
  border: 3px solid;
  border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);
  outline: 1px solid #a0a0a0;
  background: #f6f0ff;
  color: var(--w95-text);
  padding: 10px 16px;
  margin: 14px 0;
}
html[data-era="1990"] #content .panel.orange { background: #fff3e2; }
html[data-era="1990"] #content .panel.dashed {
  border: 2px dashed #a0a0a0;
  outline: 0;
  background: #fffdf0;
}

/* the update log is an MS-DOS Prompt window */
html[data-era="1990"] #content .panel.terminal {
  position: relative;
  padding: 25px 3px 3px;
  border: 0;
  outline: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
  font-family: "Courier New", Courier, monospace;
  font-size: 15px;
}
html[data-era="1990"] #content .panel.terminal::before {
  content: "MS-DOS Prompt - UPDATES.LOG";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 18px;
  padding-left: 22px;
  font: bold 11px/18px var(--w95-ui);
  color: #fff;
  background:
    var(--w95-tbtns) right 2px center / 50px 14px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect x='1' y='2' width='14' height='11' fill='%23000' stroke='%23c0c0c0'/><text x='3' y='10' font-family='monospace' font-size='7' fill='%23fff'>C:\</text></svg>") 3px center / 16px no-repeat,
    linear-gradient(90deg, var(--w95-navy), var(--w95-blue));
  -webkit-font-smoothing: none;
}
html[data-era="1990"] #content .panel.terminal p {
  margin: 0;
  padding: 2px 10px;
  background: #000;
  color: #c0c0c0;
}
html[data-era="1990"] #content .panel.terminal p:first-child { padding-top: 10px; }
html[data-era="1990"] #content .panel.terminal p:last-child { padding-bottom: 10px; }
html[data-era="1990"] #content .panel.terminal .glow-orange { color: #ffff55; }
html[data-era="1990"] #content .panel.terminal .glow-green { color: #55ff55; }
html[data-era="1990"] #content .panel.terminal .glow-purple { color: #ff55ff; }
html[data-era="1990"] #content .panel.terminal a { color: #55ffff; }

/* ----- tables: <table border=1 cellspacing=2> ----- */
html[data-era="1990"] #content table.myspace {
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid;
  border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);
  outline: 1px solid #a0a0a0;
  font-size: 15px;
  background: var(--w95-paper);
}
html[data-era="1990"] #content table.myspace td,
html[data-era="1990"] #content table.myspace th {
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-light) var(--w95-light) var(--w95-shadow);
  padding: 5px 7px;
}
html[data-era="1990"] #content table.myspace th {
  background: #ffcc80;
  color: var(--w95-text);
  font-family: var(--w95-serif);
  font-size: 14px;
  font-weight: bold;
}
html[data-era="1990"] #content table.myspace td { background: var(--w95-paper); }
html[data-era="1990"] #content table.myspace tr:nth-child(even) td { background: #f6f0ff; }

/* ----- footer: plain page bottom, then the status bar ----- */
html[data-era="1990"] #footer {
  background: var(--w95-paper);
  color: var(--w95-text);
  border-top: 0;
  border-bottom: 2px solid #fff;
  padding: 8px 12px 12px;
  font-family: var(--w95-serif);
  font-size: 13px;
}
html[data-era="1990"] #footer::before {
  content: "";
  display: block;
  height: 0;
  margin: 0 0 10px;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid #fff;
  box-shadow: 0 1px 0 #e6e6e6;
}
html[data-era="1990"] #footer .tiny { font-size: 11px; }
html[data-era="1990"] #footer .divider-img { display: none; }
html[data-era="1990"] .b88 { border-color: #999 #333 #333 #999; }

/* ============================================================
   NETSCAPE CHROME (elements made by js/era-1990.js)
   ============================================================ */
html[data-era="1990"] .w95-chrome,
html[data-era="1990"] .w95-status,
html[data-era="1990"] .w95-desktop {
  font: 11px/1.2 var(--w95-ui);
  color: var(--w95-text);
  -webkit-font-smoothing: none;
  user-select: none;
}
html[data-era="1990"] .w95-chrome { padding: 0 0 3px; }
html[data-era="1990"] .w95-menubar {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  padding: 1px 0 2px;
  white-space: nowrap;
}
html[data-era="1990"] .w95-menubar span { padding: 2px 6px; border: 1px solid transparent; }
html[data-era="1990"] .w95-menubar span:hover { border-color: #fff var(--w95-shadow) var(--w95-shadow) #fff; }
html[data-era="1990"] .w95-menubar u { text-decoration: underline; }

html[data-era="1990"] .w95-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 12px;
  border-top: 1px solid var(--w95-shadow);
  box-shadow: inset 0 1px var(--w95-hi);
  position: relative;
}
/* the grippy bit on the left of each toolbar */
html[data-era="1990"] .w95-bar::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px var(--w95-shadow);
}
html[data-era="1990"] .w95-tools { display: flex; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
html[data-era="1990"] .w95-tool {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  width: 50px;
  height: 40px;
  padding: 2px 0 3px;
  box-sizing: border-box;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  cursor: pointer;
}
html[data-era="1990"] .w95-tool svg { display: block; width: 24px; height: 22px; }
html[data-era="1990"] .w95-tool:active { box-shadow: var(--w95-pressed); padding: 3px 0 2px 1px; }
html[data-era="1990"] .w95-tool.off { color: var(--w95-shadow); text-shadow: 1px 1px #fff; cursor: default; }
html[data-era="1990"] .w95-tool.off svg { filter: grayscale(1) opacity(.45); }
html[data-era="1990"] .w95-tool.off:active { box-shadow: var(--w95-raised); padding: 2px 0 3px; }

/* the netscape "N" with the meteor shower */
html[data-era="1990"] .w95-throbber {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  overflow: hidden;
  box-shadow: var(--w95-sunken);
  background:
    radial-gradient(circle at 70% 25%, #fff 0 .6px, transparent 1.2px),
    radial-gradient(circle at 20% 70%, #fff 0 .5px, transparent 1px),
    radial-gradient(circle at 85% 80%, #ccf 0 .5px, transparent 1px),
    linear-gradient(160deg, #0a1a6e, #00063a 70%);
}
html[data-era="1990"] .w95-throbber b {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 30px/1 var(--w95-serif);
  color: #fff;
  text-shadow: 1px 1px 0 #000, 0 0 3px #6af;
}
html[data-era="1990"] .w95-throbber i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  transform: rotate(35deg) translate(-30px, -10px);
  opacity: 0;
}
html[data-era="1990"] .w95-chrome.loading .w95-throbber i { animation: w95-meteor .9s linear 3; }
html[data-era="1990"] .w95-chrome.loading .w95-throbber i:nth-of-type(2) { animation-delay: .35s; top: 12px; }
@keyframes w95-meteor {
  0% { opacity: 0; transform: rotate(35deg) translate(-20px, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: rotate(35deg) translate(50px, 0); }
}

html[data-era="1990"] .w95-locbar { padding-top: 4px; padding-bottom: 4px; gap: 6px; }
html[data-era="1990"] .w95-locbar .w95-bm {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}
html[data-era="1990"] .w95-locfield {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 4px 5px 3px;
  background: var(--w95-paper);
  box-shadow: var(--w95-sunken);
  font: 11px/14px var(--w95-ui);
}

/* "What's New? What's Cool?" directory buttons */
html[data-era="1990"] .w95-dirbar { padding-top: 3px; padding-bottom: 3px; gap: 2px; }
html[data-era="1990"] .w95-dirbar span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  padding: 3px 4px;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
}

/* status bar */
html[data-era="1990"] .w95-status {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  height: 20px;
}
html[data-era="1990"] .w95-status > span {
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-shadow: var(--w95-cell);
  white-space: nowrap;
  overflow: hidden;
}
html[data-era="1990"] .w95-status .w95-key { width: 22px; padding: 0; justify-content: center; }
html[data-era="1990"] .w95-status .w95-msg { flex: 1; min-width: 0; text-overflow: ellipsis; display: block; line-height: 20px; }
html[data-era="1990"] .w95-status .w95-prog { width: 110px; }
html[data-era="1990"] .w95-status .w95-cell { width: 28px; justify-content: center; }

/* desktop icons in the top-left corner (only when there's room) */
html[data-era="1990"] .w95-desktop {
  position: absolute;
  top: 10px;
  left: 6px;
  z-index: 1;
  display: none;
  flex-direction: column;
  gap: 18px;
  width: 76px;
  pointer-events: none;
}
html[data-era="1990"] .w95-desktop div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
html[data-era="1990"] .w95-desktop svg { width: 32px; height: 32px; display: block; }
html[data-era="1990"] .w95-desktop span { color: #fff; padding: 0 2px; line-height: 13px; }
@media (min-width: 1180px) {
  html[data-era="1990"] .w95-desktop { display: flex; }
}

/* ============================================================
   PAGE BITS
   ============================================================ */

/* ----- guestbook: the form is a dialog box ----- */
html[data-era="1990"] #content .panel:has(.gb-form) {
  position: relative;
  padding: 30px 14px 14px;
  border: 0;
  outline: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window);
}
html[data-era="1990"] #content .panel:has(.gb-form)::before {
  content: "Sign Guestbook";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 18px;
  padding-left: 22px;
  font: bold 11px/18px var(--w95-ui);
  color: #fff;
  background:
    var(--w95-tbtns) right 2px center / 50px 14px no-repeat,
    var(--w95-appicon) 3px center / 16px no-repeat,
    linear-gradient(90deg, var(--w95-navy), var(--w95-blue));
  -webkit-font-smoothing: none;
}
html[data-era="1990"] #content .gb-form { gap: 8px 10px; }
html[data-era="1990"] #content .gb-form label {
  font: 11px var(--w95-ui);
  color: var(--w95-text);
  text-transform: none;
}
html[data-era="1990"] #content .gb-form input,
html[data-era="1990"] #content .gb-form textarea,
html[data-era="1990"] #content .gb-form select,
html[data-era="1990"] #content textarea {
  font: 14px var(--w95-serif);
  color: var(--w95-text) !important;
  background: var(--w95-paper) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: var(--w95-sunken);
  padding: 5px 6px;
  outline: none;
}
html[data-era="1990"] #content .gb-form select {
  font: 12px var(--w95-ui);
  padding: 4px 22px 4px 5px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--w95-selbtn) right 2px center / 16px 17px no-repeat, var(--w95-paper) !important;
}
html[data-era="1990"] #content textarea { font-family: "Courier New", Courier, monospace !important; font-size: 12px; }
html[data-era="1990"] #content .gb-form textarea { font-family: var(--w95-serif) !important; font-size: 14px; }
html[data-era="1990"] #content .gb-form .btn { min-width: 86px; }

html[data-era="1990"] #content .gb-entry {
  background: var(--w95-paper);
  border: 2px solid;
  border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);
  outline: 1px solid #a0a0a0;
  padding: 0;
  margin: 12px 0;
}
html[data-era="1990"] #content .gb-entry .gb-head {
  margin: 0;
  padding: 4px 8px;
  background: #f0e6ff;
  border-bottom: 1px solid #c8b8e0;
  font-size: 14px;
}
html[data-era="1990"] #content .gb-entry .gb-name { color: #5a0099; }
html[data-era="1990"] #content .gb-entry .gb-meta { color: #555; font-size: 12px; font-family: var(--w95-ui); }
html[data-era="1990"] #content .gb-entry > :not(.gb-head) { margin-left: 10px; margin-right: 10px; }

/* ----- links: the webring box ----- */
html[data-era="1990"] #content .webring {
  background: #ffffe8;
  border: 3px solid;
  border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light);
  outline: 1px solid #a0a0a0;
}
html[data-era="1990"] #content .webring .ring-title { font: bold 24px var(--w95-serif); color: #5a0099; }

/* ----- cryptids: manila files on a desk ----- */
html[data-era="1990"] #content .dossier { box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); }

/* ----- legends ----- */
html[data-era="1990"] #content .glitch { color: #2b0047; font-family: var(--w95-serif); font-weight: bold; letter-spacing: 2px; }
html[data-era="1990"] #content .corkboard { box-shadow: inset 0 0 30px rgba(0, 0, 0, .7), 0 0 0 2px var(--w95-shadow); }

/* ----- misty ----- */
html[data-era="1990"] #content .frame-gold { box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
html[data-era="1990"] #content .laser-zone {
  border: 0;
  box-shadow: var(--w95-sunken), inset 0 0 40px rgba(0, 0, 0, .7);
  outline: 2px solid var(--w95-face);
  outline-offset: 0;
}
html[data-era="1990"] #content .laser-zone:focus { outline: 2px dotted #000; }
html[data-era="1990"] #content .laser-stats {
  margin-top: 2px;
  padding: 3px;
  gap: 2px;
  background: var(--w95-face);
  border: 0;
  font: 11px/16px var(--w95-ui);
  color: var(--w95-text);
}
html[data-era="1990"] #content .laser-stats > * { padding: 1px 6px; box-shadow: var(--w95-cell); flex: 1 1 auto; }
html[data-era="1990"] #content .laser-stats b { color: var(--w95-navy); }
html[data-era="1990"] #content .certificate { box-shadow: 3px 3px 0 rgba(0, 0, 0, .3); }
html[data-era="1990"] #content .stat-card { box-shadow: none; }
html[data-era="1990"] #content .shrine-card { background: var(--w95-paper); border: 3px solid; border-color: var(--w95-light) var(--w95-shadow) var(--w95-shadow) var(--w95-light); }

/* ============================================================
   THE ENTER PAGE: a dialog box on the desktop
   ============================================================ */
html[data-era="1990"] body.enter-page { align-items: center; }
html[data-era="1990"] .enter-box {
  position: relative;
  max-width: 560px;
  padding: 30px 26px 20px;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-window), 2px 2px 0 rgba(0, 0, 0, .25);
  color: var(--w95-text);
  font: 12px/1.4 var(--w95-ui);
}
html[data-era="1990"] .enter-box::before {
  content: "Julie's Cauldron - Warning";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 18px;
  padding-left: 22px;
  text-align: left;
  font: bold 11px/18px var(--w95-ui);
  color: #fff;
  background:
    var(--w95-tbtns) right 2px center / 50px 14px no-repeat,
    var(--w95-appicon) 3px center / 16px no-repeat,
    linear-gradient(90deg, var(--w95-navy), var(--w95-blue));
  -webkit-font-smoothing: none;
}
html[data-era="1990"] .enter-box .title {
  font-family: var(--w95-serif);
  font-style: italic;
  font-weight: bold;
  font-size: 58px;
  color: #ff8c1a;
  animation: none;
  text-shadow: 1px 1px 0 #a020f0, 2px 2px 0 #9010e0, 3px 3px 0 #7a00c8, 4px 4px 0 #5e00a0, 5px 5px 0 #400070;
}
html[data-era="1990"] .enter-box .glow-purple { color: #5a0099; text-shadow: none; }
html[data-era="1990"] .enter-box .warning {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font: 12px/1.5 var(--w95-ui);
  color: var(--w95-text);
  border: 0;
  padding: 12px 14px;
  margin: 14px 0;
  background: var(--w95-face);
  box-shadow: inset 1px 1px var(--w95-shadow), inset -1px -1px #fff, 1px 1px #fff;
}
html[data-era="1990"] .enter-box .warning::before {
  content: "";
  flex: 0 0 32px;
  height: 32px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M16 2L31 29H1z' fill='%23ffff00' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/><rect x='14.5' y='10' width='3' height='11' fill='%23000'/><rect x='14.5' y='23' width='3' height='3' fill='%23000'/></svg>") center / 32px no-repeat;
}
html[data-era="1990"] .enter-box .enter-link {
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: var(--w95-text) !important;
  padding: 8px 24px;
  margin: 6px 0 10px;
  animation: none;
  /* the default button has a black ring */
  box-shadow: 0 0 0 1px #000, var(--w95-raised);
}
html[data-era="1990"] .enter-box .enter-link:active { box-shadow: 0 0 0 1px #000, var(--w95-pressed); }
html[data-era="1990"] .enter-box a.small {
  display: inline-block;
  padding: 4px 12px;
  color: var(--w95-text) !important;
  text-decoration: none;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  font: 11px var(--w95-ui);
}
html[data-era="1990"] .enter-box a.small:active { box-shadow: var(--w95-pressed); }
html[data-era="1990"] .enter-box .tiny { font: 11px var(--w95-ui); color: #333; }
html[data-era="1990"] .enter-box .rainbow { background-image: linear-gradient(90deg, #cc0000, #d36b00, #008000, #0000cc, #800080, #cc0000); }

/* ============================================================
   ANIME SILLIES: one very long Netscape window.
   chrome on top, every world is a "window" inside it,
   status bar at the bottom.
   ============================================================ */
html[data-era="1990"] #wrapper.anime-top {
  margin-bottom: 0;
  padding-bottom: 0;
  box-shadow: inset -1px 0 var(--w95-dark), inset 1px 0 var(--w95-light), inset 0 1px var(--w95-light),
              inset -2px 0 var(--w95-shadow), inset 2px 0 var(--w95-hi), inset 0 2px var(--w95-hi);
}
html[data-era="1990"] #wrapper-bottom {
  margin-top: 0;
  padding-top: 0;
  box-shadow: inset -1px 0 var(--w95-dark), inset 1px 0 var(--w95-light), inset 0 -1px var(--w95-dark),
              inset -2px 0 var(--w95-shadow), inset 2px 0 var(--w95-hi), inset 0 -2px var(--w95-shadow), 2px 2px 0 rgba(0, 0, 0, .25);
}
html[data-era="1990"] #wrapper-bottom #footer { border-top: 0; }

/* the top nav = Netscape 4 "Personal Toolbar" */
html[data-era="1990"] #nav.topnav {
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px 4px 4px 12px;
  position: relative;
  background: var(--w95-face);
  border: 0;
  border-left: 2px solid var(--w95-shadow);
  border-right: 2px solid var(--w95-hi);
  box-shadow: inset 0 1px var(--w95-hi), inset 0 -1px var(--w95-shadow);
  font-family: var(--w95-ui);
}
html[data-era="1990"] #nav.topnav::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  bottom: 5px;
  width: 3px;
  box-shadow: inset 1px 1px #fff, inset -1px -1px var(--w95-shadow);
}
html[data-era="1990"] #nav.topnav li { margin: 0; }
html[data-era="1990"] #wrapper #nav.topnav a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 5px;
  font: 11px/14px var(--w95-ui);
  color: var(--w95-text);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
}
html[data-era="1990"] #wrapper #nav.topnav a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path d='M3.5 1.5h7l2 2v11h-9z' fill='%23fff' stroke='%23000'/><path d='M5 5h6M5 7h6M5 9h4' stroke='%23000080'/><path d='M8 11h4v4l-2-1.5-2 1.5z' fill='%23ff8000' stroke='%23000' stroke-width='.6'/></svg>") center / 16px no-repeat;
}
html[data-era="1990"] #wrapper #nav.topnav a:visited { color: var(--w95-text); }
html[data-era="1990"] #wrapper #nav.topnav a:hover {
  color: var(--w95-text);
  text-shadow: none;
  background: transparent;
  border-color: #fff var(--w95-shadow) var(--w95-shadow) #fff;
}
html[data-era="1990"] #wrapper #nav.topnav a:active { border-color: var(--w95-shadow) #fff #fff var(--w95-shadow); }
html[data-era="1990"] #wrapper #nav.topnav a.here { font-weight: bold; border-color: var(--w95-shadow) #fff #fff var(--w95-shadow); background: var(--w95-check); }
html[data-era="1990"] #nav.topnav li:has(.btn) { margin-left: auto; display: flex; gap: 3px; }
html[data-era="1990"] #nav.topnav .btn { font-size: 11px; padding: 3px 8px; min-height: 21px; }
html[data-era="1990"] #nav.topnav .btn:active { padding: 4px 7px 2px 9px; }

/* every realm is framed by the window edges */
html[data-era="1990"] .realm {
  width: 960px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: 26px;
  padding-right: 26px;
  box-shadow:
    inset 1px 0 var(--w95-light), inset -1px 0 var(--w95-dark),
    inset 2px 0 var(--w95-hi), inset -2px 0 var(--w95-shadow),
    inset 3px 0 var(--w95-face), inset -3px 0 var(--w95-face),
    inset 5px 0 var(--w95-shadow), inset -5px 0 var(--w95-hi);
}
html[data-era="1990"] .realm::before { left: 5px; right: 5px; }
html[data-era="1990"] .realm .deco { z-index: 1; }

/* the portal */
html[data-era="1990"] #portal { padding-top: 30px; }
html[data-era="1990"] #portal h1 {
  font-family: var(--w95-serif);
  font-style: italic;
  font-weight: bold;
  font-size: 52px;
  color: #ff8c1a;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #a020f0, 2px 2px 0 #9010e0, 3px 3px 0 #7a00c8, 4px 4px 0 #5e00a0, 5px 5px 0 #400070;
}
html[data-era="1990"] #portal p { font-family: var(--w95-serif); color: #f0e6ff; }
html[data-era="1990"] #portal .realm-map { gap: 4px; max-width: 700px; }
html[data-era="1990"] #portal .realm-map a {
  font: 11px/14px var(--w95-ui);
  color: var(--w95-text);
  padding: 5px 10px;
  border: 0;
  background: var(--w95-face) var(--w95-folder) 6px center / 16px no-repeat;
  padding-left: 26px;
  box-shadow: var(--w95-raised);
  text-shadow: none;
}
html[data-era="1990"] #portal .realm-map a:hover { color: var(--w95-text); text-shadow: none; text-decoration: underline; }
html[data-era="1990"] #portal .realm-map a:active { box-shadow: var(--w95-pressed); }
html[data-era="1990"] #portal .scroll-hint { font-family: var(--w95-ui); font-size: 13px; color: #c0c0c0; }

/* the world-number line = a little caption */
html[data-era="1990"] .realm .world-no { font-family: var(--w95-ui); font-size: 11px; letter-spacing: 1px; }

/* each .box is a window with a title bar in the world's colors */
html[data-era="1990"] .realm:not(#w95-x) .box {
  position: relative;
  border: 0;
  padding: 34px 24px 18px;
  font-family: var(--w95-serif);
  font-size: 17px;
  line-height: 1.5;
  box-shadow:
    inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-light),
    inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-hi),
    inset 0 0 0 4px var(--w95-face),
    inset 0 0 0 5px var(--w95-shadow);
}
html[data-era="1990"] .realm:not(#w95-x) .box::before {
  content: var(--w95-name, "README.TXT - Notepad");
  position: absolute;
  inset: 4px 4px auto 4px;
  width: auto;
  height: 18px;
  padding: 0 56px 0 22px;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: bold 11px/18px var(--w95-ui);
  color: #fff;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
  background:
    var(--w95-tbtns) right 2px center / 50px 14px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><path d='M3.5 1.5h7l2 2v11h-9z' fill='%23fff' stroke='%23000'/><path d='M5 5h6M5 7h6M5 9h6M5 11h4' stroke='%23000080'/></svg>") 3px center / 16px no-repeat,
    var(--w95-tb, linear-gradient(90deg, #000080, #1084d0));
  -webkit-font-smoothing: none;
  z-index: 3;
}
html[data-era="1990"] .realm:not(#w95-x) .box::after { content: none; display: none; }
html[data-era="1990"] .realm:not(#w95-x) .box p,
html[data-era="1990"] .realm:not(#w95-x) .box li { font-family: var(--w95-serif); }

/* world-specific window colors (like Win95 Plus! desktop themes) */
html[data-era="1990"] #lain .box   { --w95-name: "the_wired.txt - Notepad"; --w95-tb: linear-gradient(90deg, #4a0030, #ff3fa4); }
html[data-era="1990"] #gits .box   { --w95-name: "SECTION9.DOC - WordPad"; --w95-tb: linear-gradient(90deg, #003a22, #1b9e5a); background: rgba(0, 30, 22, .85); }
html[data-era="1990"] #eva .box    { --w95-name: "NERV.EXE - MAGI System"; --w95-tb: linear-gradient(90deg, #3d0a66, #8cff3c); }
html[data-era="1990"] #bebop .box  { --w95-name: "BOUNTY.TXT - Bebop"; --w95-tb: linear-gradient(90deg, #6b0010, #d7263d); }
html[data-era="1990"] #spirited .box { --w95-name: "ABURAYA.HTM - Bathhouse"; --w95-tb: linear-gradient(90deg, #6b1200, #e0662f); }
html[data-era="1990"] #totoro .box { --w95-name: "FOREST.TXT - Notepad"; --w95-tb: linear-gradient(90deg, #0b3d14, #4f9a3a); }
html[data-era="1990"] #yotsuba .box { --w95-name: "YOTSUBA.DOC - WordPad"; --w95-tb: linear-gradient(90deg, #1f7a2b, #ffd93b); }
html[data-era="1990"] #kuromi .box { --w95-name: "KUROMI5.TXT - Diary"; --w95-tb: linear-gradient(90deg, #2a0040, #ff4fa3); }
html[data-era="1990"] #junji .box  { --w95-name: "UZUMAKI.TXT - Notepad"; --w95-tb: linear-gradient(90deg, #000, #808080); }

/* the "toy" boxes with a label become windows too: the label is the title bar */
html[data-era="1990"] .realm:not(#w95-x) .navi,
html[data-era="1990"] .realm:not(#w95-x) .grudge-diary {
  position: relative;
  border: 0;
  padding: 4px 4px 10px;
  box-shadow:
    inset -1px -1px var(--w95-dark), inset 1px 1px var(--w95-light),
    inset -2px -2px var(--w95-shadow), inset 2px 2px var(--w95-hi),
    inset 0 0 0 4px var(--w95-face);
}
html[data-era="1990"] .realm:not(#w95-x) .navi > :not(.toy-label),
html[data-era="1990"] .realm:not(#w95-x) .grudge-diary > :not(.toy-label) { margin-left: 12px; margin-right: 12px; }
html[data-era="1990"] .realm:not(#w95-x) .navi > .toy-label,
html[data-era="1990"] .realm:not(#w95-x) .grudge-diary > .toy-label {
  margin: 0 0 8px;
  height: 18px;
  padding: 0 56px 0 22px;
  font: bold 11px/18px var(--w95-ui);
  color: #fff;
  letter-spacing: 0;
  text-align: left;
  opacity: 1;
  text-shadow: none;
  border: 0;
  -webkit-font-smoothing: none;
  background:
    var(--w95-tbtns) right 2px center / 50px 14px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect x='1' y='2' width='14' height='11' fill='%23000' stroke='%23c0c0c0'/><text x='3' y='10' font-family='monospace' font-size='7' fill='%23fff'>C:\</text></svg>") 3px center / 16px no-repeat,
    linear-gradient(90deg, var(--w95-navy), var(--w95-blue));
}
html[data-era="1990"] #lain:not(#w95-x) .navi > .toy-label { background-image: var(--w95-tbtns), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><rect x='1' y='2' width='14' height='11' fill='%23000' stroke='%23c0c0c0'/><text x='3' y='10' font-family='monospace' font-size='7' fill='%23fff'>C:\</text></svg>"), linear-gradient(90deg, #4a0030, #ff3fa4); }
html[data-era="1990"] #kuromi:not(#w95-x) .grudge-diary > .toy-label { background-image: var(--w95-tbtns), var(--w95-appicon), linear-gradient(90deg, #2a0040, #ff4fa3); }
html[data-era="1990"] .realm:not(#w95-x) .navi .navi-line input,
html[data-era="1990"] .realm .grudge-form input {
  border: 0;
  border-radius: 0;
  box-shadow: var(--w95-sunken);
}
html[data-era="1990"] .realm .grudge-form input { background: var(--w95-paper); color: var(--w95-text); font-family: var(--w95-serif); }

/* realm buttons keep a hint of their world (colored text) */
html[data-era="1990"] .realm .camo-btn { color: #0b4d2a; font-weight: bold; }
html[data-era="1990"] #yotsuba-btn { color: #1f7a2b; font-weight: bold; }
html[data-era="1990"] .realm .grudge-form .btn { color: #a0005a; font-weight: bold; }
html[data-era="1990"] .realm .jam-blocks button { box-shadow: var(--w95-raised); }
html[data-era="1990"] .realm .jam-blocks button:active { box-shadow: var(--w95-pressed); }

/* ============================================================
   PHONES
   ============================================================ */
@media (max-width: 720px) {
  html[data-era="1990"] #wrapper,
  html[data-era="1990"] #wrapper-bottom { margin-top: 8px; }
  html[data-era="1990"] #wrapper.anime-top { margin-bottom: 0; }
  html[data-era="1990"] #wrapper-bottom { margin-top: 0; }
  html[data-era="1990"] #sidebar {
    width: auto;
    border-bottom: 0;
    padding: 8px 8px 12px;
    box-shadow: inset 0 -1px var(--w95-hi), inset 0 -5px var(--w95-face), inset 0 -6px var(--w95-shadow), inset 0 -7px var(--w95-dark);
    padding-bottom: 16px;
  }
  html[data-era="1990"] #header .title { font-size: 40px; }
  html[data-era="1990"] #content { padding: 12px 12px 16px; }
  html[data-era="1990"] #content h1 { font-size: 28px; }
  html[data-era="1990"] .w95-menubar span:nth-child(n+6) { display: none; }
  html[data-era="1990"] .w95-dirbar { display: none; }
  html[data-era="1990"] .w95-tool { width: 44px; }
  html[data-era="1990"] .w95-status .w95-prog,
  html[data-era="1990"] .w95-status .w95-cell { display: none; }
  html[data-era="1990"] .enter-box { padding: 30px 14px 16px; }
  html[data-era="1990"] .enter-box .title { font-size: 44px; }
  html[data-era="1990"] .realm { padding-left: 16px; padding-right: 16px; }
  html[data-era="1990"] .realm:not(#w95-x) .box { padding: 32px 14px 14px; }
  html[data-era="1990"] #nav.topnav li:has(.btn) { margin-left: 0; }
}

/* ============================================================
   VIEW > APPEARANCE: the "Display Properties" dialog
   (made by js/era-1990.js, lives inside the browser chrome)
   ============================================================ */
html[data-era="1990"] .w95-chrome { position: relative; }
html[data-era="1990"] .w95-menubar .w95-menu-btn {
  font: inherit;
  color: inherit;
  background: transparent;
  margin: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  -webkit-font-smoothing: none;
}
html[data-era="1990"] .w95-menubar .w95-menu-btn:hover { border-color: var(--w95-hi) var(--w95-shadow) var(--w95-shadow) var(--w95-hi); }
html[data-era="1990"] .w95-menubar .w95-menu-btn[aria-expanded="true"] { border-color: var(--w95-shadow) var(--w95-hi) var(--w95-hi) var(--w95-shadow); }
html[data-era="1990"] .w95-menubar .w95-menu-btn:focus-visible { outline: 1px dotted var(--w95-text); outline-offset: -3px; }

html[data-era="1990"] .w95-dlg {
  position: absolute;
  z-index: 60;
  top: 20px;
  left: 40px;
  width: 316px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;
  padding: 3px;
  background: var(--w95-face);
  box-shadow: var(--w95-window), 3px 3px 0 rgba(0, 0, 0, .35);
  color: var(--w95-text);
  font: 11px/1.3 var(--w95-ui);
  user-select: none;
  -webkit-font-smoothing: none;
}
html[data-era="1990"] .w95-dlg[hidden] { display: none; }
html[data-era="1990"] .w95-dlg-title {
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 2px 0 4px;
  background: linear-gradient(90deg, var(--w95-navy), var(--w95-blue));
  color: #fff;
  font-weight: bold;
}
html[data-era="1990"] .w95-dlg-title span { flex: 1; }
html[data-era="1990"] .w95-dlg-x {
  width: 16px;
  height: 14px;
  padding: 0;
  border: 0;
  background: var(--w95-face);
  box-shadow: var(--w95-raised);
  color: var(--w95-text);
  font: bold 11px/14px var(--w95-ui);
  cursor: pointer;
}
html[data-era="1990"] .w95-dlg-x:active { box-shadow: var(--w95-pressed); }
html[data-era="1990"] .w95-dlg-body { padding: 8px 8px 6px; }
html[data-era="1990"] .w95-tabs { display: flex; gap: 0; padding-left: 2px; position: relative; z-index: 1; }
html[data-era="1990"] .w95-tabs span {
  padding: 3px 7px 2px;
  margin-top: 2px;
  box-shadow: inset 1px 1px var(--w95-hi), inset -1px 0 var(--w95-dark), inset -2px 0 var(--w95-shadow);
  white-space: nowrap;
}
html[data-era="1990"] .w95-tabs span.on { margin: 0 -2px -1px; padding: 4px 9px 4px; background: var(--w95-face); }
html[data-era="1990"] .w95-tabpanel { padding: 10px; box-shadow: var(--w95-window); }
html[data-era="1990"] .w95-preview {
  height: 92px;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: var(--w95-sunken);
  background: #008080;
}
html[data-era="1990"] .w95-preview[data-scheme="hc"] { background: #000; }
html[data-era="1990"] .w95-pv-win {
  width: 78%;
  padding: 2px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
}
html[data-era="1990"] .w95-pv-win b { display: block; padding: 1px 4px; color: #fff; background: linear-gradient(90deg, #000080, #1084d0); }
html[data-era="1990"] .w95-pv-win i { display: block; margin-top: 2px; padding: 6px 5px; font-style: normal; background: #fff; color: #000; }
html[data-era="1990"] .w95-pv-win u { color: #0000ee; }
html[data-era="1990"] .w95-preview[data-scheme="hc"] .w95-pv-win { background: #000; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #808080; }
html[data-era="1990"] .w95-preview[data-scheme="hc"] .w95-pv-win b { background: #800080; }
html[data-era="1990"] .w95-preview[data-scheme="hc"] .w95-pv-win i { background: #000; color: #fff; outline: 1px solid #808080; }
html[data-era="1990"] .w95-preview[data-scheme="hc"] .w95-pv-win u { color: #ffff00; }
html[data-era="1990"] .w95-dlg fieldset {
  margin: 0;
  padding: 8px 10px 8px;
  border: 1px solid var(--w95-shadow);
  box-shadow: inset 1px 1px var(--w95-hi), 1px 1px var(--w95-hi);
}
html[data-era="1990"] .w95-dlg legend { padding: 0 3px; background: var(--w95-face); position: relative; }
html[data-era="1990"] .w95-dlg label { display: flex; align-items: center; gap: 6px; padding: 3px 0; cursor: pointer; }
html[data-era="1990"] .w95-dlg input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  margin: 0;
  border-radius: 50%;
  background: var(--w95-paper);
  box-shadow: inset 1px 1px var(--w95-shadow), inset -1px -1px var(--w95-hi), inset 2px 2px var(--w95-dark), inset -2px -2px var(--w95-light);
  cursor: pointer;
}
html[data-era="1990"] .w95-dlg input[type="radio"]:checked {
  background: radial-gradient(circle, var(--w95-text) 0 2px, var(--w95-paper) 2.5px);
}
html[data-era="1990"] .w95-dlg input[type="radio"]:focus-visible { outline: none; }
html[data-era="1990"] .w95-dlg input[type="radio"]:focus-visible + span { outline: 1px dotted var(--w95-text); outline-offset: 1px; }
html[data-era="1990"] .w95-dlg-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
html[data-era="1990"] .w95-dlg-btns button {
  min-width: 75px;
  min-height: 23px;
  padding: 3px 10px;
  border: 0;
  border-radius: 0;
  background: var(--w95-face);
  color: var(--w95-text);
  box-shadow: var(--w95-raised);
  font: 11px var(--w95-ui);
  cursor: pointer;
}
html[data-era="1990"] .w95-dlg-btns button.def { box-shadow: 0 0 0 1px var(--w95-dark), var(--w95-raised); }
html[data-era="1990"] .w95-dlg-btns button:active { box-shadow: var(--w95-pressed); }
html[data-era="1990"] .w95-dlg-btns button:focus-visible,
html[data-era="1990"] .w95-dlg-x:focus-visible { outline: 1px dotted var(--w95-text); outline-offset: -4px; }
@media (max-width: 720px) {
  html[data-era="1990"] .w95-dlg { left: 4px; right: 4px; width: auto; max-width: none; }
  html[data-era="1990"] .w95-dlg-btns button { min-width: 0; flex: 1; }
}

/* ============================================================
   HIGH CONTRAST BLACK  (Control Panel > Display > Appearance)
   html[data-era="1990"][data-dark="on"]
   ============================================================ */
html[data-era="1990"][data-dark="on"] {
  --w95-face: #000;
  --w95-light: #808080;
  --w95-hi: #fff;
  --w95-shadow: #808080;
  --w95-dark: #fff;
  --w95-navy: #800080;
  --w95-blue: #800080;
  --w95-text: #fff;
  --w95-paper: #000;
  --w95-check: repeating-conic-gradient(#000 0 25%, #555 0 50%) 0 0 / 2px 2px;
  --w95-tbtns: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='14'><defs><g id='b'><rect width='16' height='14' fill='%23fff'/><rect x='1' y='1' width='14' height='12' fill='%23000'/></g></defs><use href='%23b'/><rect x='4' y='9' width='6' height='2' fill='%23fff'/><use href='%23b' x='16'/><path d='M19 2h9v9h-9z M20 4v6h7v-6z' fill='%23fff' fill-rule='evenodd'/><use href='%23b' x='34'/><path d='M38 3l7 7M45 3l-7 7' stroke='%23fff' stroke-width='1.7'/></svg>");
  --w95-selbtn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17'><rect width='16' height='17' fill='%23fff'/><rect x='1' y='1' width='14' height='15' fill='%23000'/><path d='M4.5 7h7L8 10.5z' fill='%23fff'/></svg>");
  --w95-drive: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'><rect x='1.5' y='5.5' width='13' height='6' fill='%23000' stroke='%23fff'/><rect x='11' y='8' width='2' height='1' fill='%2300ff00'/></svg>");
}
html[data-era="1990"][data-dark="on"] body { background-color: #000; background-image: none; }
html[data-era="1990"][data-dark="on"] ::selection { background: #800080; color: #fff; }
html[data-era="1990"][data-dark="on"] #wrapper,
html[data-era="1990"][data-dark="on"] #wrapper-bottom,
html[data-era="1990"][data-dark="on"] .enter-box { box-shadow: var(--w95-window), 0 0 0 1px #fff; }
html[data-era="1990"][data-dark="on"] #wrapper.anime-top { box-shadow: inset 2px 0 #fff, inset -2px 0 #fff, inset 0 2px #fff; }
html[data-era="1990"][data-dark="on"] #wrapper-bottom { box-shadow: inset 2px 0 #fff, inset -2px 0 #fff, inset 0 -2px #fff; }

/* page area */
html[data-era="1990"][data-dark="on"] #header { border-bottom: 1px solid #808080; }
html[data-era="1990"][data-dark="on"] .marquee-strip { background: #000; color: #ffff00; border-bottom: 1px solid #808080; }
html[data-era="1990"][data-dark="on"] #content h1 { color: #ff9933; }
html[data-era="1990"][data-dark="on"] #content h2 { color: #ff80ff; box-shadow: none; }
html[data-era="1990"][data-dark="on"] #content h3 { color: #ffcc66; }
html[data-era="1990"][data-dark="on"] #wrapper a:not(.b88):not(.btn),
html[data-era="1990"][data-dark="on"] #wrapper-bottom a:not(.b88):not(.btn),
html[data-era="1990"][data-dark="on"] #wrapper a:not(.b88):not(.btn):hover,
html[data-era="1990"][data-dark="on"] #wrapper-bottom a:not(.b88):not(.btn):hover { color: #ffff00; }
html[data-era="1990"][data-dark="on"] #wrapper a:not(.b88):not(.btn):visited,
html[data-era="1990"][data-dark="on"] #wrapper-bottom a:not(.b88):not(.btn):visited { color: #00ffff; }
html[data-era="1990"][data-dark="on"] #wrapper .glow-green,
html[data-era="1990"][data-dark="on"] #wrapper-bottom .glow-green { color: #00ff00; }
html[data-era="1990"][data-dark="on"] #wrapper .glow-purple,
html[data-era="1990"][data-dark="on"] #wrapper-bottom .glow-purple,
html[data-era="1990"][data-dark="on"] .enter-box .glow-purple { color: #ff80ff; }
html[data-era="1990"][data-dark="on"] #wrapper .glow-orange,
html[data-era="1990"][data-dark="on"] #wrapper-bottom .glow-orange { color: #ffa040; }
html[data-era="1990"][data-dark="on"] #wrapper .rainbow,
html[data-era="1990"][data-dark="on"] #wrapper-bottom .rainbow,
html[data-era="1990"][data-dark="on"] .enter-box .rainbow {
  background-image: linear-gradient(90deg, #ff4040, #ffa040, #ffff00, #00ff00, #00ffff, #ff80ff, #ff4040);
}
html[data-era="1990"][data-dark="on"] #content [style*="color:#ffae42"],
html[data-era="1990"][data-dark="on"] #content [style*="color: #ffae42"] { color: #ffae42 !important; }
html[data-era="1990"][data-dark="on"] #content [style*="color:#39ff14"] { color: #39ff14 !important; }
html[data-era="1990"][data-dark="on"] #content [style*="color:#ff9de2"],
html[data-era="1990"][data-dark="on"] #content [style*="color:#ff3fa4"] { color: #ff9de2 !important; }
html[data-era="1990"][data-dark="on"] #content [style*="color:#d9a6ff"],
html[data-era="1990"][data-dark="on"] #content [style*="color:#c58bff"] { color: #d9a6ff !important; }
html[data-era="1990"][data-dark="on"] #content hr,
html[data-era="1990"][data-dark="on"] #content hr.spooky,
html[data-era="1990"][data-dark="on"] #footer::before { box-shadow: none; border-bottom-color: #000; }
html[data-era="1990"][data-dark="on"] #wrapper .sticker { background: #000; }

html[data-era="1990"][data-dark="on"] #content .panel,
html[data-era="1990"][data-dark="on"] #content .panel.orange,
html[data-era="1990"][data-dark="on"] #content .panel.dashed,
html[data-era="1990"][data-dark="on"] #content .webring {
  background: #000;
  color: #fff;
  border-color: #fff;
  outline-color: #808080;
}
html[data-era="1990"][data-dark="on"] #content .panel.dashed { border-color: #808080; }
html[data-era="1990"][data-dark="on"] #content .panel.terminal p { color: #fff; }
html[data-era="1990"][data-dark="on"] #content .webring .ring-title,
html[data-era="1990"][data-dark="on"] #content .gb-entry .gb-name { color: #ff80ff; }
html[data-era="1990"][data-dark="on"] #content table.myspace,
html[data-era="1990"][data-dark="on"] #content table.myspace td,
html[data-era="1990"][data-dark="on"] #content table.myspace th { border-color: #808080; }
html[data-era="1990"][data-dark="on"] #content table.myspace th { background: #000; color: #ffff00; }
html[data-era="1990"][data-dark="on"] #content table.myspace tr:nth-child(even) td { background: #000; }
html[data-era="1990"][data-dark="on"] #content .gb-entry { border-color: #fff; }
html[data-era="1990"][data-dark="on"] #content .gb-entry .gb-head { background: #000; border-bottom-color: #808080; }
html[data-era="1990"][data-dark="on"] #content .gb-entry .gb-meta { color: #c0c0c0; }
html[data-era="1990"][data-dark="on"] #content .gb-form input::placeholder,
html[data-era="1990"][data-dark="on"] #content .gb-form textarea::placeholder { color: #a0a0a0; }
html[data-era="1990"][data-dark="on"] #content .glitch { color: #fff; }
html[data-era="1990"][data-dark="on"] #content .laser-stats b { color: #ffff00; }
html[data-era="1990"][data-dark="on"] #content .laser-zone:focus { outline-color: #fff; }
html[data-era="1990"][data-dark="on"] #content .shrine-card { border-color: #fff; }
html[data-era="1990"][data-dark="on"] #content .dossier,
html[data-era="1990"][data-dark="on"] #content .certificate,
html[data-era="1990"][data-dark="on"] #content .frame-gold { box-shadow: 0 0 0 1px #fff; }

/* sidebar */
html[data-era="1990"][data-dark="on"] #sidebar #nav a:hover { color: #ffff00; }
html[data-era="1990"][data-dark="on"] #sidebar #nav a.here { background: #800080; border-color: #fff; }
html[data-era="1990"][data-dark="on"] #wrapper .countdown { color: #00ff00; }
html[data-era="1990"][data-dark="on"] #wrapper .counter { box-shadow: 0 0 0 1px #808080; }

/* browser chrome */
html[data-era="1990"][data-dark="on"] .w95-tool svg,
html[data-era="1990"][data-dark="on"] .w95-status svg,
html[data-era="1990"][data-dark="on"] .w95-locbar svg { filter: invert(1) hue-rotate(180deg); }
html[data-era="1990"][data-dark="on"] .w95-tool.off { color: #808080; text-shadow: none; }
html[data-era="1990"][data-dark="on"] .w95-tool.off svg { filter: invert(1) hue-rotate(180deg) grayscale(1) opacity(.5); }
html[data-era="1990"][data-dark="on"] .w95-throbber { box-shadow: 0 0 0 1px #fff; }
html[data-era="1990"][data-dark="on"] .w95-bar { border-top-color: #808080; box-shadow: none; }
html[data-era="1990"][data-dark="on"] .w95-desktop svg { filter: invert(1) hue-rotate(180deg); }
html[data-era="1990"][data-dark="on"] .w95-preview { box-shadow: 0 0 0 1px #fff; }

/* splash dialog */
html[data-era="1990"][data-dark="on"] .enter-box .warning { box-shadow: 0 0 0 1px #fff; }
html[data-era="1990"][data-dark="on"] .enter-box .tiny { color: #c0c0c0; }
html[data-era="1990"][data-dark="on"] .enter-box .enter-link { box-shadow: 0 0 0 1px #fff, var(--w95-raised); }

/* anime page */
html[data-era="1990"][data-dark="on"] #wrapper #nav.topnav a.here { background: #800080; border-color: #fff; }
html[data-era="1990"][data-dark="on"] #wrapper #nav.topnav a::before { filter: invert(1) hue-rotate(180deg); }
html[data-era="1990"][data-dark="on"] .realm {
  box-shadow: inset 2px 0 #fff, inset -2px 0 #fff, inset 5px 0 #000, inset -5px 0 #000, inset 6px 0 #808080, inset -6px 0 #808080;
}
html[data-era="1990"][data-dark="on"] .realm:not(#w95-x) .box {
  box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #808080, inset 0 0 0 4px #000, inset 0 0 0 5px #808080;
}
html[data-era="1990"][data-dark="on"] .realm .camo-btn { color: #5dffa8; }
html[data-era="1990"][data-dark="on"] #yotsuba-btn { color: #a6f08e; }
html[data-era="1990"][data-dark="on"] .realm .grudge-form .btn { color: #ff9ed0; }
html[data-era="1990"][data-dark="on"] #portal .realm-map a { background-color: #000; color: #fff; }