/* Hotwire: the Paloma Visitors Bureau's desktop.
   Colours are the game's HUD colours (pink, cyan, yellow, orange, cream). The controls inside
   the windows (buttons, sliders, scroll bars) are in the Mac OS 9 manner. */

@font-face {
  font-family: "Hotwire Pixel";
  src: url("assets/hotwire-pixel.ttf") format("truetype");
  font-display: block;
}

/* The site's own fonts (assets/fonts, with their licences), so that it reads the same on every
   machine. The ones that come with a Mac are named after them, for when these do not load.
   (Libre Caslon is cut large: it is brought down to the size of the type it stands for.) */
@font-face { font-family: "Noto Sans"; src: url("assets/fonts/noto-sans-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("assets/fonts/noto-sans-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("assets/fonts/libre-caslon-text-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 94%; }
@font-face { font-family: "Libre Caslon Text"; src: url("assets/fonts/libre-caslon-text-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; size-adjust: 94%; }
@font-face { font-family: "Libre Caslon Text"; src: url("assets/fonts/libre-caslon-text-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; size-adjust: 94%; }
@font-face { font-family: "Yellowtail"; src: url("assets/fonts/yellowtail-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("assets/fonts/jost-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("assets/fonts/comic-neue-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Comic Neue"; src: url("assets/fonts/comic-neue-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --pink: #ff6ec8;
  --cyan: #3ce6f0;
  --yellow: #ffe14a;
  --orange: #ffaa3c;
  --cream: #fbf5e6;
  --violet: #2b2140;

  /* Day. */
  --text: #2b2140;
  --muted: #7a6c86;
  --line: #2b2140;
  --win: #fbf5e6;
  --win-2: #f1e6cd;
  --bar: #fbf5e6;
  --shadow: #2b2140;
  --accent: #e0368f;
  --sky: linear-gradient(to bottom, #ffe9c9 0%, #ffd0c2 45%, #ffaecb 78%, #ff9ac4 100%);
  --dither: rgba(43, 33, 64, .06);
  /* (For the wallpaper with the sun going down into the sea.) */
  --sun: linear-gradient(to bottom, #fff6b0 0%, #ffd257 45%, #ff9a6b 100%);
  --sea: #45d3d8;
  --sea-line: rgba(255, 255, 255, .55);

  --pixel: "Hotwire Pixel", "Geneva", "Verdana", monospace;
  --sans: "Noto Sans", "Geneva", "Verdana", "Helvetica Neue", sans-serif;
  --serif: "Libre Caslon Text", "Iowan Old Style", "Palatino", "Book Antiqua", Georgia, serif;
  --script: "Yellowtail", "Brush Script MT", "Snell Roundhand", "Segoe Script", cursive;
  /* Round each icon by night, when its dark outline would be lost against the sky. */
  --rim: drop-shadow(0 0 0 transparent);
  --menubar: 36px;
  /* The room the dock takes along the bottom: windows keep clear of it. */
  --dock: 104px;
}

:root[data-theme="night"] {
  --text: #f3ecd9;
  --muted: #a99fc4;
  --line: #3ce6f0;
  --win: #171232;
  --win-2: #241b4a;
  --bar: #100c26;
  --shadow: #ff6ec8;
  --accent: #ff6ec8;
  --sky: linear-gradient(to bottom, #080618 0%, #1a1040 45%, #5a1a6e 76%, #ff4f9e 100%);
  --dither: rgba(60, 230, 240, .05);
  --sun: linear-gradient(to bottom, #ffe14a 0%, #ff6ec8 55%, #a23cff 100%);
  --sea: #150f3a;
  --sea-line: rgba(255, 110, 200, .5);
  --rim: drop-shadow(2px 0 0 var(--line)) drop-shadow(-2px 0 0 var(--line)) drop-shadow(0 2px 0 var(--line)) drop-shadow(0 -2px 0 var(--line));
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  overflow: hidden;
  color: var(--text);
  background: #ffb7c9;
  font: 13px/1.5 var(--sans);
}

:root[data-theme="night"] body { background: #0d0a24; }

button { font: inherit; color: inherit; }

img { max-width: 100%; }

.icons img, .mark img, .disk, .homepage .page img { image-rendering: pixelated; }

/* ------------------------------------------------------------ the menu bar */

.menubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5000;
  height: var(--menubar);
  display: flex;
  align-items: stretch;
  padding: 0 8px;
  background: var(--bar);
  border-bottom: 2px solid var(--line);
  font: 16px/1 var(--pixel);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  user-select: none;
}

.menu-group { position: relative; display: flex; }

.menu-button {
  padding: 0 12px;
  border: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  cursor: default;
}

.menu-button.mark { padding: 0 10px; }
.menu-button.mark img { display: block; width: 24px; height: 24px; }
:root[data-theme="night"] .mark img { filter: invert(1) sepia(1) saturate(6) hue-rotate(285deg); }

.menu-button:hover, .menu-group.open .menu-button { background: var(--text); color: var(--bar); }
.menu-button.mark:hover img, .menu-group.open .mark img { filter: invert(1); }

.menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  white-space: nowrap;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--win);
  border: 2px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow);
}

.menu button {
  display: block;
  width: 100%;
  padding: 7px 14px 7px 28px;
  border: 0;
  background: none;
  font: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
}

.menu button:hover, .menu button:focus-visible { background: var(--text); color: var(--win); outline: 0; }
.menu .rule { margin-top: 4px; padding-top: 4px; border-top: 2px dotted var(--line); }
.menu button:disabled, .menu button:disabled:hover { background: none; color: var(--muted); }
/* The menu a right click on the desktop brings up: where the pointer is, over everything. */
.menu.context { position: fixed; top: 0; left: 0; z-index: 4200; min-width: 236px; font: 16px/1 var(--pixel); text-transform: uppercase; -webkit-font-smoothing: none; }
.menu button.checked::before { content: "*"; position: absolute; margin-left: -18px; }

.menubar-space { flex: 1; }
.weather, .clock { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; }
.weather { color: var(--accent); }

/* ------------------------------------------------------------ the desktop */

.desktop {
  position: relative;
  height: calc(100% - var(--menubar));
  margin-top: var(--menubar);
  overflow: hidden;
  background: var(--sky);
}

.desktop::before {
  /* A classic two-by-two desktop pattern over the sky. */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(var(--dither) 0 25%, transparent 0 50%) 0 0 / 4px 4px;
  pointer-events: none;
}

.scenery { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* The wallpaper is the sky and nothing else (Matt, 15 Nov: "Just the pink gradient. No sun
   and no water"). By night it has stars. A second wallpaper, chosen in Settings, has the sun
   going down into the sea. */
.sun, .sea { display: none; }
:root[data-wallpaper="sunset"] .sun, :root[data-wallpaper="sunset"] .sea { display: block; }

.sea {
  position: absolute;
  inset: auto 0 0 0;
  height: 23%;
  background:
    repeating-linear-gradient(to bottom, transparent 0 14px, var(--sea-line) 14px 16px),
    var(--sea);
  border-top: 2px solid var(--line);
}

.sun {
  position: absolute;
  right: 12%;
  bottom: calc(23% - 150px);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: var(--sun);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 34%, transparent 34% 36%, #000 36% 43%, transparent 43% 46%, #000 46% 52%, transparent 52% 56%, #000 56% 61%, transparent 61% 100%);
  mask-image: linear-gradient(to bottom, #000 0 34%, transparent 34% 36%, #000 36% 43%, transparent 43% 46%, #000 46% 52%, transparent 52% 56%, #000 56% 61%, transparent 61% 100%);
}

.stars { position: absolute; inset: 0; opacity: 0; }

:root[data-theme="night"] .stars {
  opacity: 1;
  background:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px) 0 0 / 190px 170px,
    radial-gradient(circle, #ffd9f1 0 1px, transparent 1.5px) 70px 90px / 230px 210px,
    radial-gradient(circle, #bff6fa 0 1px, transparent 1.5px) 130px 30px / 310px 260px;
}

/* ------------------------------------------------------------ starting up */
/* Over everything while the page begins: the sun in a box, and a bar that fills. */

.startup { display: none; }
.booting .startup { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; background: var(--sky); }
.booting .startup.done { opacity: 0; pointer-events: none; transition: opacity .3s; }
.startup-box { display: grid; justify-items: center; gap: 20px; width: min(380px, calc(100vw - 40px)); padding: 36px 32px 30px; background: var(--win); border: 2px solid var(--line); box-shadow: 6px 6px 0 var(--shadow); }
.startup-sun { width: 128px; height: 128px; image-rendering: pixelated; }
:root[data-theme="night"] .startup-sun { filter: invert(1) sepia(1) saturate(6) hue-rotate(285deg); }
.startup-name { margin: 0; font: 24px/1 var(--pixel); text-transform: uppercase; -webkit-font-smoothing: none; }
.startup-bar { width: 100%; height: 18px; padding: 2px; border: 2px solid var(--line); }
/* (app.js fills the bar, a step at a time.) */
.startup-bar span { display: block; width: 0; height: 100%; background: repeating-linear-gradient(to right, var(--pink) 0 12px, transparent 12px 14px); }

/* ------------------------------------------------------------ the screen saver */
/* Over everything, black, and drawn on by app.js. */
.saver { position: fixed; inset: 0; z-index: 5500; width: 100vw; height: 100vh; background: #000; cursor: none; image-rendering: pixelated; }
.saver[hidden] { display: none; }

/* ------------------------------------------------------------ icons on the desktop */

.icons {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 98px);
  grid-auto-columns: 124px;
  align-content: start;
}

.icons button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 98px;
  padding: 4px 0 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.icons img { width: 64px; height: 64px; filter: var(--rim); }

.icons span {
  padding: 2px 5px 1px;
  background: var(--win);
  font: 16px/1 var(--pixel);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  white-space: nowrap;
}

/* An icon can be dragged about (app.js moves it with a transform from its own place). */
.icons button { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; }
.icons button.dragging { z-index: 1; opacity: .75; cursor: grabbing; }
.icons button:hover span, .icons button:focus-visible span { background: var(--text); color: var(--win); }
.icons button:focus-visible { outline: 0; }
.icons button:active img { filter: brightness(.6) var(--rim); }

/* ------------------------------------------------------------ the dock */
/* Along the bottom in the middle, over the windows: what there is to run. Its name shows
   over an icon the pointer is on, and a mark under one whose window is open. */

.dock {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 3900;
  display: flex;
  gap: 6px;
  padding: 8px 10px 6px;
  background: var(--win);
  border: 2px solid var(--line);
  box-shadow: 6px 6px 0 var(--shadow);
  transform: translateX(-50%);
}

.dock button { position: relative; display: grid; justify-items: center; gap: 4px; width: 76px; padding: 0; border: 0; background: none; cursor: pointer; }
.dock img { width: 64px; height: 64px; image-rendering: pixelated; filter: var(--rim); }
.dock button:hover img, .dock button:focus-visible img { transform: translateY(-4px); }
.dock button:active img { filter: brightness(.6) var(--rim); }
.dock button:focus-visible { outline: 0; }
.dock button::after { content: ""; width: 6px; height: 6px; }
.dock button.running::after { background: var(--line); }
.dock span {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  padding: 3px 6px 2px;
  background: var(--text);
  color: var(--win);
  font: 16px/1 var(--pixel);
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-font-smoothing: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
.dock button:hover span, .dock button:focus-visible span { opacity: 1; }

/* ------------------------------------------------------------ windows */

.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: var(--w, 420px);
  max-width: calc(100vw - 24px);
  background: var(--win);
  border: 2px solid var(--line);
  box-shadow: 6px 6px 0 var(--shadow);
}

.window[hidden] { display: none; }

/* What controls inside a window are made of (bevel buttons, scroll bars): the window's own colours. */
.window {
  --face: var(--win);
  --hi: #ffffff;
  --lo: #b9ab97;
  --edge: #e9dfc8;
  --pline: var(--line);
  --ridge: var(--line);
  --bar-a: #e3d8c0;
  --bar-b: #f6eedb;
  --groove: #b9ab97;
  --screen: #14102b;
  --charcoal: "Charcoal", "Chicago", "Krungthep", var(--sans);
}

:root[data-theme="night"] .window { --hi: #43377a; --lo: #07050f; --edge: #1f1845; --bar-a: #0d0a24; --bar-b: #2a2056; --groove: #3a2f6e; }

.titlebar {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-bottom: 2px solid var(--line);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.titlebar::before {
  /* The pinstripes of an old title bar. */
  content: "";
  position: absolute;
  inset: 6px 8px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 2px, transparent 2px 4px);
  opacity: .85;
}

.window.dragging .titlebar { cursor: grabbing; }

.titlebar h2 {
  position: relative;
  margin: 0;
  padding: 2px 10px 0;
  background: var(--win);
  font: 16px/1 var(--pixel);
  font-weight: normal;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  white-space: nowrap;
  max-width: calc(100% - 90px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.close {
  position: absolute;
  left: 14px;
  top: 5px;
  z-index: 1;
  width: 18px;
  height: 18px;
  padding: 0;
  background: var(--win);
  border: 2px solid var(--line);
  box-shadow: 0 0 0 3px var(--win);
  cursor: pointer;
}

.close:hover { background: var(--pink); }
.close:active { background: var(--text); }

.content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - var(--menubar) - 96px - var(--dock));
  padding: 16px;
  overflow: auto;
}

/* A row of buttons at the foot of a window. The space above it, and the four pixels to
   its right and under it, are room for the ring round the button Return would press, so
   that the ring's edge and not the button's lines up with what is above. */
.content .buttons { display: flex; align-items: center; gap: 16px; justify-content: flex-end; margin: 20px 4px 4px 0; }

.push {
  padding: 7px 18px 5px;
  background: var(--win);
  border: 2px solid var(--line);
  border-radius: 8px;
  font: 16px/1 var(--pixel);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  cursor: pointer;
}

.push:hover:not(:disabled) { background: var(--yellow); color: var(--violet); }
.push:active:not(:disabled) { background: var(--text); color: var(--win); }
.push:disabled { opacity: .4; cursor: default; }

.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------------------ finishing touches */

::selection { background: var(--pink); color: #2b2140; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Nothing is shown until the windows have been put in their places. */
.desktop:not(.ready) .window { visibility: hidden; }

/* Only the window in front has the stripes in its title bar. */
.window:not(.front) .titlebar::before { opacity: 0; }
.window:not(.front) .titlebar h2 { color: var(--muted); }

/* An icon whose window is open is greyed, as in the Finder. */
.icons button.opened img { filter: grayscale(1) var(--rim); opacity: .5; }

/* The outline that runs between an icon and its window. */
.zoom { position: fixed; z-index: 4000; box-sizing: border-box; border: 2px solid var(--line); pointer-events: none; transition: left .2s ease-out, top .2s ease-out, width .2s ease-out, height .2s ease-out; }

/* ------------------------------------------------------------ the brochure */

.brochure { font-family: var(--serif); }

.masthead {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 4px double var(--line);
  font: 16px/1 var(--pixel);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}

.hero { display: block; width: 100%; height: auto; border: 2px solid var(--line); }

.headline {
  margin: 18px 0 6px;
  color: var(--accent);
  font: 42px/1 var(--script);
  font-weight: normal;
  text-align: center;
  text-shadow: 2px 2px 0 var(--yellow);
  transform: rotate(-2deg);
}

:root[data-theme="night"] .headline { text-shadow: 0 0 14px rgba(255, 110, 200, .7); }

.lede { margin: 14px 4px 18px; font-size: 16px; line-height: 1.5; text-align: center; }

.districts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.district { padding-top: 10px; border-top: 8px solid var(--line); }
.district.paradise { border-color: var(--pink); }
.district.streets { border-color: var(--orange); }
.district.industry { border-color: var(--cyan); }

.district h4, .rule-heading {
  margin: 0 0 8px;
  font: 16px/1 var(--pixel);
  font-weight: normal;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}

.district img { display: block; width: 100%; height: auto; margin-bottom: 10px; border: 2px solid var(--line); }
.district p { margin: 0; font-size: 13.5px; line-height: 1.5; }

.rule-heading { margin: 22px 0 10px; padding-top: 12px; border-top: 4px double var(--line); }

.facts { display: grid; grid-template-columns: 124px 1fr; gap: 8px 12px; margin: 0; }
.facts dt { padding-top: 3px; font: 500 10.5px/1.3 "Jost", "Futura", "Avenir Next", var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.facts dd { margin: 0; font-size: 14px; }

.smallprint { margin: 20px 0 2px; color: var(--muted); font-size: 11.5px; font-style: italic; }

/* ------------------------------------------------------------ controls, in the Mac OS 9 manner */
/* What goes inside a window: bevel buttons, sliders, scroll bars. Mac OS 9 in shape, and
   in the colours of the window they are in (see the variables on `.window`). */

/* Any window rolls up into its title bar on a double click there. */
.window.rolled .content, .window.rolled .status { display: none; }
/* (Rolled up, a window is as tall as its title bar.) */
.window.rolled { height: auto !important; }

/* Scroll bars. */
.window ::-webkit-scrollbar { width: 16px; height: 16px; }
.window ::-webkit-scrollbar-track { background: repeating-conic-gradient(var(--bar-a) 0 25%, var(--bar-b) 0 50%) 0 0 / 2px 2px; border-left: 1px solid var(--pline); }
.window ::-webkit-scrollbar-thumb {
  background: repeating-linear-gradient(to bottom, var(--hi) 0 1px, var(--ridge) 1px 2px) center / 8px 8px no-repeat, var(--face);
  border: 1px solid var(--pline);
  border-right: 0;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}
.window ::-webkit-scrollbar-track:horizontal { border-left: 0; border-top: 1px solid var(--pline); }
.window ::-webkit-scrollbar-thumb:horizontal {
  background: repeating-linear-gradient(to right, var(--hi) 0 1px, var(--ridge) 1px 2px) center / 8px 8px no-repeat, var(--face);
  border: 1px solid var(--pline);
  border-bottom: 0;
}
.window ::-webkit-scrollbar-corner { background: var(--face); border-left: 1px solid var(--pline); border-top: 1px solid var(--pline); }
.window ::-webkit-scrollbar-button { display: none; }
.window ::-webkit-scrollbar-button:vertical:start:decrement, .window ::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
  height: 16px;
  background-color: var(--face);
  background-repeat: no-repeat;
  background-position: center;
  border-left: 1px solid var(--pline);
  box-shadow: inset 2px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
}
.window ::-webkit-scrollbar-button:vertical:start:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M8 5l4 5H4z' fill='%232b2140'/></svg>"); border-bottom: 1px solid var(--pline); }
.window ::-webkit-scrollbar-button:vertical:end:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M8 11l4-5H4z' fill='%232b2140'/></svg>"); border-top: 1px solid var(--pline); }
:root[data-theme="night"] .window ::-webkit-scrollbar-button:vertical:start:decrement { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M8 5l4 5H4z' fill='%233ce6f0'/></svg>"); }
:root[data-theme="night"] .window ::-webkit-scrollbar-button:vertical:end:increment { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><path d='M8 11l4-5H4z' fill='%233ce6f0'/></svg>"); }

/* The button that Return would press has a ring round it. */
.push.default { outline: 2px solid var(--line); outline-offset: 2px; }


/* A bevel button. Held down, or switched on, it is filled. */
.bevel {
  display: grid;
  place-items: center;
  width: 38px;
  height: 30px;
  padding: 0;
  background: var(--face);
  color: var(--pline);
  border: 1px solid var(--pline);
  border-radius: 5px;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo), inset -2px -2px 0 var(--edge);
  cursor: pointer;
}

.bevel.big { width: 50px; height: 36px; }
.bevel.word { width: auto; padding: 0 11px; font: bold 11px/1 var(--charcoal); }
.bevel svg { width: 15px; height: 15px; fill: currentColor; }
.bevel.big svg { width: 18px; height: 18px; }
.bevel:active:not(:disabled), .bevel[aria-pressed="true"] { background: var(--pline); color: var(--face); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .5); }
.bevel:disabled { color: var(--muted); border-color: var(--muted); opacity: .55; cursor: default; }

/* A slider: a groove that fills with pink, and a thumb. */
.slider {
  height: 16px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.slider::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--pink) var(--fill, 0%), var(--groove) var(--fill, 0%)); border: 1px solid var(--pline); border-radius: 3px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 16px; margin-top: -6px; background: var(--face); border: 1px solid var(--pline); border-radius: 2px 2px 6px 6px; box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.slider::-moz-range-track { height: 6px; background: var(--groove); border: 1px solid var(--pline); border-radius: 3px; }
.slider::-moz-range-progress { height: 6px; background: var(--pink); border-radius: 3px; }
.slider::-moz-range-thumb { width: 10px; height: 14px; background: var(--face); border: 1px solid var(--pline); border-radius: 2px 2px 6px 6px; }

/* ------------------------------------------------------------ Music */

.content.amp { display: flex; flex-direction: column; padding: 12px; overflow: visible; }

/* The display is the game's HUD: dark, the pixel font, a bar of orange down the side. */
.amp-display {
  display: grid;
  grid-template-columns: 182px 1fr;
  gap: 16px;
  padding: 10px 12px 10px 16px;
  background: var(--screen);
  color: #f3ecd9;
  border: 1px solid var(--pline);
  border-radius: 4px;
  box-shadow: inset 4px 0 0 var(--orange);
  font: 16px/1 var(--pixel);
  text-transform: uppercase;
  -webkit-font-smoothing: none;
}

.amp-clock { display: flex; align-items: flex-end; justify-content: space-between; }
.amp-state { padding-bottom: 2px; color: #8f86b3; }
.playing .amp-state { color: var(--cyan); }
.amp-time { color: var(--yellow); font-size: 32px; }
.amp-bars { display: block; width: 182px; height: 30px; margin-top: 10px; image-rendering: pixelated; }

.amp-right { display: grid; align-content: center; gap: 14px; min-width: 0; }
.amp-count { color: #8f86b3; }
.amp-song { overflow: hidden; white-space: nowrap; }
.amp-song span { display: inline-block; }
.amp-song span { white-space: pre; }
.amp-song.scrolls span { animation: scroll-half var(--scroll, 12s) linear infinite; }
@keyframes scroll-half { to { transform: translateX(-50%); } }

.amp-seek { display: block; width: 100%; margin: 9px 0 8px; }

.amp-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
/* (Its words are in the game's own letters, like the title bar over them.) */
.amp-controls .word { margin-left: 8px; height: 28px; padding: 2px 9px 0; font: 16px/1 var(--pixel); text-transform: uppercase; -webkit-font-smoothing: none; }
.i-pause, .playing .i-play { display: none; }
.playing .i-pause { display: block; }

.amp-volume { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.amp-volume svg { flex: none; width: 15px; height: 15px; fill: var(--pline); color: var(--pline); }
.amp-volume input { width: 84px; }

/* The playlist. */
.amp-list {
  /* (Room for sixteen songs, where the screen is tall enough: the window stays clear of the dock.) */
  max-height: min(362px, calc(100vh - var(--menubar) - var(--dock) - 330px));
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow: auto;
  background: var(--screen);
  border: 1px solid var(--pline);
  border-radius: 4px;
}

.amp-list button {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 4px 14px;
  width: 100%;
  height: 22px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: #cfc6e6;
  font: 16px/22px var(--pixel);
  text-align: left;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  cursor: pointer;
}

.amp-list .name { overflow: hidden; white-space: nowrap; text-overflow: clip; }
.amp-list button:hover { background: #2a2056; }
.amp-list .on button { color: var(--yellow); }
.playing .amp-list .on button { background: #2a2056; }


@media (max-width: 820px) {
  .amp-display { grid-template-columns: 1fr; gap: 12px; }
  .amp-volume { margin-left: 0; }
}

/* ------------------------------------------------------------ photos and videos */

.photo { margin: 0; background: #14102b; border: 2px solid var(--line); }
.photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Under the picture: buttons, what it is, and which of how many. */
.viewer-bar { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.viewer-caption { flex: 1; display: grid; gap: 4px; min-width: 0; margin-left: 8px; }
.viewer-caption strong { font: 16px/1 var(--pixel); font-weight: normal; text-transform: uppercase; -webkit-font-smoothing: none; }
.viewer-caption span { font-size: 12px; line-height: 1.35; }
.viewer-count { align-self: flex-start; color: var(--muted); font: 16px/1 var(--pixel); white-space: nowrap; -webkit-font-smoothing: none; }

/* The rest of them, small. */
.strip { display: flex; gap: 6px; margin-top: 12px; }
.strip button { flex: 1; min-width: 0; padding: 0; background: none; border: 2px solid var(--line); cursor: pointer; }
.strip img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.strip button.on { outline: 3px solid var(--pink); }
.videos .strip img { aspect-ratio: 16 / 9; }

/* A television: the picture through its scan lines, and a video recorder's words over it. */
.tv { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 2px solid var(--line); }
.tv img, .tv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv video[hidden], .tv-note[hidden] { display: none; }

.tv-lines {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, .24) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .38) 100%);
  pointer-events: none;
}

.tv-osd, .tv-note { color: #fff; font: 24px/1 var(--pixel); text-shadow: 2px 2px 0 #000; -webkit-font-smoothing: none; pointer-events: none; }
/* (Along the bottom, in the middle: clear of the game's own HUD in the corners.) */
.tv-osd { position: absolute; inset: auto 0 16px; display: flex; justify-content: center; gap: 28px; }
.tv-note { position: absolute; top: 50%; right: 0; left: 0; text-align: center; transform: translateY(-50%); animation: tape-blink .9s steps(2) infinite; }
@keyframes tape-blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------ the map: a paper map in either light */
/* A page of the game's street atlas, printed on a canvas (see app.js), in a pane that
   scrolls and can be dragged about. */

.map-pane { height: min(614px, calc(100vh - 250px - var(--dock))); overflow: auto; background: #f2ead6; border: 2px solid var(--line); cursor: grab; touch-action: none; }
.map-pane.dragging { cursor: grabbing; }
.map-pane canvas { display: block; image-rendering: pixelated; }

.map-tools { display: flex; align-items: stretch; gap: 6px; margin-top: 12px; }
.map-tools .bevel { flex: none; height: auto; min-height: 58px; }

.map-info { flex: 1; display: grid; align-content: center; gap: 4px; margin-left: 6px; padding: 8px 12px; background: var(--win-2); border: 2px solid var(--line); }
.map-info strong { font: 16px/1 var(--pixel); font-weight: normal; text-transform: uppercase; -webkit-font-smoothing: none; }

/* ------------------------------------------------------------ read me and the demo */

.readme h3 { margin: 0 0 10px; font: 24px/1 var(--pixel); font-weight: normal; text-transform: uppercase; -webkit-font-smoothing: none; }
.readme p { margin: 0 0 10px; }
.readme ul { margin: 0 0 12px; padding-left: 18px; }
.readme li { margin-bottom: 6px; }
.readme li::marker { color: var(--accent); }

.demo { display: flex; gap: 16px; align-items: flex-start; }
.demo .disk { flex: none; }
.demo p { margin: 0 0 8px; }
.progress { height: 16px; margin-top: 12px; border: 2px solid var(--line); background: repeating-linear-gradient(45deg, var(--win-2) 0 6px, transparent 6px 12px); }
.progress span { display: block; width: 0; height: 100%; background: var(--pink); }

/* ------------------------------------------------------------ contact */
/* A letter: who it is to, what it is about, and the letter itself. */
.content.contact { display: flex; flex-direction: column; }
.letter { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.letter > span, .letter > label { color: var(--muted); }
.letter .to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.letter .bevel.word { height: 22px; margin-left: auto; padding: 0 9px; }
.contact input, .contact textarea { width: 100%; padding: 5px 7px; background: #fff; color: #000; border: 1px solid var(--pline); border-radius: 0; box-shadow: inset 1px 1px 0 var(--lo); font: 13px/1.45 var(--sans); }
.contact textarea { flex: 1 1 auto; min-height: 120px; resize: none; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 0; }
.contact .hint { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; }
.contact .also { margin: 12px 0 0; padding-top: 10px; border-top: 2px dotted var(--line); }
.contact a:not(.push), .readme a { color: var(--accent); }
/* (A button that is a link.) */
a.push { display: inline-block; color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------ Getaway */
/* A game's screen, in a window: black round it, and its dots kept square. */
.content.getaway { display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; background: #000; }
.getaway canvas { display: block; width: 320px; height: 460px; image-rendering: pixelated; cursor: pointer; touch-action: none; }
/* (In a window that has been sized it is as big as will fit, in whole dots where it can be.) */
.window.sized .getaway canvas { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------------------------ the press kit */

.press h3 { margin: 0 0 10px; font: 24px/1 var(--pixel); font-weight: normal; text-transform: uppercase; -webkit-font-smoothing: none; }
.press h4 { margin: 18px 0 8px; padding-top: 12px; border-top: 2px dotted var(--line); font: 16px/1 var(--pixel); font-weight: normal; text-transform: uppercase; -webkit-font-smoothing: none; }
.press p { margin: 0 0 10px; }
.press ul { margin: 0; padding-left: 18px; }
.press li { margin-bottom: 6px; }
.press li::marker { color: var(--accent); }
.press a { color: var(--accent); }
.press .hint { margin: 0; color: var(--muted); font-size: 11.5px; }
.sheet { display: grid; grid-template-columns: 96px 1fr; gap: 5px 12px; margin: 0; }
.sheet dt { color: var(--muted); }
.sheet dd { margin: 0; }
/* Things to take away: a row each, as in a folder. */
.press .downloads { padding: 0; list-style: none; }
.press .downloads li { margin: 0; }
.downloads a { display: flex; align-items: center; gap: 10px; padding: 4px 6px; color: inherit; text-decoration: none; }
.downloads a:hover, .downloads a:focus-visible { background: var(--win-2); outline: 0; }
.downloads span { flex: 1; min-width: 0; text-decoration: underline; }

/* ------------------------------------------------------------ settings */

.content.settings { padding: 12px 16px 16px; }
.settings h3 { margin: 16px 0 8px; font: 16px/1 var(--pixel); font-weight: normal; text-transform: uppercase; -webkit-font-smoothing: none; }
.settings .hint { margin: 8px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.settings .slider { width: 100%; }

/* Buttons in a row of which one is on: the panes across the top, and a choice of a few. */
.segments { display: flex; flex-wrap: wrap; gap: 4px; }
.segments .bevel.word { height: 26px; padding: 2px 10px 0; font: 16px/1 var(--pixel); text-transform: uppercase; -webkit-font-smoothing: none; }
.segments.tabs { margin: 0 -4px 4px; padding: 0 4px 12px; border-bottom: 2px solid var(--line); }
.pane[hidden] { display: none; }

/* A box to tick, as Mac OS 9 drew one. */
.check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check i { flex: none; width: 16px; height: 16px; background: var(--face); border: 2px solid var(--pline); box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.check input:checked + i { background: linear-gradient(45deg, transparent 43%, var(--pline) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--pline) 43% 57%, transparent 57%), var(--face); }
.check input:focus-visible + i { outline: 2px solid var(--pink); outline-offset: 2px; }

/* The wallpapers to choose from: each a small view of itself, in the present light. */
.papers { display: flex; gap: 14px; }
.papers button { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; }
.papers span { padding: 2px 5px 1px; font: 16px/1 var(--pixel); text-transform: uppercase; -webkit-font-smoothing: none; }
.papers button[aria-pressed="true"] span { background: var(--text); color: var(--win); }
.paper { position: relative; display: block; width: 132px; height: 82px; overflow: hidden; background: var(--sky); border: 2px solid var(--line); }
.papers button[aria-pressed="true"] .paper { outline: 3px solid var(--pink); }
.paper.sunset b { position: absolute; right: 16%; bottom: 3%; width: 46px; height: 46px; border-radius: 50%; background: var(--sun); }
.paper.sunset u { position: absolute; inset: auto 0 0 0; height: 23%; background: repeating-linear-gradient(to bottom, transparent 0 3px, var(--sea-line) 3px 4px), var(--sea); border-top: 2px solid var(--line); }

/* The screen saver, small. */
.saver-small { display: block; width: 280px; height: 158px; margin: 4px auto 0; background: #000; border: 2px solid var(--line); image-rendering: pixelated; }

/* ------------------------------------------------------------ the foot of a window, and sizing it */
/* Along the foot of a window: a line of what it has to say, and in the corner the box that
   drags the window bigger and smaller. */

.status {
  position: relative;
  flex: none;
  height: 22px;
  padding: 0 30px 0 10px;
  overflow: hidden;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.grow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 22px;
  border-left: 2px solid var(--line);
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--ridge) 2px 3px, var(--hi) 3px 4px) center / 10px 10px no-repeat;
  cursor: nwse-resize;
  touch-action: none;
}

.grow:hover { background-color: var(--win-2); }
.window.sizing { user-select: none; }

/* A window that has been given a size: what is in it takes the room there is. */
.window.sized .content { max-height: none; }
.window.sized .content.photos, .window.sized .content.videos, .window.sized .content.map { display: flex; flex-direction: column; }
.window.sized .viewer-bar, .window.sized .strip, .window.sized .map-tools { flex: none; }
.window.sized .photo { position: relative; flex: 1 1 0; min-height: 60px; }
.window.sized .photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.window.sized .tv { flex: 1 1 0; min-height: 60px; aspect-ratio: auto; }
.window.sized .tv img, .window.sized .tv video { object-fit: contain; }
.window.sized .strip button { max-width: 96px; }
.window.sized .map-pane { flex: 1 1 0; height: auto; min-height: 60px; }
.window.sized .amp-list { flex: 1 1 0; min-height: 0; max-height: none; }

/* ------------------------------------------------------------ the Trash, and alerts */

.icons.corner { top: 14px; right: 12px; bottom: auto; left: auto; display: block; }
.icons.corner button { width: 124px; }

.content.trash { padding: 10px; }
.files { margin: 0; padding: 0; list-style: none; }
.files button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 6px; border: 0; background: none; text-align: left; cursor: pointer; }
.files button:hover, .files button:focus-visible { background: var(--win-2); outline: 0; }
.files img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.files span { flex: 1; min-width: 0; }
.files small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.trash-none { margin: 34px 0; color: var(--muted); text-align: center; }

/* An alert sits in the middle, over everything, and nothing else answers until it has been. */
.shade { position: fixed; inset: 0; z-index: 4500; }
.shade[hidden] { display: none; }
.window.alert { position: fixed; top: 22%; left: 50%; z-index: 4600; width: min(430px, calc(100vw - 24px)); transform: translateX(-50%); }
.alert .titlebar { cursor: default; }
.alert .titlebar::before { opacity: .85; }
.caution { flex: none; width: 48px; height: 44px; }

/* ------------------------------------------------------------ the browser */
/* A row of buttons, where the page is, and the page (whose own looks are in web.css). */

.content.browser { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.browser-bar { flex: none; display: flex; align-items: center; gap: 5px; padding: 9px 10px 0; }
.browser-bar .bevel.word, .location .bevel.word { height: 24px; padding: 0 9px; }

/* The globe turns while a page is on its way. */
.throb { width: 26px; height: 26px; margin-left: auto; background: url("assets/icons/throb.png") 0 0 / 96px 24px no-repeat, var(--screen); border: 1px solid var(--pline); image-rendering: pixelated; }
.loading .throb { animation: throb .6s steps(4) infinite; }
@keyframes throb { to { background-position: -96px 0; } }

.location { flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px 9px; border-bottom: 2px solid var(--line); font-size: 11px; line-height: 1; }
.address { flex: 1; min-width: 0; height: 24px; padding: 0 6px; background: #fff; color: #000; border: 1px solid var(--pline); border-radius: 0; box-shadow: inset 1px 1px 0 var(--lo); font: 12px/1 var(--sans); }
.address:focus-visible { outline: 2px solid var(--pink); outline-offset: 0; }

@media (prefers-reduced-motion: reduce) {
  .loading .throb { animation: none; }
}

/* ------------------------------------------------------------ small screens: one column of windows */

@media (max-width: 820px) {
  body { overflow: auto; }
  .weather { display: none; }
  .desktop { height: auto; min-height: calc(100% - var(--menubar)); padding: 12px 12px 40px; overflow: visible; }
  .scenery { position: fixed; top: var(--menubar); }
  .icons { position: static; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); grid-template-rows: none; margin-bottom: 14px; }
  .window { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-width: none; margin: 0 6px 22px 0; scroll-margin-top: calc(var(--menubar) + 12px); }
  .titlebar { cursor: default; touch-action: auto; }
  .window:not(.front) .titlebar::before { opacity: .85; }
  .window:not(.front) .titlebar h2 { color: var(--text); }
  .content { max-height: none; }
  .districts { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 10px; }
  .headline { font-size: 34px; }
  .tv-osd, .tv-note { font-size: 16px; }
  .map-pane { height: 380px; }
  .grow { display: none; }
  .icons button { transform: none !important; touch-action: auto; }
  .status { padding-right: 10px; }
  .icons.corner { position: static; display: flex; justify-content: flex-end; margin: 0; }
  .dock { position: static; justify-content: center; margin: 0 6px 18px 0; transform: none; }
  .window.alert { position: fixed; top: 22% !important; left: 50% !important; width: min(430px, calc(100vw - 24px)) !important; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-note { animation: none; }
  .marquee span { animation: none; }
  .amp-song.scrolls span { animation: none; padding-left: 0; }
}