/* The app on a Mac and on an iPhone (home/devices.js): the result as the app shows it, in the app's own window and on the
   phone's screen. Everything inside is sized in the app's own points, with the app's own sizes (its rules:
   apple/UnmixedAudio/App/Design.swift): --pt is one point at the width the screen is given, so it is the same picture at
   any size and it matches the app. Its colours are the page's tokens, so it follows the theme. */
.device { margin: 0; container-type: inline-size; min-width: 0; }
.device * { box-sizing: border-box; }
.device svg { display: block; }
.device .fill { fill: currentColor; stroke: none; }

/* what both screens share, in the app's sizes: a control is 40 points tall on a Mac and 44 on a phone (--control), play
   48, a symbol about 19, a sound's icon 30; text is 15 (names, buttons), 13 (times, volumes) or 11.5 (the ruler) */
/* Music or Voices & sounds: the app's switch, a faint track with the chosen side a white pill (--seg: its height) */
.ui-seg { display: inline-flex; align-items: center; flex: none; padding: calc(2 * var(--pt)); border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 11%, transparent); font: 500 calc(15 * var(--pt))/1 var(--f-sans); white-space: nowrap; }
.ui-seg span { display: inline-flex; align-items: center; justify-content: center; height: calc((var(--seg) - 4) * var(--pt)); padding: 0 calc(16 * var(--pt)); border-radius: 999px; color: var(--ink-2); }
.ui-seg .on { background: var(--ink); color: var(--paper); }
/* Download: the app's white button, its arrow on the right behind a thin line (the ways to download) */
.ui-down { display: inline-flex; align-items: stretch; flex: none; height: calc(var(--seg) * var(--pt)); border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 calc(15 * var(--pt))/1 var(--f-sans); white-space: nowrap; }
.ui-down .dl { display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); padding: 0 calc(13 * var(--pt)) 0 calc(14 * var(--pt)); }
.ui-down .dl b { font-weight: inherit; }
.ui-down .dl svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.ui-down .more { display: grid; place-items: center; width: calc(34 * var(--pt)); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--paper) 18%, transparent); }
.ui-down .more svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }
.ui-btn { display: grid; place-items: center; flex: none; width: calc(var(--control) * var(--pt)); height: calc(var(--control) * var(--pt)); color: var(--ink); }
.ui-btn svg { width: calc(22.2 * var(--pt)); height: calc(22.2 * var(--pt)); }   /* the app's 19-point symbol */
.ui-play { display: grid; place-items: center; flex: none; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: 50%; background: var(--ink); color: var(--paper); }
.ui-play svg { width: 46%; height: 46%; }   /* 19 points in the 48 */
/* the player: back and forward 10 seconds round play, white (the app's round buttons) */
.ui-player { display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--pt)); }
/* a sound: its icon, its name, its volume and its fader (a rounded track lit from the left with what you hear, the mark
   in the middle where it was recorded, the slim knob on it) */
.ui-sound { display: flex; align-items: center; min-width: 0; font: 500 calc(15 * var(--pt))/1.2 var(--f-sans); }
.ui-name { display: flex; align-items: center; gap: calc(12 * var(--pt)); min-width: 0; color: var(--ink); white-space: nowrap; }
.ui-name > span { overflow: hidden; text-overflow: ellipsis; }
.ui-icon { position: relative; flex: none; display: grid; place-items: center; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); color: var(--c); }
.ui-icon > svg:not(.drop) { position: relative; width: 58%; height: 58%; }   /* the app's 15 points on the 30 */
/* its drop (pieces/drop.js), as in the app: it grows and lights up with what you hear of the sound */
.ui-icon .drop { position: absolute; left: 50%; top: 50%; width: 160%; height: 160%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
/* (Theme.swift SoundIcon: 0.84 of the icon's box, devices.js DROP; .18 of its colour, up to .34 more with what you hear) */
.ui-icon .drop path { fill: color-mix(in srgb, var(--c) calc(18% + var(--live, 0) * 34%), transparent); }
.ui-val { flex: none; width: calc(var(--val) * var(--pt)); text-align: right; font: 400 calc(13 * var(--pt))/1 var(--f-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
/* the fader takes the room it is touched in (--area: on a Mac its track's 22, on a phone the control's 44), its track
   (--fader) in the middle of it */
.ui-fader { position: relative; display: block; min-width: 0; height: calc(var(--area, var(--fader)) * var(--pt)); }
.ui-track { position: absolute; inset: calc((var(--area, var(--fader)) - var(--fader)) / 2 * var(--pt)) 0; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ui-light { position: absolute; inset: 0; background: var(--c); transform-origin: left center; transform: scaleX(0); opacity: .92; }
.ui-mark { position: absolute; left: 50%; top: 30%; bottom: 30%; width: 1.5px; margin-left: -.75px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.ui-knob { position: absolute; left: 50%; top: 50%; width: calc(var(--knob-w) * var(--pt)); height: calc(var(--knob-h) * var(--pt)); border-radius: 999px; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .18); }
.ui-sound.off .ui-name { color: var(--ink-3); }
.ui-sound.off .ui-icon { color: var(--ink-3); }
.ui-sound.off .ui-icon .drop path { fill: color-mix(in srgb, var(--ink-3) 16%, transparent); }
.ui-sound.off .ui-icon::after { content: ""; position: absolute; left: 47%; top: 8%; width: 6%; height: 84%; border-radius: 9px; background: var(--ink-3); transform: rotate(-45deg); }
.ui-sound.off .ui-knob { background: var(--ink-3); }
/* the times along the top, as the app's ruler: each in the middle of a 16-point line at its top (devices.js ruler) */
.ui-ruler { position: relative; z-index: 1; height: calc(24 * var(--pt)); font: 400 calc(11.5 * var(--pt))/calc(16 * var(--pt)) var(--f-sans); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ui-ruler span { position: absolute; top: calc(4 * var(--pt)); transform: translateX(-50%); white-space: nowrap; transition: opacity .12s; }
/* where you are: a white bubble on the listening line, over the times (the ruler sits above the line, so the line runs out from under it; upright, though its rail is an <i>). It rides a rail as wide as the ruler that a
   transform moves (devices.js sets --at on it), so it glides on the GPU instead of the page being laid out every frame */
.ui-ruler .ui-at { position: absolute; left: 0; top: 0; width: 100%; height: 0; font-style: normal; transform: translateX(calc(var(--at, .34) * 100%)); will-change: transform; contain: size layout style; }   /* its time changing each second lays out only the bubble */
.ui-ruler .ui-bubble { left: 0; top: calc(3 * var(--pt)); padding: calc(3 * var(--pt)) calc(7 * var(--pt)); border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; line-height: 1; transition: none; }
.ui-bubble b { font-weight: inherit; }
.ui-lane, .ui-mix { display: block; width: 100%; height: 100%; min-width: 0; }
.ui-rows { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.ui-rows canvas { display: block; width: 100%; height: 100%; min-height: 0; }
/* the listening line: at the left edge of a rail as wide as the pictures, which a transform moves (devices.js sets --at on
   it), so the line glides evenly instead of stepping a pixel at a time (the screens clip what runs past their edge) */
.ui-now { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(calc(var(--at, .34) * 100%)); will-change: transform; pointer-events: none; }
.ui-now::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.75px; width: 1.5px; border-radius: 1px; background: var(--ink); }

/* an example's credit under the head, as the app shows it (MixView SubLine): 13, faint, on one line */
.ui-sub { margin: calc(2 * var(--pt)) 0 calc(16 * var(--pt)); font: 400 calc(13 * var(--pt))/calc(16 * var(--pt)) var(--f-sans); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the Mac: the app's window as it is today (build 12): its list on the left, the page beside it ---------- */
.mac-app { --pt: calc(100cqw / 1180); --control: 40; --small: 30; --val: 40; --fader: 22; --area: 22; --knob-w: 5; --knob-h: 14; --seg: 33; --stage: #1A1917; }
.mw-in { position: relative; aspect-ratio: 1180 / 820; overflow: hidden; border-radius: calc(12 * var(--pt)); background: var(--paper); color: var(--ink); font-family: var(--f-sans);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .42), 0 2.4cqw 7cqw -2cqw rgba(0, 0, 0, .55), 0 .5cqw 1.4cqw -.4cqw rgba(0, 0, 0, .3); }
.mw-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 13%, transparent); pointer-events: none; }
.mw-lights { position: absolute; left: calc(15 * var(--pt)); top: calc(15 * var(--pt)); display: flex; gap: calc(9 * var(--pt)); }
.mw-lights i { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18); }
.mw-lights i:nth-child(2) { background: #FEBC2E; }
.mw-lights i:nth-child(3) { background: #28C840; }
/* the list: the brand and Settings' gear, Add a recording, the examples, the free mixes at its foot with Keep it */
.mw-side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(291 * var(--pt)); display: flex; flex-direction: column; padding: calc(44 * var(--pt)) calc(17 * var(--pt)) calc(16 * var(--pt)); }
.mw-brand { display: flex; align-items: center; gap: calc(9 * var(--pt)); height: calc(32 * var(--pt)); padding-left: calc(2 * var(--pt)); }
.mw-brand b { font: 600 calc(18 * var(--pt))/1 var(--f-sans); letter-spacing: -.01em; }
.mw-mark svg { display: block; width: calc(30 * var(--pt)); height: calc(12 * var(--pt)); }
.mw-gear { margin-left: auto; display: grid; place-items: center; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.mw-gear svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); }
.mw-add { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--pt)); height: calc(37 * var(--pt)); margin-top: calc(14 * var(--pt)); border-radius: calc(9 * var(--pt)); background: var(--ink); color: var(--paper); font: 600 calc(15 * var(--pt))/1 var(--f-sans); }
.mw-add svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.mw-label { margin: calc(26 * var(--pt)) 0 calc(8 * var(--pt)) calc(10 * var(--pt)); font: 600 calc(14 * var(--pt))/1 var(--f-sans); color: var(--ink-3); }
.mw-item { display: flex; align-items: center; gap: calc(12 * var(--pt)); height: calc(56 * var(--pt)); padding: 0 calc(8 * var(--pt)); border-radius: calc(9 * var(--pt)); min-width: 0; }
.mw-item.on { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.mw-tile { flex: none; display: block; width: calc(54 * var(--pt)); height: calc(38 * var(--pt)); padding: calc(4 * var(--pt)) calc(4 * var(--pt)); border-radius: calc(7 * var(--pt)); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.mw-tile canvas { display: block; width: 100%; height: 100%; }
.mw-item > span:last-child { min-width: 0; }
.mw-item b { display: block; font: 500 calc(15.5 * var(--pt))/1.25 var(--f-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-item > span > span { display: block; font: 400 calc(13 * var(--pt))/1.3 var(--f-sans); color: var(--ink-3); white-space: nowrap; }
.mw-free { margin-top: auto; display: flex; flex-direction: column; gap: calc(9 * var(--pt)); }
.mw-free > b { font: 500 calc(15 * var(--pt))/1.2 var(--f-sans); padding-left: calc(2 * var(--pt)); }
.mw-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(9 * var(--pt)); }
.mw-slots i { display: grid; place-items: center; height: calc(30 * var(--pt)); border-radius: calc(7 * var(--pt)); background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink-3); }
.mw-slots svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); }
.mw-keep { display: grid; place-items: center; height: calc(34 * var(--pt)); margin-top: calc(3 * var(--pt)); border-radius: calc(9 * var(--pt)); background: var(--ink); color: var(--paper); font: 600 calc(14 * var(--pt))/1 var(--f-sans); }
/* the page: on its own rounded stage, 8 in from the window; its head (72 tall), an example's credit under it, then the
   player beside the recording's picture under the times, each sound's row beside its own picture, one listening line
   through them all (MixView.swift, PageSize; laid over the app itself, build 12, 30 Oct 2026) */
.mw-stage { position: absolute; left: calc(290 * var(--pt)); top: calc(8 * var(--pt)); right: calc(8 * var(--pt)); bottom: calc(8 * var(--pt)); padding: calc(4 * var(--pt)) calc(28 * var(--pt)) 0;
  border-radius: calc(16 * var(--pt)); background: var(--stage); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.mw-head { display: flex; align-items: center; gap: calc(16 * var(--pt)); height: calc(72 * var(--pt)); }
.mw-head .ui-seg { margin-right: calc(-6 * var(--pt)); padding: calc(3 * var(--pt)); }   /* the switch and Download 10 apart */
.mw-head .ui-seg span { height: calc(26 * var(--pt)); padding: 0 calc(15.5 * var(--pt)); font-size: calc(13.5 * var(--pt)); }
.mw-head .ui-down { height: calc(34 * var(--pt)); font-size: calc(14.5 * var(--pt)); }
.mw-head .ui-down .dl { padding: 0 calc(10 * var(--pt)) 0 calc(11 * var(--pt)); }
.mw-title { flex: 1; min-width: 0; font: 400 calc(34 * var(--pt))/1.2 var(--f-serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-body { position: relative; display: grid; grid-template-columns: calc(248 * var(--pt)) minmax(0, 1fr); column-gap: calc(32 * var(--pt));
  grid-template-rows: calc(24 * var(--pt)) calc(136 * var(--pt)) repeat(var(--rows), calc(98 * var(--pt))); padding-top: calc(10 * var(--pt)); }   /* padding: the credit's margin above doesn't swallow it */
.mw-body > .ui-ruler { grid-column: 2; grid-row: 1; }
/* the player and the recording's picture: 8 under the times, 104 tall (the picture 8 in at top and foot), 24 above the rows */
.mw-body > .ui-player { grid-column: 1; grid-row: 2; align-self: start; height: calc(104 * var(--pt)); margin-top: calc(8 * var(--pt)); }
.mw-body > .ui-mix { grid-column: 2; grid-row: 2; align-self: start; height: calc(88 * var(--pt)); margin-top: calc(16 * var(--pt)); }
.mw-body > .ui-sound { grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; align-content: center; column-gap: calc(12 * var(--pt)); row-gap: calc(10 * var(--pt)); }
/* hear only it: the app's round button, its symbol 15 (the drawing is 16 of its 24) */
.ui-alone { width: calc(var(--small) * var(--pt)); height: calc(var(--small) * var(--pt)); }
.ui-alone svg { width: calc(17.5 * var(--pt)); height: calc(17.5 * var(--pt)); }   /* 15 points */
.mw-body > .ui-sound .ui-fader { grid-column: 1 / -1; }
.mw-body > .ui-lane { grid-column: 2; align-self: center; height: calc(64 * var(--pt)); }
/* one line through the picture and every sound, from the bubble on the times to the last picture's foot */
.mw-body > .ui-now { grid-column: 2; grid-row: 1 / -1; top: calc(10 * var(--pt)); bottom: calc(17 * var(--pt)); }

/* ---------- one column, as the app has it on an iPhone and an iPad (MixView: head, credit, video, oneColumn; SoundRow):
   the name (and back), Music | Voices & sounds and Download, the example's credit, the video, the player, the times over
   the recording's picture, then each sound on one line over its own picture. Sizes are the app's own (PageSize, Size,
   ListSize), laid over the app itself (build 12, 30 Oct 2026); what differs between the two is in their variables ---------- */
.one-col { --control: 44; --small: 32; --val: 36; --fader: 26; --area: 44; --knob-w: 6; --knob-h: 16; --seg: 32; --dl: 40; --stage: #1A1917; }
.pg-head { display: flex; align-items: center; gap: calc(10 * var(--pt)); height: calc(44 * var(--pt)); }
.pg-title { min-width: 0; font: 400 calc(var(--title) * var(--pt))/1.25 var(--f-serif); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-ctl { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--pt)); height: calc(var(--dl) * var(--pt)); margin-top: calc(var(--head-gap) * var(--pt)); }
.pg-ctl .ui-seg { padding: calc(3 * var(--pt)); }
.pg-ctl .ui-seg span { height: calc(var(--seg) * var(--pt) - 6 * var(--pt)); padding: 0 calc(var(--seg-pad) * var(--pt)); font-size: calc(var(--seg-text) * var(--pt)); }
.pg-ctl .ui-down { height: calc(var(--dl) * var(--pt)); font-size: calc(16 * var(--pt)); }
.pg-ctl .ui-down .dl { padding: 0 calc(10 * var(--pt)) 0 calc(11 * var(--pt)); }
.pg-ctl .ui-down .more { width: calc(32 * var(--pt)); }
.one-col .ui-sub { margin-top: calc(14 * var(--pt)); }   /* 12 under the head, and its own 2 */
.pg-video { height: calc(var(--screen) * var(--pt)); margin-bottom: calc(var(--screen-gap) * var(--pt)); border-radius: calc(16 * var(--pt)); overflow: hidden; background: #000; }
.pg-video img, .pg-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.one-col .pg-page > .ui-player { gap: calc(24 * var(--pt)); margin-bottom: calc(6 * var(--pt)); }
/* the times (with where you are) over the recording's picture (8 in at top and foot), its line through them */
.pg-mix { position: relative; display: grid; grid-template-rows: calc(24 * var(--pt)) calc(var(--mixh) * var(--pt)); }
.pg-mix > .ui-mix { height: calc((var(--mixh) - 16) * var(--pt)); margin: calc(8 * var(--pt)) 0; }
.pg-mix > .ui-now { grid-row: 1 / -1; top: calc(10 * var(--pt)); bottom: calc(8 * var(--pt)); }
/* the sounds: every name as wide as the widest (one column for them all), the fader 4 in and 2 short of its neighbours,
   hear it alone in a 44 box, its volume in 36; 8 above each line, 4 between it and its picture, 6 under */
.pg-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto auto; column-gap: calc(10 * var(--pt)); margin-top: calc(6 * var(--pt)); }
.pg-sound { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: calc(4 * var(--pt)); padding: calc(8 * var(--pt)) 0 calc(6 * var(--pt)); }
.pg-sound .ui-sound { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; height: calc(44 * var(--pt)); }
.pg-sound .ui-name { grid-column: 1; grid-row: 1; gap: calc(var(--name-gap) * var(--pt)); margin-left: calc(-2 * var(--pt)); }
.pg-sound .ui-fader { grid-column: 2; grid-row: 1; margin: 0 calc(2 * var(--pt)) 0 calc(4 * var(--pt)); }
.pg-sound .ui-alone { grid-column: 3; grid-row: 1; width: calc(44 * var(--pt)); }
.pg-sound .ui-val { grid-column: 4; grid-row: 1; width: calc(36 * var(--pt)); font-weight: 500; }
.pg-lane { grid-column: 1 / -1; position: relative; height: calc(var(--lane) * var(--pt)); }

/* ---------- the iPhone: the page on its screen (an iPhone 17 Pro, 402 by 874): its status bar, back and the name ---------- */
.phone-app { --pt: calc(100cqw / 402); --title: 28; --head-gap: 12; --seg-pad: 12; --seg-text: 13; --screen: 214; --screen-gap: 18; --mixh: 76; --lane: 46; --name-gap: 10; }
.ph-in { position: relative; display: flex; flex-direction: column; aspect-ratio: 402 / 874; overflow: hidden; padding: 0 calc(16 * var(--pt)); border-radius: 14.5cqw;
  background: var(--stage); color: var(--ink); font-family: var(--f-sans);
  box-shadow: 0 0 0 1.25cqw #0B0B0C, 0 0 0 calc(1.25cqw + 1px) rgba(255, 255, 255, .13), 0 5cqw 12cqw -3cqw rgba(0, 0, 0, .6), 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, .35); }
.ph-in > * { flex: none; }
.ph-status { display: flex; align-items: center; justify-content: space-between; height: calc(62 * var(--pt)); padding: 0 calc(26 * var(--pt)) 0 calc(36 * var(--pt)); }
.ph-status b { font: 600 calc(17 * var(--pt))/1 var(--f-sans); letter-spacing: -.01em; }
.ph-system { display: flex; align-items: center; gap: calc(5.5 * var(--pt)); }
.ph-system svg { height: calc(11.5 * var(--pt)); width: auto; fill: currentColor; }
.ph-system svg:last-child { height: calc(12.5 * var(--pt)); }
.ph-in .pg-head { margin-top: calc(6 * var(--pt)); }
.ph-glass { display: inline-flex; align-items: center; justify-content: center; flex: none; height: calc(44 * var(--pt)); border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ph-glass.round { width: calc(44 * var(--pt)); }
.ph-glass svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
.ph-home { position: absolute; left: 50%; bottom: calc(8 * var(--pt)); width: calc(139 * var(--pt)); height: calc(5 * var(--pt)); margin-left: calc(-69.5 * var(--pt)); border-radius: 999px; background: var(--ink); opacity: .85; }

/* ---------- the iPad: the list beside the page on its stage (an iPad Pro 11-inch upright, 834 by 1210) ---------- */
.pad-app { --pt: calc(100cqw / 834); --title: 34; --head-gap: 10; --seg-pad: 15.4; --seg-text: 13.5; --screen: 290; --screen-gap: 22; --mixh: 84; --lane: 52; --name-gap: 13; }
.pd-in { position: relative; aspect-ratio: 834 / 1210; overflow: hidden; border-radius: calc(18 * var(--pt)); background: var(--paper); color: var(--ink); font-family: var(--f-sans);
  box-shadow: 0 0 0 calc(10 * var(--pt)) #0B0B0C, 0 0 0 calc(10 * var(--pt) + 1px) rgba(255, 255, 255, .13), 0 5cqw 12cqw -3cqw rgba(0, 0, 0, .6), 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, .35); }
.pd-status { position: absolute; left: 0; right: 0; top: 0; height: calc(32 * var(--pt)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20 * var(--pt)) 0 calc(18 * var(--pt)); font: 600 calc(14.5 * var(--pt))/1 var(--f-sans); }
.pd-status span { font-weight: 500; margin-left: calc(6 * var(--pt)); }
.pd-status .ph-system svg { height: calc(11.5 * var(--pt)); }
/* the list: 320 wide, its brand, Add a recording (48), the examples, the free mixes and Keep it (44) at its foot */
.pd-side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(320 * var(--pt)); display: flex; flex-direction: column; padding: calc(46 * var(--pt)) calc(16 * var(--pt)) calc(26 * var(--pt)); }
.pd-side .mw-brand { height: calc(40 * var(--pt)); gap: calc(10 * var(--pt)); padding-left: calc(1 * var(--pt)); }
.pd-side .mw-brand b { font-size: calc(19 * var(--pt)); }
.pd-side .mw-mark svg { width: calc(36 * var(--pt)); height: calc(14.4 * var(--pt)); }
.pd-side .mw-gear { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); }
.pd-side .mw-gear svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.pd-side .mw-add { height: calc(48 * var(--pt)); margin-top: calc(16 * var(--pt)); border-radius: calc(13 * var(--pt)); font-size: calc(16 * var(--pt)); }
.pd-side .mw-add svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.pd-side .mw-label { margin: calc(20 * var(--pt)) 0 calc(8 * var(--pt)) calc(2 * var(--pt)); font-size: calc(14.5 * var(--pt)); }
.pd-side .mw-item { height: calc(56 * var(--pt)); margin: 0 calc(-6 * var(--pt)); padding: 0 calc(10 * var(--pt)); gap: calc(11 * var(--pt)); border-radius: calc(10 * var(--pt)); }
.pd-side .mw-tile { width: calc(56 * var(--pt)); height: calc(40 * var(--pt)); }
.pd-side .mw-item b { font-size: calc(16 * var(--pt)); }
.pd-side .mw-item > span > span { font-size: calc(13 * var(--pt)); }
.pd-side .mw-free > b { font-size: calc(15 * var(--pt)); }
.pd-side .mw-slots i { height: calc(28 * var(--pt)); }
.pd-side .mw-keep { height: calc(44 * var(--pt)); margin-top: calc(6 * var(--pt)); border-radius: calc(12 * var(--pt)); font-size: calc(15 * var(--pt)); }
/* the stage: 8 in from the screen's edges, under the status bar, 26-point corners; its page 20 in from its sides */
.pd-stage { position: absolute; left: calc(320 * var(--pt)); top: calc(40 * var(--pt)); right: calc(8 * var(--pt)); bottom: calc(8 * var(--pt)); overflow: hidden; border-radius: calc(26 * var(--pt));
  background: var(--stage); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pd-stage .pg-page { padding: calc(18.5 * var(--pt)) calc(20 * var(--pt)) 0; }

/* ---------- the iPad sideways (1210 by 834): the list, then the page in two columns as on a Mac, in the iPad's sizes:
   a 20-point gutter, rows 110 tall (a 44 line over a 26 fader), the switch 32 and Download 40 (laid over the app) ---------- */
.pad-wide { --pt: calc(100cqw / 1210); --control: 44; --small: 32; --val: 40; --fader: 26; --area: 26; --knob-w: 6; --knob-h: 16; --seg: 32; }
.pad-wide .pd-in { aspect-ratio: 1210 / 834; }
.pw-page { padding: calc(4 * var(--pt)) calc(20 * var(--pt)) 0; }
.pad-wide .mw-head .ui-seg span { height: calc(30 * var(--pt)); padding: 0 calc(15 * var(--pt)); font-size: calc(13.5 * var(--pt)); }
.pad-wide .mw-head .ui-down { height: calc(40 * var(--pt)); font-size: calc(16 * var(--pt)); }
.pad-wide .mw-head .ui-down .dl { padding: 0 calc(11 * var(--pt)) 0 calc(12 * var(--pt)); }
.pad-wide .mw-head .ui-down .more { width: calc(32 * var(--pt)); }
.pad-wide .mw-body { grid-template-rows: calc(24 * var(--pt)) calc(136 * var(--pt)) repeat(var(--rows), calc(110 * var(--pt))); }
.pad-wide .mw-body > .ui-sound { row-gap: calc(10 * var(--pt)); }
.pad-wide .mw-body > .ui-sound .ui-name { min-height: calc(44 * var(--pt)); }
.pad-wide .mw-body > .ui-lane { height: calc(72 * var(--pt)); }
.pad-wide .mw-body > .ui-now { bottom: calc(19 * var(--pt)); }

/* ---------- the app's icon, and Apple's badges ---------- */
.app-icon { display: block; flex: none; width: var(--icon, 64px); height: var(--icon, 64px); filter: drop-shadow(0 calc(var(--icon, 64px) * .06) calc(var(--icon, 64px) * .14) rgba(0, 0, 0, .34)); }
.app-icon .ai-sweep { transform: translateX(0); }
.app-icon.run .ai-sweep { animation: ai-sweep 2.6s var(--ease-io) .25s both; }
@keyframes ai-sweep { from { transform: translateX(0); } to { transform: translateX(72px); } }
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store-badge { display: block; flex: none; border-radius: 10px; line-height: 0; }
.store-badge img { display: block; height: var(--badge, 48px); width: auto; }
.store-badge:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .app-icon.run .ai-sweep { animation: none; } }