/*
  FunNotch — site styles.

  Restraint is the brief. This is a page about a small black panel, so: neutral
  greys, hairlines instead of boxes, one accent used sparingly and never as a
  gradient. The product screenshots are transparent PNGs and are the only
  saturated colour on the page — everything else gets out of their way.
*/

:root {
  --bg: #0a0a0b;
  --surface: #111112;
  --surface-2: #141416;
  --rule: #222224;
  --rule-soft: #1a1a1c;

  --text: #ededef;
  --dim: #8b8b93;
  --faint: #5c5c64;

  --accent: #0a84ff;   /* macOS system blue — the app's default accent */
  --good: #57b76a;
  --warn: #b98a2e;

  --r: 10px;
  --maxw: 1080px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* Registered so the corner radius can be interpolated as the notch opens;
   without this the flares would snap between the two sizes. */
@property --tr {
  syntax: "<length>";
  inherits: false;
  initial-value: 5px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
/* `height: auto` matters: the images carry intrinsic width/height attributes,
   and without this they keep their attribute height while the width shrinks. */
img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 11, 0.8);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s linear;
}

header.scrolled { border-bottom-color: var(--rule-soft); }

header .wrap {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 590;
  letter-spacing: -0.015em;
  font-size: 15.5px;
  margin-right: auto;
}

.brand .mark {
  width: 24px;
  height: 13px;
  background: #000;
  border: 1px solid #34343a;
  border-top: none;
  border-radius: 0 0 7px 7px;
  flex: none;
}

nav.links {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  color: var(--dim);
}

nav.links a { transition: color 0.15s linear; }
nav.links a:hover,
nav.links a.current { color: var(--text); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s linear, border-color 0.15s linear, opacity 0.15s linear;
  white-space: nowrap;
}

/* White on near-black. It is what every Mac app site does, because it works. */
.btn-primary { background: #f4f4f6; color: #0a0a0b; }
.btn-primary:hover { background: #fff; }

.btn-ghost {
  border-color: var(--rule);
  color: var(--text);
}
.btn-ghost:hover { border-color: #34343a; background: rgba(255, 255, 255, 0.03); }

.btn-sm { padding: 7px 14px; font-size: 13.5px; }

/* ---------- Hero ---------- */

.hero {
  padding: 104px 0 0;
  border-bottom: 1px solid var(--rule-soft);
}

.hero .wrap { max-width: 900px; }

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--faint);
  margin-bottom: 26px;
}

h1 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 640;
  max-width: 15ch;
}

h1 .quiet { color: var(--faint); }

.lede {
  max-width: 54ch;
  margin: 0 0 34px;
  font-size: clamp(17px, 2vw, 19.5px);
  color: var(--dim);
  line-height: 1.58;
}

.hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-meta {
  font-size: 13px;
  color: var(--faint);
  margin: 0;
}

/* ---------- Interactive notch ---------- */

.stage { margin: 64px auto 0; max-width: 940px; padding: 0 28px; }

.stage-hint {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 12px;
  text-align: center;
  transition: opacity 0.25s linear;
}

.screen {
  position: relative;
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  /* A real desktop. Unsplash licence: free to use, no attribution required.
     The ?v must match the preload in index.html exactly — a mismatch is two
     separate downloads of the same 180 KB photo, not one. */
  background: #06121f url("wallpaper.jpg?v=9") center 18% / cover no-repeat;
  height: 246px;
  overflow: hidden;
}

/*
  The real silhouette, not a rounded rectangle.

  `NotchShape` flares outward at the top: the body is inset by the top radius
  on each side, and each top corner is a *concave* quarter-arc running from the
  outer edge down into the body. The bottom corners are ordinary convex ones.
  The body is the element; the two flares are its pseudo-elements, each a
  radial-gradient whose transparent disc is centred on the corner the arc
  curves around. Radii are the app's own: 6/14 closed, 19/24 open.
*/
.notch {
  --tr: 5px;
  --br: 14px;
  --edge: rgba(255, 255, 255, 0.22);

  position: relative;
  z-index: 2;
  flex: none;
  /* Wide enough for the cutout plus a widget either side, because that is
     what the app does: the panel grows to hold them, it does not put them
     out on the wallpaper. */
  width: 352px;
  height: 32px;
  background: #000;
  border-radius: 0 0 var(--br) var(--br);
  box-shadow: inset 1px 0 0 var(--edge), inset -1px 0 0 var(--edge),
    inset 0 -1px 0 var(--edge);
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    --tr 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.notch::before,
.notch::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--tr);
  height: var(--tr);
  pointer-events: none;
}

/* Top-left: the arc curves around the flare's own bottom-left corner. */
.notch::before {
  left: calc(var(--tr) * -1);
  background: radial-gradient(
    circle at 0 100%,
    transparent calc(var(--tr) - 1px),
    var(--edge) calc(var(--tr) - 1px),
    var(--edge) var(--tr),
    #000 var(--tr)
  );
}

.notch::after {
  right: calc(var(--tr) * -1);
  background: radial-gradient(
    circle at 100% 100%,
    transparent calc(var(--tr) - 1px),
    var(--edge) calc(var(--tr) - 1px),
    var(--edge) var(--tr),
    #000 var(--tr)
  );
}

.notch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.notch.open {
  --tr: 11px;
  --br: 24px;
  width: min(648px, 88%);
  height: 203px;
}

.notch-closed {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  overflow: hidden;
  font-size: 11.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.16s linear;
}

/* Dead space behind the physical camera housing. Nothing is ever drawn here. */
.notch-closed .cutout { flex: 1 1 auto; min-width: 96px; }

.notch-closed .wgt { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.notch-closed .art { margin: 0 9px; }

.notch.open .notch-closed { opacity: 0; pointer-events: none; }

.notch-closed .art {
  width: 17px; height: 17px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, #e0714b, #a53564);
}

.bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }

.bars i {
  width: 2.5px;
  border-radius: 2px;
  background: #e0714b;  /* spectrum set to Match album art */
  animation: bounce 1.1s ease-in-out infinite;
}

.bars i:nth-child(1) { height: 60%; animation-delay: 0s; }
.bars i:nth-child(2) { height: 100%; animation-delay: 0.18s; }
.bars i:nth-child(3) { height: 45%; animation-delay: 0.36s; }
.bars i:nth-child(4) { height: 80%; animation-delay: 0.1s; }

@keyframes bounce {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

.notch-open {
  position: absolute;
  inset: 0;
  padding: 0 20px 16px;
  display: block;
  opacity: 0;
  overflow: hidden;
  border-radius: inherit;
  transition: opacity 0.24s linear 0.08s;
}

.notch.open .notch-open { opacity: 1; }

.notch-open .art-lg {
  width: 82px; height: 82px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, #e0714b, #a53564);
}

.player { flex: 1; min-width: 0; text-align: left; }

.player .title {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player .artist { font-size: 11.5px; color: var(--dim); margin-bottom: 12px; }

.track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.track span { display: block; height: 100%; width: 38%; background: #fff; }

.times {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}

.transport {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin-top: 9px; color: #fff;
}

.transport svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.88; }
.transport svg.big { width: 18px; height: 18px; }

/* ---------- Sections ---------- */

section { padding: 92px 0; border-bottom: 1px solid var(--rule-soft); }
section:last-of-type { border-bottom: none; }

.section-head { max-width: 640px; margin: 0 0 52px; }

/* A small monospaced label over a hairline, rather than a coloured kicker. */
.kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
}

h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 620;
}

.section-head p { margin: 0; color: var(--dim); font-size: 17px; }

/* ---------- Definition ----------

   Plain prose, set wider and quieter than a feature section. It exists to be
   read once and possibly quoted, so it gets no ornament competing with it. */

.definition { padding: 68px 0; }
.definition h2 { font-size: clamp(22px, 2.6vw, 27px); margin-bottom: 18px; }

.definition p {
  max-width: 68ch;
  margin: 0 0 16px;
  color: var(--dim);
  font-size: 16.5px;
  line-height: 1.62;
}

.definition p:last-child { margin-bottom: 0; }

/* ---------- Screenshots ----------

   The PNGs are transparent, so they need no frame — dropping them straight on
   the page background is closer to what the panel looks like in life than any
   border would be. A faint surface behind them keeps them from floating. */

.shots {
  display: grid;
  gap: 26px;
}

.shots figure {
  margin: 0;
  padding: 22px 22px 0;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r);
  overflow: hidden;
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
  /* width/height are on the element, so the box is reserved before the image
     arrives and nothing below it jumps. */
}

.shots figcaption {
  margin: 0;
  padding: 14px 2px 20px;
  color: var(--faint);
  font-size: 13.5px;
  border-top: 1px solid var(--rule-soft);
}

/* ---------- Long-form prose ----------

   For /about and /install, which are text rather than product. Measure is
   capped in ch rather than px so it stays readable if the base size changes. */

.prose { max-width: 68ch; }

.prose h2 {
  font-size: clamp(20px, 2.3vw, 24px);
  margin: 46px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--rule-soft);
}

.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.prose p,
.prose li {
  color: var(--dim);
  font-size: 16.5px;
  line-height: 1.66;
}

.prose p { margin: 0 0 15px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--text); font-style: italic; }

.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 1px 5px;
}

.prose ul { margin: 0 0 15px; padding-left: 20px; }
.prose ul li { margin-bottom: 9px; }
.prose ul li::marker { color: var(--faint); }

/* Numbered steps get more room and a heavier number — they are meant to be
   followed while looking at something else, not read continuously. */
.prose ol.steps {
  margin: 0 0 15px;
  padding-left: 0;
  list-style: none;
  counter-reset: step;
}

.prose ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 40px;
  margin-bottom: 4px;
}

.prose ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

/* ---------- Showcase rows ---------- */

.showcase {
  display: grid;
  gap: 34px;
  align-items: center;
  grid-template-columns: 0.85fr 1.15fr;
  padding: 44px 0;
  border-top: 1px solid var(--rule-soft);
}

.showcase:first-of-type { border-top: none; padding-top: 0; }
.showcase:last-child { padding-bottom: 0; }
.showcase.flip .showcase-text { order: 2; }

.showcase h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.022em;
  font-weight: 600;
}

.showcase p { margin: 0 0 16px; color: var(--dim); font-size: 16px; }

.showcase ul { margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--dim); }

.showcase li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
}

.showcase li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: #3c3c44;
}

/* ---------- Panel contents ---------- */
/*
  Everything below rebuilds a piece of the real app in markup, at roughly the
  proportions it has on screen. They are live rather than screenshots because
  the whole point of the product is that it moves.
*/

.pane { width: 100%; }

.tabs { display: flex; gap: 6px; margin-bottom: 12px; }

.tab {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.42);
  padding: 3px 9px;
  border-radius: 999px;
}

.tab.on { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Focus */
.focus-pane { display: flex; gap: 20px; align-items: center; }

.ring {
  position: relative;
  width: 78px;
  height: 78px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--pct, 62%), rgba(255, 255, 255, 0.1) 0);
  display: grid;
  place-items: center;
}

.ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: #000;
}

.ring b {
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.focus-title { font-size: 14px; font-weight: 600; color: #fff; }
.focus-sub { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
}

.chip.off { text-decoration: line-through; color: rgba(255, 255, 255, 0.34); }

/* Clipboard */
.search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  margin-bottom: 9px;
}

.search .mag {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.4px solid rgba(255, 255, 255, 0.45);
  position: relative; flex: none;
}

.search .mag::after {
  content: ""; position: absolute; right: -4px; bottom: -3px;
  width: 5px; height: 1.4px; background: rgba(255, 255, 255, 0.45);
  transform: rotate(45deg);
}

.search i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, 0.75); }
.search i::after {
  content: ""; display: inline-block; width: 1px; height: 11px;
  background: #fff; margin-left: 1px; vertical-align: -2px;
  animation: caret 1.05s steps(1) infinite;
}

@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.rows { display: flex; flex-direction: column; gap: 1px; }

.row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 8px;
  height: 23px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.row:first-child { background: rgba(255, 255, 255, 0.09); }
.row .pin { color: #d8b24a; font-size: 9px; }
.row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row em { font-style: normal; font-size: 9.5px; color: rgba(255, 255, 255, 0.32); }

/* Closed-notch glyphs */
.glyph { display: grid; place-items: center; width: 17px; height: 17px; color: rgba(255, 255, 255, 0.8); }
.glyph svg { width: 15px; height: 15px; fill: currentColor; }
.countdown {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 600;
}

/* Widgets flank the collapsed notch, and step aside when it opens — the
   "Media and widgets" layout, which is what this Mac is set to. */
.notch-row { display: flex; align-items: flex-start; justify-content: center; }

.side {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 16px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: opacity 0.22s linear, transform 0.28s ease;
}

.side.left { justify-content: flex-end; }
.side.right { justify-content: flex-start; }

.screen.is-open .side { opacity: 0; transform: translateY(-6px); }

.w { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.battery b {
  display: block;
  width: 21px;
  height: 11px;
  border: 1.2px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  position: relative;
}

.battery b::after {
  content: "";
  position: absolute;
  inset: 1.6px;
  background: #fff;
  border-radius: 1px;
}

/* Calendar strip inside the open panel */
.cal { display: flex; gap: 3px; flex: none; align-self: flex-start; }

.cal div {
  width: 21px;
  text-align: center;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.5;
}

.cal div b {
  display: block;
  font-size: 11px;
  font-weight: 550;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 5px;
  padding: 1px 0;
}

.cal div.today b { background: #fff; color: #000; }

/* Shelf: a file drifting toward the notch */
.dragged {
  position: absolute;
  left: 14%;
  top: 74%;
  width: 34px;
  height: 42px;
  border-radius: 5px;
  background: linear-gradient(135deg, #3d5a8f, #7b4b86);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.screen.dropping .dragged { animation: fly 2.2s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes fly {
  0% { opacity: 0; transform: translate(0, 20px) scale(0.9) rotate(-6deg); }
  18% { opacity: 1; transform: translate(0, 0) scale(1) rotate(-6deg); }
  70% { opacity: 1; transform: translate(calc(50vw - 50% - 14vw), -170px) scale(0.72) rotate(3deg); }
  84% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(calc(50vw - 50% - 14vw), -190px) scale(0.4) rotate(3deg); }
}

/* Game */
.game-open { padding: 30px 12px 10px; }
.board { width: 100%; height: 100%; display: block; }

/* ---------- Plain hairline grid, no cards, no icons ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}

.grid > * {
  padding: 26px 26px 26px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.item h3 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 590;
  letter-spacing: -0.012em;
}

.item p { margin: 0; color: var(--dim); font-size: 14.8px; line-height: 1.55; }

/* ---------- Numbers ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--rule-soft);
}

.stat {
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.stat .n {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 620;
  letter-spacing: -0.032em;
  font-variant-numeric: tabular-nums;
}

.stat .l { font-size: 13.5px; color: var(--faint); margin-top: 5px; line-height: 1.45; }

/* ---------- Callout ---------- */

.callout {
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 24px;
}

/* ------------------------------------------------------------- Changelog */

/* A rail with a node per release. Written so a single release still reads as
   the start of a timeline rather than one stranded paragraph: the rail fades
   downward out of the node instead of stopping dead under it. */
.releases {
  max-width: 780px;
}

.release {
  position: relative;
  padding: 0 0 4px 30px;
}

.release::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.15);
}

.release::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--rule), transparent);
}

.release-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 9px;
}

.ver {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 640;
  letter-spacing: -0.02em;
}

.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(10, 132, 255, 0.4);
  border-radius: 100px;
  padding: 2px 9px;
}

.when {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
  margin-left: auto;
}

.release .summary {
  color: var(--dim);
  max-width: 62ch;
  margin-bottom: 26px;
}

.change-group {
  margin-bottom: 24px;
}

.change-group h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

.change-group ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.change-group li {
  position: relative;
  padding-left: 17px;
  font-size: 15px;
  line-height: 1.5;
}

/* A dash rather than a bullet: the list is long and dots made it look like a
   spec sheet instead of a set of changes. */
.change-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--faint);
}

.change-group li small {
  display: block;
  font-size: 13.5px;
  color: var(--dim);
  margin-top: 1px;
}

@media (max-width: 560px) {
  .when {
    margin-left: 0;
    width: 100%;
  }
}

/* Both levels: the compare page uses h2 here so the document has a heading
   between its h1 and the table, rather than jumping straight to h3. */
.callout h2,
.callout h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 590;
  letter-spacing: -0.015em;
}

.callout p { margin: 0; color: var(--dim); font-size: 15.5px; }
.callout p + p { margin-top: 12px; }
.callout a { color: var(--text); border-bottom: 1px solid var(--rule); }

/* ---------- Download ---------- */

.reqs {
  display: flex;
  gap: 8px 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--faint);
}

.reqs span + span::before {
  content: "·";
  margin-right: 24px;
  color: #303036;
}

/* The download count. Deliberately quiet — it is a fact about the page, not a
   badge, and a number nobody asked for should not outrank the buttons above
   it. `[hidden]` is honoured by the reset, so an unreachable counter simply
   isn't there. */
.dl-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.dl-count b {
  color: var(--dim);
  font-weight: 400;
}

.note {
  max-width: 62ch;
  margin: 32px 0 0;
  border-left: 2px solid var(--warn);
  padding: 2px 0 2px 22px;
  font-size: 14.5px;
  color: var(--dim);
}

.note strong { color: var(--text); font-weight: 590; }

code {
  font-family: var(--mono);
  font-size: 0.87em;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 1px 5px;
  color: #c8c8d0;
}

/* ---------- Comparison table ---------- */

/* Deliberately not a scroll container at this width. `overflow-x: auto` makes
   the element scrollable on both axes, and the sticky header below then
   resolves against *it* rather than the page: instead of following the scroll
   it sat a permanent 60px down the table, painted over the first group
   heading. (`overflow-y: clip` doesn't help — beside a scrolling axis it
   computes to `hidden`, which is still a scroll container.) The table only
   overflows on narrow screens, so the scrolling is scoped to those below. */
.table-wrap { }

table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

thead th {
  position: sticky;
  top: 60px;
  background: var(--bg);
  text-align: left;
  padding: 13px 16px 13px 0;
  font-size: 12px;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--rule);
  z-index: 5;
}

thead th:nth-child(2),
thead th:nth-child(3) { text-align: center; width: 148px; padding-right: 0; }
thead th .us { color: var(--text); }

tbody th {
  text-align: left;
  font-weight: 400;
  padding: 12px 16px 12px 0;
  color: var(--text);
  border-bottom: 1px solid var(--rule-soft);
}

tbody th small {
  display: block;
  color: var(--faint);
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.45;
}

tbody td {
  text-align: center;
  padding: 12px 8px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13.5px;
  color: var(--faint);
}

tr.group th {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 30px 0 10px;
  border-bottom: 1px solid var(--rule);
}

tr.group td { border-bottom: 1px solid var(--rule); }

.yes { color: var(--good); }
.no { color: #3a3a42; }
.partial { color: var(--warn); font-size: 13px; }

.legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 20px;
  font-size: 13px;
  color: var(--faint);
}

.legend span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--rule-soft);
  padding: 40px 0 56px;
  color: var(--faint);
  font-size: 13.5px;
}

footer .wrap {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

footer a:hover { color: var(--text); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr; gap: 24px; }
  .showcase.flip .showcase-text { order: 0; }
  nav.links { display: none; }
  .screen { height: 216px; }
  section { padding: 68px 0; }
  /* Narrow enough that the 620px table needs to scroll sideways. That makes
     the wrapper a scroll container, so the header cannot usefully stick. */
  .table-wrap { overflow-x: auto; }
  thead th { position: static; }
  .grid > *,
  .stat { padding-right: 0; }
}

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

/* Note under the hero demo */
.stage-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
}

/* Shuffle and repeat are tinted with the accent when they are on, which is
   how the app draws them. */
.transport svg.tint { fill: var(--accent); opacity: 1; }

/* The ring's remaining time, with the accent sweeping round it. */
.ring { --pct: 62%; }


/* ---------- The open panel, laid out like the app ---------- */
/*
  Header straddling the camera: tab chips left, battery and settings right,
  nothing in the middle. Then artwork, player and the calendar pane.
*/
.head {
  display: flex;
  align-items: center;
  height: 30px;
  gap: 5px;
}

.head .chip-tab {
  display: grid;
  place-items: center;
  width: 26px;
  height: 20px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.55);
}

.head .chip-tab.on { background: rgba(255, 255, 255, 0.18); color: #fff; }
.head .chip-tab svg { width: 13px; height: 13px; fill: currentColor; }

/* The camera housing. Nothing is ever drawn here. */
.head .cutout { width: 176px; flex: none; }

.head .right {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.head .right .gear { color: rgba(255, 255, 255, 0.6); }
.head .right .gear svg { width: 14px; height: 14px; fill: currentColor; display: block; }

.body-row { display: flex; gap: 14px; padding-top: 8px; }

.art-lg {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 12px;
  flex: none;
  background:
    radial-gradient(120% 90% at 30% 25%, #6b6b74 0%, transparent 55%),
    linear-gradient(150deg, #2b2b30, #111114 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* The badge the app puts on the artwork for whichever app is playing. It sits
   proud of the bottom-right corner, so it reads at a glance rather than
   disappearing into the album art. */
.art-lg .source {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: none;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.65);
}

.art-lg .source svg { width: 26px; height: 26px; fill: #000; display: block; }

.player { flex: 1; min-width: 0; }
.player .title { font-size: 13px; font-weight: 640; letter-spacing: -0.012em; color: #fff; }
.player .artist { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-bottom: 14px; }

.track { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.26); overflow: hidden; }
.track span { display: block; height: 100%; background: #fff; }

.times {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

/* Shuffle pinned left, transport centred, repeat pinned right. */
.transport {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 9px;
  color: #fff;
}

.transport .mid { display: flex; align-items: center; gap: 15px; margin: 0 auto; }
.transport svg { width: 13px; height: 13px; fill: currentColor; display: block; }
.transport svg.big { width: 17px; height: 17px; }
.transport svg.tint { fill: var(--accent); }

/* Calendar pane */
.calendar { width: 172px; flex: none; }

.cal { display: flex; gap: 2px; justify-content: space-between; }

.cal div {
  flex: 1;
  text-align: center;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.5;
}

.cal div b {
  display: block;
  font-size: 10.5px;
  font-weight: 620;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 2px 0;
}

.cal div.today b { background: #fff; color: #000; }

.agenda { margin-top: 11px; display: flex; flex-direction: column; gap: 6px; }

.ev {
  display: grid;
  grid-template-columns: 3px 30px 1fr;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.82);
}

.ev i { height: 18px; border-radius: 2px; background: var(--accent); }
.ev.green i { background: #30d158; }
.ev.orange i { background: #ff9f0a; }
.ev time { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.5); font-size: 9px; }
.ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rem {
  display: grid;
  grid-template-columns: 11px 1fr;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.72);
}

.rem u {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.45);
  text-decoration: none;
}

.rem.done u { background: var(--accent); border-color: var(--accent); }
.rem.done span { text-decoration: line-through; color: rgba(255, 255, 255, 0.35); }


/* ---------- Drop zone ---------- */
/*
  The app's real sequence has three states, not two. Picking a file up anywhere
  on screen sets `dragDetectorTargeting` and the panel becomes a drop zone —
  wider, 26pt taller, a tray on the left and a plus on the right. Then when the
  drag actually crosses into it, `draggingEntered` fires and the panel opens
  the whole way onto the Shelf tab, *while you are still holding the file*. The
  drop is the last step, not the one that opens it.
*/
.dropzone {
  position: absolute;
  inset: 0;
  padding: 0 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s linear;
}

.notch.dropping .dropzone { opacity: 1; }
.notch.dropping .notch-closed,
.notch.open .notch-closed { opacity: 0; }

/* closedNotchSize + 110 either side, and 26 taller — the app's own numbers. */
.notch.dropping {
  --br: 20px;
  width: 396px;
  height: 58px;
}

.dz-row { display: flex; align-items: center; height: 32px; }
.dz-row .cutout { flex: 1 1 auto; }
.dz-row svg { width: 17px; height: 17px; fill: var(--accent); display: block; }

.dz-hint {
  text-align: center;
  font-size: 12px;
  font-weight: 620;
  color: rgba(255, 255, 255, 0.62);
  line-height: 26px;
}

/*
  The file itself. It rises off the desktop, travels to the panel, and then
  hovers over the open shelf — because in the app the shelf is already open and
  waiting before you let go.
*/
.dragged {
  position: absolute;
  left: 14%;
  top: 62%;
  width: 38px;
  height: 47px;
  border-radius: 6px;
  background: linear-gradient(140deg, #6f8fd8, #8b6fa8);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

.screen.dragging .dragged { animation: carry 2.5s cubic-bezier(0.4, 0, 0.3, 1) forwards; }

@keyframes carry {
  /* Picked up. */
  0%   { opacity: 0; transform: translate(0, 26px) scale(0.86) rotate(-9deg); }
  10%  { opacity: 1; transform: translate(0, 0) scale(1) rotate(-9deg); }
  /* Carried up toward the panel — this is when it becomes a drop zone. */
  46%  { opacity: 1; transform: translate(28vw, -58px) scale(0.88) rotate(-3deg); }
  /* Held over the open shelf, waiting. */
  70%  { opacity: 1; transform: translate(34vw, -96px) scale(0.8) rotate(0deg); }
  88%  { opacity: 1; transform: translate(34vw, -96px) scale(0.8) rotate(0deg); }
  /* Released. */
  100% { opacity: 0; transform: translate(34vw, -88px) scale(0.42) rotate(0deg); }
}

/* Real cover art, served from Apple's own artwork host. */
.art-lg.cover {
  background: #111 url("https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/31/3a/3f/313a3fbc-bb8f-80c7-b5a2-e226869a38cd/24UMGIM51924.rgb.jpg/300x300bb.jpg") center / cover no-repeat;
}

.notch-closed .art.cover {
  background: #111 url("https://is1-ssl.mzstatic.com/image/thumb/Music221/v4/31/3a/3f/313a3fbc-bb8f-80c7-b5a2-e226869a38cd/24UMGIM51924.rgb.jpg/100x100bb.jpg") center / cover no-repeat;
}

/* Widgets are inside the panel now, so the row is just a centring wrapper. */
.notch-row { display: flex; justify-content: center; }

/* Widget demo: things leaving and entering the panel rather than the page. */
.notch-closed .gone {
  opacity: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

.notch-closed .wgt,
.notch-closed .art,
.notch-closed .bars {
  transition: opacity 0.25s linear, width 0.3s ease, margin 0.3s ease;
}

.notch.static { transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1); cursor: default; }

/* A panel that is simply open and stays open — no hover, no timeline. Used for
   focus, where an animated countdown would be the exact distraction the
   feature exists to remove. */
.notch.static.open .notch-open { opacity: 1; transition: none; }

/* ---------- Tabs with a label ---------- */
/* The app labels the selected tab when there are few enough of them to fit. */
.head .chip-tab.labelled {
  width: auto;
  gap: 6px;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 590;
  display: inline-flex;
  align-items: center;
}

/* ---------- Shelf, empty ---------- */
.shelf-empty {
  margin-top: 6px;
  height: 118px;
  border: 1.4px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.shelf-empty svg { width: 26px; height: 26px; fill: none; stroke: rgba(255,255,255,.62); stroke-width: 1.6; }
.shelf-empty b { font-size: 13px; font-weight: 620; color: rgba(255, 255, 255, 0.86); }
.shelf-empty span { font-size: 11px; color: rgba(255, 255, 255, 0.44); }

/* ---------- Focus, running ---------- */
.focus-pane { display: flex; gap: 22px; padding-top: 10px; }

.ring {
  position: relative;
  width: 92px;
  height: 92px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--pct, 62%), rgba(255, 255, 255, 0.14) 0);
  display: grid;
  place-items: center;
}

.ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #000; }

.ring .r-in { position: relative; z-index: 1; text-align: center; }
.ring b { display: block; font-size: 19px; font-weight: 620; color: #fff; font-variant-numeric: tabular-nums; }
.ring i { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, 0.5); }

.focus-meta { flex: 1; min-width: 0; padding-top: 8px; }
.focus-title { font-size: 15px; font-weight: 640; color: #fff; }
.focus-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.5); margin-bottom: 12px; }

.focus-btns { display: flex; gap: 8px; margin-bottom: 10px; }

.fbtn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.fbtn.stop { background: #b8393a; }
.focus-note { font-size: 10.5px; color: rgba(255, 255, 255, 0.42); }

.blocking { width: 190px; flex: none; padding-top: 6px; }

.blocking-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 620;
  color: #fff;
  margin-bottom: 7px;
}

.blocking-head svg { width: 13px; height: 13px; fill: currentColor; }
.blocking-head em { margin-left: auto; font-style: normal; color: rgba(255, 255, 255, 0.45); font-weight: 500; }

.blocking .host {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 5px;
  padding: 3px 9px;
  margin-bottom: 3px;
}

.blocking .more { font-size: 10.5px; color: rgba(255, 255, 255, 0.36); padding: 2px 9px; }

/* ---------- Clipboard ---------- */
.clip-bar { display: flex; align-items: center; gap: 12px; padding-top: 8px; }

.clip-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 200px;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.42);
}

.clip-search .mag {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.3px solid rgba(255, 255, 255, 0.45);
  position: relative; flex: none;
}

.clip-search .mag::after {
  content: ""; position: absolute; right: -4px; bottom: -3px;
  width: 5px; height: 1.3px; background: rgba(255, 255, 255, 0.45);
  transform: rotate(45deg);
}

.clip-count { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }

.clip-clear {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 4px 13px;
}

.clips { display: flex; gap: 10px; margin-top: 10px; overflow: hidden; }

.clip {
  width: 132px;
  flex: none;
  height: 94px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 8px 9px;
  overflow: hidden;
}

.clip.pinned { border-color: var(--accent); }

.clip .src {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 5px;
}

.clip .src .pin { color: var(--accent); }
.clip .txt { font-size: 10.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.88); word-break: break-word; }

/* The spectrum needs air before the battery widget; in the app the widget
   stack carries its own inset and this row has to do the same. */
.notch-closed .bars { margin-right: 14px; }

/* ---------- Game header ---------- */
/* The row the app draws above the board: title, level, lives, score, best. */
.game-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 6px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

.game-head b { font-size: 11px; font-weight: 620; }
.game-head .lvl { color: rgba(255, 255, 255, 0.45); }
.game-head .hearts { color: #ff6b81; letter-spacing: 1px; font-size: 9px; }
.game-head .spacer { flex: 1; }
.game-head .score { font-size: 12px; font-weight: 640; }
.game-head .best { color: var(--accent); font-size: 10px; }

.game-open { padding-bottom: 8px; }
.game-open .board { width: 100%; height: 128px; display: block; margin-top: 4px; }