/*
 * The finale: every app on every screen. The statement and the platform's caption above the grid, the platforms'
 * control below it, and under each device a mark with the app's name and whether it is out on that platform.
 */

.room-finale { background: #060607; }
.room-finale > i { background: radial-gradient(ellipse 70% 46% at 50% 108%, rgba(255, 255, 255, 0.05), transparent 70%), radial-gradient(ellipse 60% 40% at 50% -10%, rgba(140, 160, 255, 0.05), transparent 70%); }
/* a soft pool of each app's colour behind its cell (positions set by the chapter's layout) */
.fin-glows { position: absolute; inset: 0; }
.fin-glows i { position: absolute; left: 0; top: 0; width: var(--gw, 400px); height: var(--gh, 300px); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.55; }


.fin { position: absolute; inset: 0; z-index: 5; visibility: hidden; pointer-events: none; }
.fin > * { pointer-events: auto; }
.fin-top { position: absolute; left: 0; right: 0; top: 76px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; pointer-events: none; }
.fin-kick { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); }
.fin-h { margin-top: 6px; font-size: clamp(30px, min(3.3vw, 5.4vh), 60px); font-weight: 820; font-stretch: 125%; line-height: 1; letter-spacing: -0.034em; white-space: nowrap; }
.fin-h .w, .fin-cap .w, .fin-ph .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0 0.1em; margin: -0.04em 0 -0.1em; }
.fin-h .w > span, .fin-cap .w > span, .fin-ph .w > span { display: inline-block; opacity: 0; }
.fin-ph { display: none; }
.fin-cap { position: relative; width: 100%; height: 1.5em; margin-top: 10px; font-size: clamp(15px, 1.2vw, 18px); font-weight: 460; color: rgba(var(--ink-rgb), var(--soft)); }
.fin-cap > span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; }

/* the control: the segmented control of the other chapters, centred under the grid */
.fin-ctl { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; justify-content: center; }
.fin-ctl .seg { --sh: clamp(32px, 4.4vh, 38px); --sp: clamp(10px, 1.05vw, 16px); --segf: clamp(12.5px, 1vw, 14.5px); }
.fin-ctl .seg-thumb, .fin-ctl .seg-ink { opacity: 0; }
.fin-dots { display: none; }

/* under each device: its name and its availability */
/* the client wanted the grid at its cleanest: no name or status under each device (where each app is available
   is in the caption and the page's outline instead) */
.fin-marks { display: none; }
.fin-mark { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13px; line-height: 1; }
.fin-mark > b { font-weight: 700; letter-spacing: -0.005em; color: var(--ink); }
.fm-st { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 1.6em; padding-left: 9px; color: var(--ink-2); font-weight: 520; }
.fm-st::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--line); }
.fm-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #34c759; }
.fm-l { display: inline-block; }
.fm-b { position: absolute; left: 21px; top: 0; line-height: 1.6em; }
.fm-a { line-height: 1.6em; }

/* phones: the platform's name, big; the caption and the long control give way to dots */
@media (orientation: portrait) and (max-width: 900px) {
  /* (the grid and its dots live in what is always in view: Safari's bar can cover the rest of the stage) */
  .fin { height: var(--hs, 100svh); bottom: auto; }
  .fin-top { top: calc(var(--top) + 14px); padding: 0 var(--px-r) 0 var(--px); }
  .fin-kick { font-size: 12.5px; }
  .fin-h, .fin-cap { display: none; }
  .fin-ph { display: block; position: relative; width: 100%; height: 1.12em; margin: 0 0 14px; text-align: center; font-size: clamp(30px, 8.6vw, 52px); font-weight: 820; font-stretch: 125%; line-height: 1; letter-spacing: -0.034em; }
  .fin-ph b { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; font-weight: inherit; }
  /* the platform's big name sits at the bottom, over the dots; "Every Pixello app" stays at the top */
  .fin-ctl { bottom: calc(var(--bot) + 12px); left: 0; right: 0; transform: none; flex-direction: column; align-items: center; padding: 0 var(--px-r) 0 var(--px); }
  .fin-ctl .seg { display: none; }
  .fin-dots { position: relative; display: flex; gap: 8px; height: 14px; align-items: center; }
  .fin-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.28); }
  .fin-dots b { position: absolute; left: -3px; top: 2px; width: 12px; height: 10px; border-radius: 5px; background: var(--ink); opacity: 0; }
  .fin-mark { font-size: 11px; gap: 6px; }
  .fm-st { padding-left: 7px; gap: 5px; }
  .fm-b { left: 18px; }
  .fm-dot { width: 5px; height: 5px; }
}

/* the grid's glass: its sheen is a fixed square layer (a 3D transform, no will-change: its raster scale follows its
   size, where will-change would keep whatever scale it was first drawn at), slid and scaled over the screen.
   The same 112deg band as the sized sheen (site.css): its stops sit round the middle at 1/1.5 of their distance,
   on a square 1.5 times the sized one's gradient line */
.glass-fixed .glass-sheen { inset: auto; left: 0; top: 0; width: 1000px; height: 1000px; transform-origin: 0 0;
  background: linear-gradient(112deg, transparent 43.333%, rgba(255, 255, 255, 0.07) 48%, rgba(255, 255, 255, 0.02) 51.333%, transparent 55.333%); }