* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.desktop-page {
  background: #000;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; }

#screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
  transform-origin: 50% 50%;
}

/* Mac CRTs had rounded screen corners */
[data-os='os7'] #screen,
[data-os='os9'] #screen { border-radius: 9px; }

#desk { position: absolute; inset: 0; }
[data-os='os7'] #desk, [data-os='os9'] #desk { top: 20px; }
[data-os='osx'] #desk { top: 22px; bottom: 76px; }
[data-os='win'] #desk { bottom: 28px; }

/* Desktop icons */
#icons { position: absolute; inset: 0; pointer-events: none; }
.desk-icon {
  position: absolute;
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  pointer-events: auto;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}
.desk-icon .pix { width: 32px; height: 32px; }
[data-os='os7'] .desk-icon,
[data-os='os9'] .desk-icon,
[data-os='osx'] .desk-icon { width: 96px; }
.desk-icon .di-label { max-width: 100%; line-height: 1.25; overflow-wrap: break-word; }
.original-icon { object-fit: contain; flex-shrink: 0; }
[data-os='osx'] .desk-icon .aqua { width: 48px; height: 48px; image-rendering: auto; }
[data-os='osx'] .desk-icon.selected .aqua { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)) brightness(0.7); }
.desk-icon:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

/* Cheetah's flat translucent Dock, before the later reflective shelf. */
.aqua-dock {
  position: absolute; z-index: 9000; bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 3px; padding: 4px 7px 5px;
  max-width: calc(100% - 20px); height: 72px;
  border: 1px solid rgba(255,255,255,.65); border-bottom: 0;
  background: repeating-linear-gradient(rgba(255,255,255,.4) 0 1px, rgba(218,231,246,.35) 1px 3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(55,74,96,.25);
}
.dock-item {
  position: relative; display: grid; place-items: center; flex: 0 0 56px;
  width: 56px; height: 61px; padding: 0 1px 7px; border: 0;
  background: none; cursor: default;
}
.dock-item .aqua { width: 54px; height: 54px; image-rendering: auto; transition: transform .14s ease; transform-origin: bottom; }
.dock-item:hover .aqua { transform: translateY(-4px) scale(1.12); }
.dock-item:active .aqua { filter: brightness(.7); }
.dock-item:focus-visible { outline: 2px solid #215cb4; outline-offset: -2px; }
.dock-item.running::after { content: ''; position: absolute; bottom: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid #172532; }
.dock-divider { align-self: stretch; width: 1px; flex-shrink: 0; margin: 1px 5px; background: rgba(74,98,124,.35); box-shadow: 1px 0 rgba(255,255,255,.65); }
.dock-windows { display: flex; min-width: 0; max-width: 180px; overflow-x: auto; }
.dock-windows:empty { display: none; }
[data-os='osx'] .original-icon { image-rendering: auto; }
[data-os='osx'] .dialer { min-width: 440px; }
[data-os='osx'] .dialer .dialog-icon { display: none; }
[data-os='osx'] .dialer .dialog-main { width: 100%; }
[data-os='osx'] .dialer .field { grid-template-columns: 130px minmax(0, 1fr); }
.aqua-configuration { display: flex; align-items: center; gap: 8px; padding-bottom: 13px; margin-bottom: 16px; border-bottom: 1px solid #b4b4b4; box-shadow: 0 1px #fff; font-size: 12px; }
.aqua-modem-name { flex: 1; padding: 3px 8px; border: 1px solid #888; border-radius: 3px; background: linear-gradient(#fff,#dedede); }
[data-os='osx'] .dialer .dialer-status { padding-top: 12px; border-top: 1px solid #bbb; }

/* Menu bar (Mac) ---------------------------------------------------------- */

.menubar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  align-items: stretch;
  padding: 0 8px;
  user-select: none;
  -webkit-user-select: none;
}
.mb-item { cursor: default; display: flex; align-items: center; gap: 4px; }
.mb-item .pix { width: 16px; height: 16px; }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-right: 6px; }

/* Menu bar extras */
.mb-right .mb-item { padding: 0 6px; }
.mb-right .clock { padding: 0 6px; }
[data-os='osx'] .mb-right .pix { width: 15px; height: 15px; }
[data-os='osx'] .mb-item.open .pix:not(.keep-color) { filter: invert(1); }
[data-os='os7'] .mb-item.open .pix:not(.keep-color),
[data-os='os9'] .mb-item.open .pix:not(.keep-color) { filter: invert(1); }
.conn-time { font-size: 13px; margin-left: 2px; }
.conn-time:empty { display: none; }

/* Control Strip (Mac OS 8/9) */
.control-strip {
  position: absolute;
  left: 0;
  bottom: 10px;
  height: 26px;
  display: flex;
  z-index: 8900;
  background: linear-gradient(#f0f0f0, #c8c8c8);
  border: 1px solid #000;
  border-left: 0;
  box-shadow: inset 0 1px #fff, 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.cs-module {
  width: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid #888;
  box-shadow: 1px 0 #fff;
  background: transparent;
}
.cs-module .pix { width: 16px; height: 16px; }
.cs-module:active, .cs-module.open { background: #888; }
.cs-tab {
  width: 13px;
  border: 0;
  border-radius: 0 9px 9px 0;
  margin-right: -1px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, #777 3px 4px, #fff 4px 5px) 2px 6px / 8px 12px no-repeat,
    linear-gradient(#e4e4e4, #b8b8b8);
}
.control-strip.collapsed .cs-module { display: none; }

/* Taskbar (Windows) ------------------------------------------------------- */

.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  z-index: 9000;
  background: #c0c0c0;
  box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px 0;
}
.start-btn {
  height: 22px;
  padding: 0 5px 0 3px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  background: #c0c0c0;
  border: 0;
  box-shadow: var(--raised);
}
.start-btn .pix { width: 16px; height: 16px; }
.start-btn.open, .task-btn.active { box-shadow: var(--sunken); background: #c0c0c0 repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px; }
.task-buttons { flex: 1; display: flex; gap: 3px; min-width: 0; }
.task-btn {
  height: 22px;
  width: 160px;
  min-width: 0;
  flex-shrink: 1;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: #c0c0c0;
  border: 0;
  box-shadow: var(--raised);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}
.task-btn.active { font-weight: 700; }
.task-btn .pix { width: 16px; height: 16px; flex-shrink: 0; }
.task-btn span { overflow: hidden; text-overflow: ellipsis; }
.tray {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 6px;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
}
.tray-modem { width: 22px; height: 16px; display: block; }
.tray-modem .scr { fill: #008080; }
.tray-modem.tx .scr-a, .tray-modem.rx .scr-b { fill: #9fe7e7; }

.start-menu { display: flex; padding: 3px; }
.start-menu .start-band {
  width: 22px;
  background: linear-gradient(#000080, #1084d0);
  color: #c0c0c0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Arial, sans-serif;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -0.5px;
  padding: 6px 0;
  -webkit-font-smoothing: antialiased;
}
.start-menu .start-band b { color: #fff; }
.start-menu .start-items { flex: 1; }

/* Layers ----------------------------------------------------------------- */

#windows { position: absolute; inset: 0; pointer-events: none; }
#windows > * { pointer-events: auto; }
#layer { position: absolute; inset: 0; pointer-events: none; z-index: 9500; }
#layer > * { pointer-events: auto; }
.modal-veil { position: absolute; inset: 0; }
#layer .dialog { position: absolute; }

/* Window states */
.window .viewport { transition: none; }
.window.zoomed { inset: 6px !important; width: auto !important; height: auto !important; }
.window.zoomed .win-body { flex: 1; }
.window.zoomed .viewport { flex: 1; }
.window.zoomed img.final { width: 100% !important; height: 100% !important; object-fit: contain; }
.window.minimized { display: none; }
.placeholder .btn { margin-top: 4px; }
.ph-title { font-weight: 700; }
[data-os='os7'] .ph-title, [data-os='os9'] .ph-title { font-weight: 400; }
.ph-body { opacity: 0.8; line-height: 1.4; white-space: normal; }

/* Opening animation for Mac: expanding outline rectangles */
.zoom-rect {
  position: absolute;
  border: 1px dotted #000;
  pointer-events: none;
  z-index: 9400;
}
[data-os='osx'] .window.opening { animation: genie-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes genie-in { from { transform: scale(0.6); opacity: 0; } }

/* Dialer */
.dialer .dialog-main { width: 300px; }
.dialer-progress { width: 100% !important; }

/* Toast-free confirmation inside dialogs */
.copy-field { font-size: 11px; }

/* CRT ---------------------------------------------------------------------- */

#crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100000;
  display: none;
  background:
    radial-gradient(ellipse 85% 80% at 50% 50%, transparent 65%, rgba(0, 0, 0, 0.22) 100%),
    repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.025) 2px 3px);
}
#crt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  top: -22%;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.035) 50%, transparent);
  animation: roll 9s linear infinite;
}
body.crt #crt { display: block; }
body.crt #screen { filter: saturate(1.03) contrast(1.01); }
/* Aqua's own pinstripes should stay distinct from the optional CRT effect. */
body.crt[data-os='osx'] #crt { opacity: .35; }
body.crt[data-os='osx'] #screen { filter: none; }
@keyframes roll { to { top: 100%; } }

#screen.power-on { animation: power-on 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes power-on {
  0% { transform: scale(0.15, 0.003); filter: brightness(6); }
  35% { transform: scale(1, 0.006); filter: brightness(3); }
  100% { transform: scale(1, 1); filter: brightness(1) saturate(1.12) contrast(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  #crt::after, #screen.power-on, .window.opening, [data-os] .progress-fill, [data-os='osx'] .btn-default { animation: none !important; }
}

/* Larger viewports: the screen is a fixed-resolution display, not the page --- */

@media (min-width: 761px) {
  body.desktop-page { background: radial-gradient(ellipse 80% 70% at 50% 45%, #202027, #070709 75%); }
  #screen {
    --sw: 1024;
    --sh: 768;
    margin: auto;
    width: min(calc(var(--sw) * 1px), calc(100vw - 64px), calc((100vh - 64px) * var(--sw) / var(--sh)));
    height: min(calc(var(--sh) * 1px), calc((100vw - 64px) * var(--sh) / var(--sw)), calc(100vh - 64px));
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 90px rgba(0, 0, 0, 0.7);
  }
  [data-os='os7'] #screen { --sw: 832; --sh: 624; }
  [data-os='win'] #screen { --sw: 800; --sh: 600; }
}

/* Phones: windows stack and scroll -------------------------------------- */

@media (max-width: 760px) {
  #desk { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #icons { display: none; }
  #windows {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 16px 12px 40px;
    min-height: 100%;
  }
  #windows > .window { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; }
  #windows > .window.zoomed { inset: auto !important; }
  #layer .dialog { left: 12px !important; right: 12px; width: auto !important; top: 64px !important; }
  .dialer .dialog-main { width: auto; }
  [data-os] .field { grid-template-columns: 1fr; gap: 4px; }
  [data-os] .field > span { text-align: left !important; }
  [data-os] .input { font-size: 16px !important; }
  /* The 11px Windows bitmap font clips when enlarged inside a 21px field. */
  [data-os='win'] .input { font-family: Arial, sans-serif; min-height: 32px; padding: 6px; }
  [data-os='osx'] #desk { bottom: 62px; }
  [data-os='osx'] .dialer { min-width: 0; }
  [data-os='osx'] .dialer .field { grid-template-columns: 1fr; }
  [data-os='osx'] .menubar { padding: 0 4px; font-size: 13px; }
  [data-os='osx'] .mb-item { padding: 0 6px; }
  [data-os='osx'] .mb-right { gap: 2px; padding-right: 0; }
  [data-os='osx'] .mb-right .mb-item { padding: 0 4px; }
  [data-os='osx'] .clock { padding: 0 4px; white-space: nowrap; }
  [data-os='osx'] .conn-time { display: none; }
  .aqua-dock { height: 60px; gap: 1px; padding: 3px 4px 4px; }
  .dock-item { flex-basis: 45px; width: 45px; height: 51px; }
  .dock-item .aqua { width: 43px; height: 43px; }
  .dock-divider { margin: 1px 3px; }
  .dock-windows { max-width: 90px; }
  [data-os] .menu-item { line-height: 30px !important; }
  [data-os] .progress { width: 90px; }
  .task-btn { width: auto; flex: 1; }
  [data-os] .statusbar { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dock-item .aqua { transition: none; }
  .dock-item:hover .aqua { transform: none; }
}

/* Late additions: frame, outlines, per-window menus (Win), misc ---------- */

[data-os] .frame { position: relative; line-height: 0; }
.drag-outline {
  position: absolute;
  pointer-events: none;
  z-index: 99999;
  border: 1px dotted #fff;
  mix-blend-mode: difference;
}
[data-os='win'] .drag-outline { border: 3px solid #fff; border-style: dotted; }

[data-os] .win-menubar { display: none; }
[data-os='win'] .win-menubar { display: flex; padding: 1px 0 2px; }
[data-os='win'] .window.shaded .win-menubar { display: none; }
[data-os='win'] .wm-item { padding: 2px 6px; cursor: default; }
[data-os='win'] .wm-item.open { background: #000080; color: #fff; }

.form-error { color: #c00; }
[data-os='os7'] .form-error { color: #000; text-decoration: underline; }
[data-os] .dialer-progress { height: 12px; }
[data-os='win'] .dialer-progress { height: 17px; }

.safe-off {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: #000;
  color: #ff8a00;
  display: grid;
  place-items: center;
  text-align: center;
  font: 700 28px/1.3 'MS Sans', Tahoma, sans-serif;
  -webkit-font-smoothing: none;
}

@media (min-width: 761px) {
  #windows > .window { min-width: 400px; }
}

/* Navigator's compact toolbars and unstyled, early-web article typography. */
.window.netscape-window { width: min(800px, calc(100% - 130px)); height: min(650px, calc(100% - 44px)); display: flex; flex-direction: column; }
.window.netscape-window.minimized { display: none; }
.netscape-window .win-menubar .wm-item { border: 0; background: transparent; color: inherit; font: inherit; }
.ns-toolbar { display: flex; gap: 2px; padding: 4px 5px; border-bottom: 1px solid #808080; box-shadow: 0 1px #fff; }
.ns-tool.btn { height: 47px; min-width: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3px 7px; gap: 3px; line-height: 12px; }
.ns-tool-icon { width: 24px; height: 24px; flex-shrink: 0; }
.ns-tool.btn:disabled { text-shadow: 1px 1px #fff; }
.ns-tool:disabled .ns-tool-icon { filter: grayscale(1); opacity: .38; }
.ns-tool.btn:active:not(:disabled) .ns-tool-icon, .ns-tool.btn:active:not(:disabled) span { transform: translate(1px, 1px); }
.ns-logo { margin-left: auto; display: grid; place-items: center; background: #132b3b; color: #fff; border: 2px inset #eee; width: 48px; height: 47px; font: italic bold 40px Georgia, serif; }
.ns-location { display: flex; align-items: center; gap: 7px; padding: 7px 5px 5px; }
.ns-location .input { flex: 1; width: 0; min-width: 0; }
.ns-location .btn { min-width: 36px; }
.ns-bookmarks { display: flex; align-items: center; gap: 12px; padding: 3px 7px 6px; font-size: 11px; flex-wrap: wrap; }
.ns-bookmarks span { color: #555; }
.ns-bookmarks button { border: 0; background: none; text-decoration: underline; cursor: pointer; }
.ns-page { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #fff; color: #111; margin: 0 3px; padding: 18px 22px; border: 2px inset #eee; font: 15px/1.5 'Times New Roman', serif; user-select: text; overflow-wrap: anywhere; }
.ns-page h1 { font-size: 28px; margin: 0 0 16px; }
.ns-page h2 { font-size: 23px; margin: 20px 0 8px; border-bottom: 1px solid #aaa; }
.ns-page h3 { margin: 14px 0 6px; }
.ns-page p, .ns-page ul, .ns-page ol, .ns-page dl { margin: 10px 0; }
.ns-page ul, .ns-page ol { padding-left: 28px; }
.ns-page a { color: #0000a0; text-decoration: underline; cursor: pointer; }
.ns-page a:visited { color: #551a8b; }
.ns-page img { max-width: 100%; height: auto; }
.ns-page table { border-collapse: collapse; max-width: 100%; font-size: 13px; }
.ns-page td, .ns-page th { border: 1px solid #ccc; padding: 5px; }
.ns-page pre { white-space: pre-wrap; }
.ns-banner { display: flex; gap: 22px; align-items: center; padding: 12px 0 20px; font: 18px Georgia, serif; letter-spacing: 2px; }
.ns-banner strong { display: inline-block; margin-top: 8px; font-size: 16px; letter-spacing: 0; font-weight: normal; }
.ns-big-n { font: italic bold 80px/1 Georgia, serif; color: #174457; }
.ns-welcome hr { margin: 12px 0 22px; }
.ns-credit { margin-top: 30px; border-top: 1px solid #aaa; padding-top: 10px; font-size: 12px; }
.netscape-window .statusbar { display: flex; justify-content: space-between; gap: 8px; flex-shrink: 0; }
@media (max-width: 760px) {
  .window.netscape-window { height: 72dvh; }
  .ns-page { padding: 12px; }
  .ns-tool.btn { min-width: 42px; padding: 3px 5px; }
  .ns-logo { width: 40px; }
  .ns-bookmarks { gap: 9px; }
  .ns-bookmarks span { display: none; }
}