/* Built to the Zune software's own rules: flat black, light lowercase type, small bold capitals,
   left-aligned and running off the right edge, colour kept for one place. The numbers are the
   app's: see Sources/Pivot/Theme/Theme.swift. The pictures are the app itself, in shots/. */
:root {
  --a1: #EC008C; --a2: #F7941D;
  --base: #10060C; --primary: #FFFFFF; --secondary: #A3A3A3; --faint: #6F6F6F;
  --off: #474747;   /* a pivot heading that isn't chosen */
  --accent: linear-gradient(90deg, var(--a1), var(--a2));

  --edge: clamp(20px, 6vw, 112px);
  --section: clamp(120px, 14vw, 220px);

  /* Four sizes and one set of capitals. Nothing else. */
  --t-display: clamp(60px, 10.5vw, 176px);
  --t-head:    clamp(44px, 6.4vw, 104px);
  --t-item:    clamp(22px, 1.9vw, 28px);
  --t-body:    clamp(16px, 1.15vw, 18px);
  --t-caps:    12px;

  --metro: cubic-bezier(.1, .9, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* The app's own backdrop, fixed to the window as it is in ZUNIC: a lighter middle a little above
   centre fading out to plum (ChromeGradient in Theme.swift), and the accent bar on the left edge. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* Measured from ZUNIC's Quickplay, where the window leans plum towards its edges as the
     original's did (ChromeBackground's plum option). */
  background: radial-gradient(circle min(900px, 75vmax) at 50% 42%,
    #282226, #1B151A 33%, #150C12 50%, #13090F 64%, #10060C);
}
.edge-bar { position: fixed; left: 0; top: 16px; width: 6px; height: 40px; z-index: 60; background: linear-gradient(var(--a1), var(--a2)); }
body {
  background: var(--base); color: var(--primary);
  font: 400 var(--t-body)/1.6 "Open Sans", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: none; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }

.display, .head, .item { font-weight: 300; text-transform: lowercase; font-kerning: normal; text-rendering: optimizeLegibility; }
/* Lowercase light type needs room under each line for y, g and p: tight, but never touching.
   Big thin letters also carry a wide left side-bearing, so they're pulled back to sit on the
   same edge as the small capitals above them. */
.display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.04em; margin-left: -.045em; }
.head { font-size: var(--t-head); line-height: 1.06; letter-spacing: -.035em; margin-left: -.04em; text-wrap: balance; }
.item { font-size: var(--t-item); line-height: 1.25; letter-spacing: -.015em; text-wrap: balance; }
.caps { font-size: var(--t-caps); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.body { color: var(--secondary); max-width: 30em; line-height: 1.65; text-wrap: pretty; }
.fine { color: var(--faint); font-size: 14px; }

.edge { padding-left: var(--edge); padding-right: var(--edge); }
section { position: relative; }
/* Things waiting to slide in sit off to the right; they shouldn't widen the page. */
main { overflow-x: clip; }

/* A shot of the app: the window as macOS draws it, whole, as big as fits the browser window under
   the nav, and sitting on the same left edge as the words. */
.shot { padding: 0 var(--edge); }
.shot img { width: min(100%, calc((100svh - 120px) * 1.449)); height: auto; border-radius: 12px; }
.shot img, .panel .pic img { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -12px rgba(0,0,0,.55), 0 60px 120px -20px rgba(0,0,0,.6); }

/* Every control answers a press the way Windows Phone and the Zune HD did: it tips toward the
   finger and sinks a little, then springs back on release. The script sets --rx, --ry and --s. */
[data-tilt] {
  transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .45s var(--metro);
}
[data-tilt].pressed { transition-duration: .12s; transition-timing-function: ease-out; }

/* The one filled button. On hover its label rolls up and a copy rolls in from below, and the
   gradient drifts from magenta toward orange. */
.cta {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 24px; color: #fff;
  background: linear-gradient(90deg, var(--a1), var(--a2) 50%, var(--a1)) 0 0 / 200% 100%;
  transition: background-position .8s var(--metro), transform .45s var(--metro);
}
.cta:hover { background-position: 100% 0; }
.cta svg { width: 15px; height: 15px; flex: none; }
.roll { position: relative; display: block; overflow: hidden; line-height: 1.4; }
.roll span { display: block; transition: transform .5s var(--metro); }
.roll span + span { position: absolute; left: 0; top: 100%; }
.cta:hover .roll span, .cta:focus-visible .roll span { transform: translateY(-100%); }

/* The text link beside it: an underline draws in from the left and the arrow steps forward. */
.go { display: inline-flex; align-items: center; gap: 10px; height: 48px; color: var(--primary); }
.go .u { position: relative; }
.go .u::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--metro);
}
.go:hover .u::after, .go:focus-visible .u::after { transform: scaleX(1); transform-origin: 0 50%; }
.go svg { width: 14px; height: 14px; transition: transform .5s var(--metro); }
.go:hover svg, .go:focus-visible svg { transform: translateX(5px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }

/* Things arrive from the right, as Metro screens do. */
/* Things arrive from the right, as Metro screens do: headlines a line at a time, everything
   else in one short, soft step so the headlines and shots lead. */
.rv { opacity: 0; transform: translateX(32px); transition: opacity .7s ease, transform 1s var(--metro); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.lines.rv { opacity: 1; transform: none; }
.lines .ln { display: block; }
.lines .ln > span {
  display: inline-block; opacity: 0; transform: translateX(72px);
  transition: opacity .7s ease, transform 1.1s var(--metro);
  transition-delay: calc(var(--d, 0s) + var(--i) * 90ms);
}
.lines.in .ln > span { opacity: 1; transform: none; }

/* ——— Nav, like the software's: small grey capitals, the current one white ——— */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 72px;
  display: flex; align-items: center; gap: 48px; padding: 0 var(--edge); transition: background .3s;
}
.nav.solid { background: linear-gradient(rgba(16,6,12,.96) 60%, rgba(16,6,12,0)); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--faint); transition: color .2s; }
.nav-links a:hover, .nav-links a.on { color: var(--primary); }
.nav .cta { margin-left: auto; height: 36px; padding: 0 16px; }

/* ——— Hero ——— */
.hero { padding-top: clamp(144px, 19vh, 212px); }
.hero h1 { margin-bottom: clamp(28px, 3vw, 44px); }
.hero .body { margin-bottom: 40px; }
.hero .fine { margin-top: 20px; }
.hero .shot { margin-top: clamp(64px, 7vw, 112px); }

/* ——— Tour: the pivot is the heading ——— */
.tour { padding-top: var(--section); }
.tour-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.tour-head .count { color: var(--faint); font-variant-numeric: tabular-nums; }
.tour-head .count b { color: var(--primary); font-weight: 700; }
/* On a screen big enough to hold a whole panel, the tour pins while you scroll through it and
   the scroll moves the pivot: each panel holds for most of a screen's scroll, then the next
   heading slides in. The script adds .scrolly when it takes over. */
.tour.scrolly { height: calc(var(--section) + 100vh * var(--steps, 4)); }
.tour.scrolly .tour-pin {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-top: 72px; overflow: hidden;
}
.tour.scrolly .pivot-bar { transition: none; will-change: transform; }
.tour.scrolly .panel, .tour.scrolly .panels.back .panel { transition: none; transform: none; }
.tour.scrolly .panel > * { will-change: transform; }
.tour.scrolly .panels { margin-top: clamp(32px, 4vh, 64px); }
/* The shot fits the room left under the pivot, never taller than the screen allows. */
.tour.scrolly .panel .pic img { width: min(calc(100% + 10vw), calc((100vh - 72px - 300px) * 1.449)); min-width: 0; }
/* Going back, panels come in from the left and leave to the right. */
.panels.back .panel:not(.on) { transform: translateX(-80px); }
.panels.back .panel.leave { transform: translateX(80px); }
.pivot-bar { display: flex; gap: clamp(20px, 2.8vw, 44px); white-space: nowrap; padding-left: calc(var(--edge) - .04 * var(--t-head)); transition: transform .7s var(--metro); }
.pivot-bar button { font-size: var(--t-head); font-weight: 300; letter-spacing: -.035em; line-height: 1.15; color: var(--off); transition: color .3s, transform .45s var(--metro); }
.pivot-bar button:hover { color: #7A7A7A; }
.pivot-bar button[aria-selected="true"] { color: var(--primary); }
.panels { display: grid; margin-top: clamp(56px, 6vw, 96px); }
.panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 96px); align-items: start;
  padding-left: var(--edge);
  opacity: 0; visibility: hidden; transform: translateX(80px); transition: opacity .3s, transform .5s var(--metro), visibility 0s .5s;
}
.panel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .08s, transform .8s .08s var(--metro), visibility 0s; }
.panel.leave { transform: translateX(-80px); }
.panel .item { margin-bottom: 16px; }
.panel ul { list-style: none; margin-top: 32px; display: grid; gap: 10px; font-size: 15px; }
/* The panel's shot runs off the right edge of the page. */
.panel .pic img { width: calc(100% + 10vw); min-width: 560px; height: auto; border-radius: 12px; }

/* ——— Now Playing: the shot, as large as the page allows ——— */
.np { padding-top: var(--section); }
.np .head { margin-bottom: 32px; }
.np .body { margin-bottom: clamp(56px, 6vw, 96px); }

/* ——— Details: a plain list, three across ——— */
.details { padding-top: var(--section); }
.details .head { margin-bottom: clamp(56px, 6vw, 96px); }
.list3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 72px); }
.list3 .item { margin-bottom: 10px; }
.list3 p { color: var(--secondary); font-size: 15px; line-height: 1.65; max-width: 24em; text-wrap: pretty; }
.kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--faint); font-size: 12px; line-height: 18px; text-align: center; color: var(--primary); }

/* ——— Download ——— */
.end { padding-top: var(--section); padding-bottom: clamp(80px, 9vw, 140px); }
.end .display { margin-bottom: clamp(28px, 3vw, 44px); }
.end .body { margin-bottom: 40px; }
.end .fine { margin-top: 20px; }
/* ——— Footer: the app's icon and name, where to go, and the small print ——— */
.foot { padding-top: clamp(64px, 7vw, 104px); padding-bottom: 40px; border-top: 1px solid rgba(255,255,255,.08); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 56px; }
.foot-brand { display: flex; align-items: center; gap: 24px; }
.foot-brand img { width: 88px; height: 88px; flex: none; }
.foot-brand .item { font-size: clamp(28px, 2.4vw, 36px); margin-bottom: 4px; }
.foot-brand .body { font-size: 15px; }
.foot-cols { display: flex; gap: clamp(48px, 8vw, 128px); }
.foot-cols div { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.foot-cols .caps { color: var(--faint); margin-bottom: 6px; }
.foot-cols a { color: var(--secondary); transition: color .2s; width: fit-content; }
.foot-cols a:hover { color: var(--primary); }
.foot-cols span:not(.caps) { color: var(--faint); }
.foot-base { margin-top: clamp(64px, 7vw, 104px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: var(--faint); }
.foot-base a { color: var(--secondary); transition: color .2s; }
.foot-base a:hover { color: var(--primary); }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .panel { grid-template-columns: 1fr; }
  .panel .pic img { width: calc(100% + 20vw); min-width: 600px; }
  .list3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .list3 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .rv, .lines .ln > span { opacity: 1; transform: none; }
}

/* ——— And more: a panorama of smaller screens, one line each ——— */
.more { padding-top: var(--section); }
.more .head { margin: 0 var(--edge) clamp(40px, 5vw, 72px); }
.strip {
  display: flex; gap: clamp(20px, 2.4vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--edge) 48px; scroll-padding-left: var(--edge); scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -4px; }
.strip figure { flex: 0 0 min(78vw, 820px); scroll-snap-align: start; }
.strip img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 48px -12px rgba(0,0,0,.55); }
.strip figcaption { margin-top: 24px; }
.strip .item { margin-bottom: 6px; }
.strip p { color: var(--secondary); font-size: 15px; }

/* ——— Questions: one line each, opened on click ——— */
.faq { padding-top: var(--section); }
.faq .head { margin-bottom: clamp(40px, 5vw, 72px); }
.qa { max-width: 880px; border-top: 1px solid rgba(255,255,255,.08); }
.qa details { border-bottom: 1px solid rgba(255,255,255,.08); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-size: var(--t-item); font-weight: 300; letter-spacing: -.015em; line-height: 1.25; text-transform: lowercase;
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--secondary); }
.qa summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
  transform: translateY(-3px) rotate(45deg); transition: transform .4s var(--metro);
}
.qa details[open] summary::after { transform: translateY(3px) rotate(225deg); }
.qa p { color: var(--secondary); padding: 0 0 26px; max-width: 34em; }

/* ——— What's new: days, newest first, a line per change ——— */
.news { padding-top: clamp(144px, 19vh, 212px); padding-bottom: var(--section); }
.news .display { margin-bottom: clamp(28px, 3vw, 44px); }
.news .body { margin-bottom: clamp(64px, 7vw, 112px); }
.release { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px 48px; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.08); }
.release .caps { color: var(--secondary); padding-top: 8px; }
.release .caps b { display: block; color: var(--primary); font-size: var(--t-item); font-weight: 300; letter-spacing: -.015em; text-transform: lowercase; margin-bottom: 4px; }
.release ul { list-style: none; display: grid; gap: 12px; }
.release li { color: var(--secondary); max-width: 40em; }
@media (max-width: 760px) { .release { grid-template-columns: 1fr; } }