:root {
  color-scheme: light;
  --face: #bdbdbd;
  --light: #ffffff;
  --highlight: #dedede;
  --shadow: #848484;
  --dark: #000000;
  --title: #00007b;
  --netscape-blue: #07125c;
  --netscape-teal: #008c96;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #008080;
}

button,
input {
  font: inherit;
}

button {
  color: #000;
}

button:focus-visible,
input:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -4px;
}

.browser-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  position: relative;
  padding:
    calc(var(--safe-top) + 2px)
    calc(var(--safe-right) + 2px)
    var(--safe-bottom)
    calc(var(--safe-left) + 2px);
  display: grid;
  grid-template-rows: 18px 22px 44px 23px 23px minmax(0, 1fr) 20px;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset 1px 1px var(--highlight), inset -1px -1px var(--shadow);
}

.window-titlebar,
.menu-bar,
.navigator-toolbar,
.location-bar,
.personal-toolbar,
.status-bar,
.dialup-dialog,
.browser-notice {
  -webkit-user-select: none;
  user-select: none;
}

.window-titlebar {
  min-width: 0;
  padding: 1px 2px 1px 3px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  color: #fff;
  background: var(--title);
  box-shadow: inset 0 -1px #00004c;
}

.window-icon {
  width: 16px;
  height: 16px;
  display: block;
  overflow: hidden;
  background: #020211;
  border: 1px solid #000;
}

.window-icon__star { fill: #e8dc3a; }
.window-icon__spark { fill: #27a8a7; }
.window-icon__core { fill: #ef4545; }

.window-titlebar h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-controls {
  display: flex;
  gap: 2px;
}

.window-controls i,
.dialog-close {
  width: 16px;
  height: 14px;
  position: relative;
  display: block;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset 1px 1px var(--highlight), inset -1px -1px var(--shadow);
}

.window-minimize::after {
  content: "";
  width: 6px;
  height: 2px;
  position: absolute;
  left: 3px;
  bottom: 1px;
  background: #000;
}

.window-maximize::after {
  content: "";
  position: absolute;
  inset: 1px 2px 2px;
  border: 1px solid #000;
  border-top-width: 2px;
}

.window-close::before,
.window-close::after {
  content: "";
  width: 8px;
  height: 1px;
  position: absolute;
  top: 4px;
  left: 2px;
  background: #000;
}

.window-close::before { transform: rotate(45deg); }
.window-close::after { transform: rotate(-45deg); }

.menu-bar {
  min-width: 0;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  gap: 1px;
  overflow: hidden;
  border-bottom: 1px solid var(--shadow);
  box-shadow: 0 1px var(--light);
}

.menu-bar button {
  height: 18px;
  padding: 1px 6px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
}

.menu-bar button:active,
.menu-bar button:focus-visible {
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  outline: 0;
}

.application-menu {
  min-width: 178px;
  position: absolute;
  z-index: 35;
  padding: 2px;
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: 1px 1px 0 #000, inset 1px 1px var(--highlight), inset -1px -1px var(--shadow);
  font-size: 11px;
}

.application-menu[hidden] {
  display: none;
}

.application-menu button {
  width: 100%;
  min-height: 20px;
  padding: 2px 22px 2px 18px;
  display: block;
  border: 0;
  border-radius: 0;
  color: #000;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.application-menu button:hover,
.application-menu button:focus-visible {
  color: #fff;
  background: #000080;
  outline: 0;
}

.application-menu__separator {
  height: 2px;
  margin: 2px 1px;
  display: block;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--light);
}

.navigator-toolbar {
  min-width: 0;
  min-height: 0;
  padding: 1px 2px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) 38px;
  gap: 2px;
  border-bottom: 1px solid var(--shadow);
  box-shadow: 0 1px var(--light);
}

.toolbar-scroller {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.toolbar-scroller::-webkit-scrollbar,
.personal-links::-webkit-scrollbar {
  display: none;
}

.navigation-buttons {
  width: max-content;
  min-width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.browser-button {
  width: 55px;
  min-width: 55px;
  height: 42px;
  padding: 0 2px 1px;
  display: grid;
  grid-template-rows: 28px 11px;
  place-items: center;
  gap: 0;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.browser-button:hover:not(:disabled),
.browser-button:focus-visible {
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  outline: 0;
}

.browser-button:active:not(:disabled) {
  padding: 1px 1px 0 3px;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.browser-button:disabled {
  color: #777;
  cursor: default;
  text-shadow: 1px 1px #fff;
}

.browser-button b {
  font-size: 11px;
  line-height: 1;
  font-weight: 400;
}

.toolbar-icon {
  width: 35px;
  height: 31px;
  position: relative;
  display: block;
  filter: drop-shadow(1px 1px 0 #fff);
}

.browser-button:disabled .toolbar-icon {
  filter: grayscale(1) opacity(.48) drop-shadow(1px 1px 0 #fff);
}

.toolbar-icon--back::before,
.toolbar-icon--forward::before {
  content: "";
  width: 30px;
  height: 22px;
  position: absolute;
  top: 4px;
  left: 2px;
  background: linear-gradient(#4db5c8, #0d637f);
  border: 1px solid #063b55;
  clip-path: polygon(0 50%, 45% 0, 45% 30%, 100% 30%, 100% 70%, 45% 70%, 45% 100%);
}

.toolbar-icon--forward::before {
  transform: scaleX(-1);
}

.toolbar-icon--back i,
.toolbar-icon--forward i {
  width: 11px;
  height: 2px;
  position: absolute;
  top: 14px;
  left: 15px;
  background: rgba(255,255,255,.72);
}

.toolbar-icon--reload::before {
  content: "";
  width: 21px;
  height: 21px;
  position: absolute;
  top: 4px;
  left: 6px;
  border: 5px solid #168d8f;
  border-right-color: transparent;
  border-radius: 50%;
}

.toolbar-icon--reload::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  border: 7px solid transparent;
  border-left-color: #168d8f;
  transform: rotate(-38deg);
}

.toolbar-icon--home::before {
  content: "";
  width: 24px;
  height: 18px;
  position: absolute;
  left: 5px;
  bottom: 2px;
  background: linear-gradient(90deg, #f3bf42 0 72%, #b84c32 72%);
  border: 1px solid #6a3421;
}

.toolbar-icon--home::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  border-right: 15px solid transparent;
  border-bottom: 14px solid #b34c32;
  border-left: 15px solid transparent;
}

.toolbar-icon--home i {
  width: 5px;
  height: 11px;
  position: absolute;
  z-index: 1;
  left: 15px;
  bottom: 3px;
  background: #183f7c;
}

.toolbar-icon--print::before {
  content: "";
  width: 27px;
  height: 16px;
  position: absolute;
  left: 3px;
  bottom: 3px;
  background: #777;
  border: 2px solid #303030;
  box-shadow: inset 2px 2px #ddd;
}

.toolbar-icon--print::after {
  content: "";
  width: 19px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 8px;
  background: repeating-linear-gradient(#fff 0 3px, #8aa4c5 3px 4px);
  border: 1px solid #274c7c;
}

.toolbar-icon--stop::before {
  content: "";
  width: 27px;
  height: 27px;
  position: absolute;
  inset: 2px 4px;
  background: linear-gradient(135deg, #ff554f, #a90000);
  border: 2px solid #6b0000;
  clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%);
}

.toolbar-icon--stop::after {
  content: "!";
  position: absolute;
  z-index: 1;
  inset: 2px 4px;
  color: #fff;
  font: 900 20px/27px Arial, sans-serif;
  text-align: center;
}

svg.toolbar-icon {
  width: 26px;
  height: 26px;
  position: static;
  display: block;
  overflow: visible;
  filter: none;
  shape-rendering: crispEdges;
}

svg.toolbar-icon::before,
svg.toolbar-icon::after {
  content: none !important;
}

.browser-button:disabled svg.toolbar-icon {
  opacity: .42;
  filter: grayscale(1);
}

.toolbar-icon .icon-outline { fill: #111; }
.toolbar-icon .icon-teal { fill: #087d89; }
.toolbar-icon .icon-light { fill: #fff; }
.toolbar-icon .icon-light-blue { fill: #6fc5cf; }
.toolbar-icon .icon-blue { fill: #163f82; }
.toolbar-icon .icon-red { fill: #b32222; }
.toolbar-icon .icon-yellow { fill: #e8b837; }
.toolbar-icon .icon-gray { fill: #929292; }
.toolbar-icon .icon-green-dark { fill: #13663c; }
.toolbar-icon .icon-green { fill: #21a665; }
.toolbar-icon .icon-mint { fill: #9ff1c6; }
.toolbar-icon .icon-purple-dark { fill: #292963; }
.toolbar-icon .icon-purple { fill: #57509a; }
.toolbar-icon .icon-lilac { fill: #aaa7cf; }
.toolbar-icon .icon-cyan { fill: #37a8b7; }
.toolbar-icon .icon-yellow-dark { fill: #8b6315; }

/* Late Navigator/Communicator 4.x used a cooler purple/teal icon palette. */
.toolbar-icon--back .icon-teal,
.toolbar-icon--forward .icon-teal { fill: #4d9b91; }
.toolbar-icon--reload .icon-teal { fill: #49418d; }
.toolbar-icon--home .icon-red { fill: #4b3e87; }
.toolbar-icon--home .icon-yellow { fill: #c9c8d9; }
.toolbar-icon--home .icon-blue { fill: #30306d; }
.netscape-throbber {
  width: 38px;
  height: 38px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: #000;
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.netscape-throbber__art {
  width: 34px;
  height: 34px;
  display: block;
  shape-rendering: crispEdges;
}

.netscape-throbber__frame {
  opacity: 0;
}

.browser-shell.is-throbbing .netscape-throbber__frame {
  animation: netscape-meteor-frame 1.12s steps(1, end) infinite;
}

.browser-shell.is-throbbing .netscape-throbber__frame--1 { animation-delay: 0s; }
.browser-shell.is-throbbing .netscape-throbber__frame--2 { animation-delay: .14s; }
.browser-shell.is-throbbing .netscape-throbber__frame--3 { animation-delay: .28s; }
.browser-shell.is-throbbing .netscape-throbber__frame--4 { animation-delay: .42s; }
.browser-shell.is-throbbing .netscape-throbber__frame--5 { animation-delay: .56s; }
.browser-shell.is-throbbing .netscape-throbber__frame--6 { animation-delay: .7s; }
.browser-shell.is-throbbing .netscape-throbber__frame--7 { animation-delay: .84s; }
.browser-shell.is-throbbing .netscape-throbber__frame--8 { animation-delay: .98s; }

@keyframes netscape-meteor-frame {
  0% { opacity: 1; }
  12.5%, 100% { opacity: 0; }
}

.location-bar,
.personal-toolbar {
  min-width: 0;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--shadow);
  box-shadow: 0 1px var(--light);
}

.toolbar-grip {
  width: 7px;
  height: 19px;
  position: relative;
  flex: 0 0 auto;
  background:
    radial-gradient(circle, #747474 0 1px, transparent 1.1px) 1px 5px / 4px 4px,
    radial-gradient(circle, #fff 0 1px, transparent 1.1px) 2px 6px / 4px 4px;
  border-left: 1px solid var(--light);
  border-right: 1px solid var(--shadow);
}

.toolbar-grip::before {
  position: absolute;
  top: 1px;
  left: 1px;
  border-top: 3px solid #292963;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
  content: "";
}

.toolbar-grip--navigator {
  height: 40px;
  align-self: center;
}

.navigator-toolbar .toolbar-grip {
  grid-column: 1;
}

.navigator-toolbar .toolbar-scroller {
  grid-column: 2;
}

.navigator-toolbar .netscape-throbber {
  grid-column: 3;
  align-self: center;
}

.location-bar label {
  font-size: 11px;
}

.netsite-mark {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
}

.netsite-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.location-field {
  min-width: 60px;
  height: 20px;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17px;
  background: #fff;
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.location-field input {
  width: 100%;
  min-width: 0;
  height: 16px;
  padding: 1px 3px;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 0;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.location-field input:focus-visible {
  outline-offset: -2px;
}

.location-history-arrow {
  position: relative;
  background: var(--face);
  border-left: 1px solid var(--shadow);
  box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--shadow);
}

.location-history-arrow::after {
  position: absolute;
  top: 6px;
  left: 5px;
  border-top: 5px solid #000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.notice-action,
.dialup-dialog button {
  min-height: 23px;
  padding: 2px 10px;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  border-radius: 0;
  box-shadow: inset 1px 1px var(--highlight), inset -1px -1px var(--shadow);
  font-size: 10px;
  cursor: pointer;
}

.notice-action:active,
.dialup-dialog button:active {
  padding: 3px 9px 1px 11px;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  box-shadow: inset 1px 1px var(--shadow);
}

.personal-toolbar {
  padding-block: 1px;
  overflow: hidden;
}

.personal-toolbar button {
  height: 20px;
  flex: 0 0 auto;
  padding: 1px 5px 1px 3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}

.personal-toolbar button:hover,
.personal-toolbar button:focus-visible {
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  outline: 0;
}

.personal-toolbar button:active {
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.bookmarks-button {
  height: 20px;
  flex: 0 0 auto;
  padding: 1px 5px 1px 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
}

.bookmarks-button:hover,
.bookmarks-button:focus-visible {
  border-color: var(--light) var(--shadow) var(--shadow) var(--light);
  outline: 0;
}

.bookmarks-button:active,
.bookmarks-button[aria-expanded="true"] {
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.bookmarks-button::after {
  margin-left: 1px;
  border-top: 4px solid #111;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  content: "";
}

.bookmarks-mark {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.bookmarks-mark__dark { fill: #28205f; }
.bookmarks-mark__page { fill: #d7d7e8; }
.bookmarks-mark__fold { fill: #7770a6; }
.bookmarks-mark__line { fill: #454078; }
.bookmarks-mark__spark { fill: #e3cc27; }

.personal-divider {
  width: 2px;
  height: 18px;
  flex: 0 0 auto;
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--light);
}

.personal-links {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.personal-link-icon {
  width: 16px;
  height: 16px;
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
}

.personal-link-icon::before {
  position: absolute;
  content: "";
}

.personal-link-icon--favorite::before {
  inset: 2px;
  background: #73a8ba;
  border: 1px solid #292963;
  clip-path: polygon(50% 0, 62% 36%, 100% 36%, 69% 58%, 82% 100%, 50% 72%, 18% 100%, 31% 58%, 0 36%, 38% 36%);
}

.content-well {
  min-width: 0;
  min-height: 0;
  margin: 0 2px;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 2px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.content-well iframe {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: block;
  border: 0;
  background: #fff;
}

.browser-notice {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: clamp(18px, 5vw, 58px);
  display: flex;
  align-items: flex-start;
  gap: 18px;
  overflow: auto;
  color: #000;
  background: #fff;
}

.browser-notice[hidden] {
  display: none;
}

.browser-notice__brand {
  width: 68px;
  height: 64px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #000033;
  border: 2px solid #00113b;
}

.browser-notice__brand span {
  position: absolute;
  z-index: 1;
  inset: 4px 8px;
  font: italic 900 48px/.95 "Times New Roman", serif;
  text-shadow: 2px 2px #008c96;
}

.browser-notice__brand i {
  width: 45px;
  height: 1px;
  position: absolute;
  top: 31px;
  left: 31px;
  background: #fff;
  transform-origin: left;
}

.browser-notice__brand i:nth-of-type(2) { transform: rotate(35deg); }
.browser-notice__brand i:nth-of-type(3) { transform: rotate(-35deg); }

.browser-notice h2 {
  margin: 4px 0 8px;
  color: #000080;
  font: 700 clamp(21px, 3vw, 31px)/1.05 "Times New Roman", serif;
}

.browser-notice p {
  max-width: 620px;
  margin: 0 0 18px;
  font: 16px/1.4 "Times New Roman", serif;
}

.notice-action {
  min-height: 30px;
  font-size: 11px;
  font-weight: 700;
}

/* Compact Windows 98 Dial-Up Networking progress window. */
.dialup-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  padding: 8px;
  display: grid;
  place-items: center;
  background: transparent;
}

.dialup-overlay[hidden] {
  display: none;
}

.dialup-dialog {
  width: min(348px, 100%);
  transform: translateY(-44px);
  color: #000;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset 1px 1px var(--highlight), inset -1px -1px var(--shadow);
  font: 11px/1.2 "MS Sans Serif", Tahoma, Geneva, sans-serif;
}

.dialup-dialog:focus {
  outline: none;
}

.dialup-titlebar {
  height: 18px;
  margin: 2px;
  padding: 2px 2px 2px 3px;
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 3px;
  color: #fff;
  background: linear-gradient(90deg, #000080, #1084d0);
}

.dialup-titlebar h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialup-title-icon {
  width: 15px;
  height: 14px;
  display: block;
  image-rendering: pixelated;
}

.dialup-dialog .dialog-close {
  width: 16px;
  min-width: 16px;
  height: 14px;
  min-height: 14px;
  position: relative;
  display: block;
  padding: 0;
  background: var(--face);
  border: 2px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: inset 1px 1px var(--highlight), inset -1px -1px var(--shadow);
  font-size: 0;
  cursor: default;
}

.dialog-close::before,
.dialog-close::after {
  content: "";
  width: 8px;
  height: 1px;
  position: absolute;
  top: 5px;
  left: 2px;
  background: #000;
}

.dialog-close::before { transform: rotate(45deg); }
.dialog-close::after { transform: rotate(-45deg); }

.dialup-dialog .dialog-close:active {
  padding: 0;
}

.dialup-body {
  /* Match the asymmetric Win98 DUN client area: controls sit high with the
     characteristic unused grey band below them. */
  padding: 8px 14px 24px 18px;
}

.dialup-progress-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 15px;
}

.dialup-network-icon {
  width: 32px;
  height: 32px;
  display: block;
  image-rendering: pixelated;
}

.dialup-title-icon .dun-dark,
.dialup-network-icon .dun-dark { fill: #202020; }
.dialup-title-icon .dun-white,
.dialup-network-icon .dun-white { fill: #ffffff; }
.dialup-title-icon .dun-case,
.dialup-network-icon .dun-case,
.dialup-title-icon .dun-base,
.dialup-network-icon .dun-base { fill: #c0c0c0; }
.dialup-title-icon .dun-screen,
.dialup-network-icon .dun-screen { fill: #007b78; }
.dialup-title-icon .dun-screen-light,
.dialup-network-icon .dun-screen-light,
.dialup-network-icon .dun-highlight { fill: #70d4ca; }
.dialup-title-icon .dun-shadow,
.dialup-network-icon .dun-shadow { fill: #7f7f7f; }
.dialup-title-icon .dun-cable,
.dialup-network-icon .dun-cable { fill: #7777b7; }
.dialup-title-icon .dun-phone,
.dialup-network-icon .dun-phone { fill: #d6d600; }
.dialup-title-icon .dun-phone-light,
.dialup-network-icon .dun-phone-light { fill: #ffff66; }
.dialup-network-icon .dun-phone-shadow { fill: #858500; }
.dialup-title-icon .dun-line,
.dialup-network-icon .dun-line { fill: #606060; }
.dialup-title-icon .dun-signal-static { fill: #d60000; }
.dialup-network-icon .dun-keypad-face { fill: #f3f3c7; }
.dialup-network-icon .dun-keypad-button { fill: #555500; }
.dialup-network-icon .dun-signal {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: dialup-signal-loop 3.2s steps(1, end) infinite;
}
.dialup-network-icon .dun-signal-dark { fill: #8f0000; }
.dialup-network-icon .dun-signal-core { fill: #f00000; }

@keyframes dialup-signal-loop {
  0%, 16.66% { transform: translate(0, 0); }
  16.67%, 33.32% { transform: translate(0, -6px); }
  33.33%, 49.99% { transform: translate(0, -12px); }
  50%, 66.65% { transform: translate(0, -6px); }
  66.66%, 83.32% { transform: translate(0, 0); }
  83.33%, 100% { transform: translate(-6px, 0); }
}

.dialup-status {
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 3px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.dialup-status span {
  flex: 0 0 auto;
}

.dialup-status strong {
  min-width: 0;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
}

#hangupButton {
  width: 80px;
  min-width: 80px;
  min-height: 24px;
  padding: 2px 8px;
  font-size: 11px;
}

.status-bar {
  min-width: 0;
  padding: 1px 2px;
  display: grid;
  grid-template-columns: 44px minmax(100px, 1fr) 92px 72px 86px 16px;
  gap: 2px;
  font-size: 9px;
}

.status-icon {
  min-width: 0;
  min-height: 17px;
  padding-inline: 2px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  background: var(--face);
  border: 1px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.status-icon i {
  width: 14px;
  height: 12px;
  position: relative;
  display: block;
}

.status-icon__page::before {
  position: absolute;
  inset: 1px 3px;
  background: #fff;
  border: 1px solid #292963;
  box-shadow: inset 0 2px #7c79b0;
  content: "";
}

.status-icon__page::after {
  width: 4px;
  height: 1px;
  position: absolute;
  top: 6px;
  left: 5px;
  background: #292963;
  box-shadow: 0 2px #292963;
  content: "";
}

.status-icon__plug::before {
  width: 7px;
  height: 5px;
  position: absolute;
  top: 4px;
  left: 2px;
  background: #7370ac;
  border: 1px solid #292963;
  content: "";
}

.status-icon__plug::after {
  width: 5px;
  height: 1px;
  position: absolute;
  top: 2px;
  left: 4px;
  background: #292963;
  box-shadow: 5px 3px #292963, 5px 6px #292963;
  content: "";
}

.status-bar p {
  min-width: 0;
  min-height: 17px;
  margin: 0;
  padding: 2px 4px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-progress,
.status-apps {
  min-width: 0;
  min-height: 17px;
  padding: 2px 3px;
  display: flex;
  align-items: end;
  gap: 2px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--shadow) var(--light) var(--light) var(--shadow);
}

.status-progress i {
  width: 5px;
  height: 4px;
  flex: 0 0 auto;
  background: #dedede;
  border: 1px solid #919191;
}

.browser-shell.is-throbbing .status-progress i:nth-child(3n + 1) {
  background: #e6d92d;
  border-color: #776f16;
}

.browser-shell.is-throbbing .status-progress i:nth-child(3n + 2) {
  background: #4c9ca3;
  border-color: #23585e;
}

.snapshot-status {
  display: block;
  text-align: center;
}

.status-apps {
  justify-content: space-around;
  align-items: center;
  padding-inline: 2px;
}

.status-apps i {
  width: 12px;
  height: 11px;
  position: relative;
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #292963;
  box-shadow: inset 0 3px #6b68a6;
}

.status-apps i:nth-child(2) {
  background: #f0d62c;
  box-shadow: inset 4px 0 #4f8f99;
}

.status-apps i:nth-child(3) {
  background: #d8d7ea;
  box-shadow: inset 0 -3px #4f8f99;
}

.status-apps i:nth-child(4) {
  background: #fff;
  box-shadow: inset 3px 0 #e4463b, inset 0 3px #6b68a6;
}

.status-apps i:nth-child(5) {
  background: #f0d62c;
  clip-path: polygon(50% 0, 64% 36%, 100% 36%, 72% 58%, 82% 100%, 50% 74%, 18% 100%, 28% 58%, 0 36%, 36% 36%);
}

.status-resize {
  min-width: 16px;
  min-height: 17px;
  background: repeating-linear-gradient(135deg, transparent 0 2px, #777 2px 3px, #fff 3px 4px);
}

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

noscript {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: 24px;
  color: #fff;
  background: #000080;
  font: 16px/1.5 Arial, sans-serif;
}

@media (max-width: 600px) {
  .browser-shell {
    grid-template-rows: 18px 22px 44px 23px 23px minmax(0, 1fr) 20px;
  }

  .menu-bar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu-bar::-webkit-scrollbar {
    display: none;
  }

  .menu-bar button {
    padding-inline: 5px;
  }

  .navigator-toolbar {
    grid-template-columns: 7px minmax(0, 1fr) 38px;
    padding-block: 1px;
  }

  .browser-button {
    width: 55px;
    min-width: 55px;
    height: 42px;
    grid-template-rows: 28px 11px;
  }

  svg.toolbar-icon {
    width: 26px;
    height: 26px;
    transform: none;
  }

  .location-bar label {
    display: none;
  }

  .personal-toolbar {
    gap: 2px;
  }

  .bookmarks-button {
    padding-inline: 3px !important;
  }

  .browser-notice {
    padding: 22px 16px;
    gap: 12px;
  }

  .browser-notice__brand {
    width: 54px;
    height: 51px;
  }

  .browser-notice__brand span {
    font-size: 39px;
  }

  .dialup-overlay {
    padding: 7px;
  }

  .dialup-body {
    padding: 8px 14px 24px 18px;
  }

  .dialup-progress-row {
    gap: 15px;
  }

  .status-bar {
    grid-template-columns: 44px minmax(0, 1fr) 64px 16px;
  }

  .status-progress,
  .status-apps {
    display: none;
  }
}

@media (max-width: 350px) {
  .menu-bar button {
    padding-inline: 4px;
    font-size: 10px;
  }

  .browser-notice__brand {
    display: none;
  }

  .status-bar {
    grid-template-columns: 44px minmax(0, 1fr) 16px;
  }

  .snapshot-status {
    display: none;
  }

}

@media (max-height: 360px) {
  .browser-shell {
    grid-template-rows: 18px 20px 42px 22px 22px minmax(0, 1fr) 20px;
  }

  .navigator-toolbar {
    grid-template-columns: 7px minmax(0, 1fr) 38px;
    padding-block: 0;
  }

  .browser-button {
    height: 40px;
    grid-template-rows: 25px auto;
  }

  svg.toolbar-icon {
    width: 24px;
    height: 24px;
    transform: none;
  }

}

@media (pointer: coarse) {
  .browser-shell {
    grid-template-rows: 22px 44px 48px 44px 44px minmax(0, 1fr) 23px;
  }

  .menu-bar button,
  .bookmarks-button,
  .location-field,
  .location-field input,
  .notice-action,
  .personal-toolbar button {
    min-height: 44px;
  }

  .location-field,
  .location-field input {
    height: 44px;
  }

  .location-history-arrow::after {
    top: 18px;
  }

  .browser-button {
    min-height: 44px;
  }

  .application-menu button {
    min-height: 44px;
  }

  #hangupButton {
    width: 94px;
    min-width: 94px;
    min-height: 44px;
  }

  .dialup-progress-row {
    grid-template-columns: 32px minmax(0, 1fr) 94px;
  }

  .notice-action {
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .browser-shell.is-throbbing .netscape-throbber__frame {
    animation: none !important;
    opacity: 0;
  }

  .browser-shell.is-throbbing .netscape-throbber__frame--4 {
    opacity: 1;
  }

  .dialup-network-icon .dun-signal {
    animation: none !important;
    transform: none;
  }
}