:root {
  --accent: #05ff9b; /* the selected app */
  --on-accent: #003d24;
  --menu-select: #0a7aff; /* the menu's own highlight, the Mac's standard blue */
  --page: #fff;
  --page-text: rgba(0, 0, 0, 0.85);
  --page-dim: #a1a1a6;
  --menu: rgba(246, 246, 246, 0.82); /* macOS light mode */
  --menu-text: rgba(0, 0, 0, 0.85);
  --menu-dim: rgba(0, 0, 0, 0.25); /* macOS's tertiary label */
  --menu-rule: rgba(0, 0, 0, 0.1);
  /* the Mac's own font, San Francisco, named first as Apple does, so every browser on a Mac uses it */
  --menu-solid: rgba(246, 246, 246, 0.96); /* the boxes beside the menu, almost opaque, so what is behind does not show through text */
  --menu-edge: rgba(0, 0, 0, 0.18);
  --menu-sheen: rgba(255, 255, 255, 0.6);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", sans-serif;
}

/* black: the page and the menu as macOS dark mode draws them (html.dark, in index.html) */
html.dark {
  --page: #000;
  --page-text: rgba(255, 255, 255, 0.85);
  --page-dim: rgba(255, 255, 255, 0.35);
  --menu: rgba(40, 40, 40, 0.82);
  --menu-text: rgba(255, 255, 255, 0.85);
  --menu-dim: rgba(255, 255, 255, 0.3);
  --menu-rule: rgba(255, 255, 255, 0.12);
  --menu-solid: rgba(40, 40, 40, 0.96);
  --menu-edge: rgba(0, 0, 0, 0.6);
  --menu-sheen: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--page-text); overflow: hidden; font: 13px/1.3 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* --- the page is the installer: it fills its window, whatever size (the icons grow with it) --- */
.drop-area {
  position: relative;
  height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
}
.app, .folder {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: clamp(110px, 22vw, 260px);
  font-size: 12px; /* Finder's icon labels */
  color: var(--page-text);
}
.label { padding: 0 4px; border-radius: 3px; line-height: 16px; } /* as Finder draws an icon's name */

/* the veiled logo: blurred, in a halo of fine rays, each the colour of the part of the logo it comes from */
.logo {
  position: relative;
  display: block;
  width: clamp(80px, min(16vw, 30vh), 220px);
  height: clamp(80px, min(16vw, 30vh), 220px);
  filter: blur(6px) saturate(1.1);
}
.frame { position: relative; }
.rays {
  /* soft tapering rays just past the logo's edge, still, as html.energy's sun: each the colour of its part */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: conic-gradient(#ff594d 0deg, #ff594d 50deg, #ffe34d 70deg, #ffe34d 170deg, #05ff9b 190deg, #05ff9b 290deg, #ff594d 310deg);
  -webkit-mask: repeating-conic-gradient(#000 0deg, rgba(0, 0, 0, 0.12) 5deg, #000 10deg), radial-gradient(closest-side, #000 68%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.12) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: repeating-conic-gradient(#000 0deg, rgba(0, 0, 0, 0.12) 5deg, #000 10deg), radial-gradient(closest-side, #000 68%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.12) 92%, transparent 100%);
  mask-composite: intersect;
  filter: blur(2px);
  opacity: 0.5;
}
.app { cursor: grab; touch-action: none; }
.app .frame { display: block; padding: 8px; border: 1px solid transparent; border-radius: 8px; transition: border-color 0.12s, background 0.12s; }
/* selected: a soft grey square behind the icon, as Finder shows it; its name in the green (#05ff9b) */
.app[aria-expanded="true"] .frame, .app:focus-visible .frame { background: rgba(0, 0, 0, 0.1); }
.app[aria-expanded="true"] .label, .app:focus-visible .label { background: var(--accent); color: var(--on-accent); } /* its name in the green */
.app:focus-visible { outline: none; }
.app.dragging { cursor: grabbing; z-index: 5; }
.app.returning { transition: transform 0.35s cubic-bezier(.2, .8, .2, 1); }
.app.dropped { transition: transform 0.4s ease-in, opacity 0.4s ease-in; opacity: 0; }

.folder svg { width: clamp(96px, min(19vw, 36vh), 260px); height: auto; transition: transform 0.2s; }
.folder .tint { opacity: 0; transition: opacity 0.3s ease; }
.folder.over .tint { opacity: 1; } /* the logo over it: the folder fills with the green */
.app .label { white-space: nowrap; }
.folder { position: relative; }
.folder .icon { position: relative; display: block; }
.folder .icon > svg { display: block; }
.folder .alias { position: absolute; left: -1%; bottom: -3%; width: 14%; height: auto; }

/* the menu, as macOS draws it, beside the logo */
.menu, .menu ul {
  list-style: none;
  margin: 0;
  padding: 5px;
  min-width: 230px;
  background: var(--menu);
  border: 0.5px solid var(--menu-edge);
  border-radius: 6px;
  box-shadow: 0 0 0 0.5px var(--menu-sheen) inset, 0 10px 30px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  color: var(--menu-text);
  font-size: 13px;
  letter-spacing: -0.08px; /* San Francisco at 13 pt, as macOS sets it */
  white-space: nowrap;
}
.menu { position: fixed; z-index: 6; }
/* rows as macOS draws them: 22 px tall, the text 9 px in from the highlight, which is inset 5 px from the menu's edge */
.menu > li > button, .menu .line { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; height: 22px; padding: 0 9px; border-radius: 4px; text-align: left; }
.menu .line { color: var(--menu-dim); cursor: default; }
.menu .chevron { width: 6px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.menu > li > button:hover, .menu > li > button:focus-visible, .menu > li > a:hover, .menu > li > a:focus-visible,
.menu .sub:hover > button, .menu .sub:focus-within > button { background: var(--menu-select); color: #fff; outline: none; }
.menu a.line { text-decoration: none; cursor: pointer; }
.menu .separator { height: 1px; margin: 5px 9px; background: var(--menu-rule); }
.menu .sub { position: relative; }
.menu .sub > .panel {
  display: none;
  position: absolute;
  left: 100%;
  top: -5px;
  margin-left: 4px;
  width: 270px;
  padding: 8px 12px;
  background: var(--menu-solid);
  border: 0.5px solid var(--menu-edge);
  border-radius: 6px;
  box-shadow: 0 0 0 0.5px var(--menu-sheen) inset, 0 10px 30px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  white-space: normal;
  line-height: 1.4;
}
.menu .sub:hover > .panel, .menu .sub:focus-within > .panel { display: block; }
.menu .sub > .panel.flip { left: auto; right: 100%; margin: 0 4px 0 0; }
.panel p { margin: 0; }
.panel .info-get { white-space: nowrap; }
.panel .info-get button { display: inline; width: auto; height: auto; padding: 0; border-radius: 0; color: var(--menu-select); background: none; }
.panel .info-get button:hover { text-decoration: underline; }
.panel .info-first { margin-top: 4px; color: var(--menu-dim); }
.panel.preview { display: none; }
/* the chapters one under the other, each picture with its file name under it, as Finder shows files; small
   enough for all three to fit the window */
.menu .sub > .panel.preview { width: auto; padding: 8px 14px; }
.menu .sub:hover > .panel.preview, .menu .sub:focus-within > .panel.preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.panel.preview figure { margin: 0; display: grid; justify-items: center; gap: 3px; cursor: default; outline: none; }
.panel.preview img { display: block; height: clamp(40px, calc((100vh - 140px) / 3), 110px); width: auto; padding: 4px; border-radius: 6px; box-shadow: none; }
.panel.preview figcaption { padding: 0 5px; border-radius: 3px; font-size: 12px; line-height: 16px; color: var(--menu-text); }
/* a light grey under the pointer; selected, as Finder: a grey square behind the picture, the name in blue */
.panel.preview figure:hover figcaption { background: rgba(0, 0, 0, 0.07); }
.panel.preview figure.selected img { background: rgba(0, 0, 0, 0.1); }
.panel.preview figure.selected figcaption { background: var(--menu-select); color: #fff; }

/* a preview, large: just the picture over the dimmed page */
.quicklook { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 32px; background: rgba(0, 0, 0, 0.3); }
.quicklook[hidden] { display: none; }
.quicklook img {
  display: block;
  max-width: min(1100px, 100%);
  max-height: calc(100vh - 64px);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}


.status {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 7; margin: 0;
  padding: 5px 12px; border-radius: 8px; background: var(--menu); color: var(--menu-text); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font-size: 12px;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.status.shown { opacity: 1; }

@media (max-width: 520px) {
  .menu .sub > .panel { position: static; width: auto; margin: 4px 0; }
}