/* JOV Control's window on its landing page (web/get/live.css has the stage): an iPad in landscape
   beside a Mac. A tap is a ripple on the pad; its result shows on the Mac. Sizes in canvas em. */
.lv-control { --wall: #5b3220; --wall-2: #b06a3b; --k: #b85c2c; --pad: #f4f1ec; --pad-2: #ebe6de; --pad-ink: #2b2723; }
@media (prefers-color-scheme: dark) { .lv-control { --wall: #2a170e; --wall-2: #6b3d20; --pad: #1f1c19; --pad-2: #2a2622; --pad-ink: #f1ece6; } }
.lv-control .lv-fit { aspect-ratio: 112 / 56; }
.lv-control .lv-cv { height: 56em; }
.p-pad { position: absolute; left: 4em; top: 8.5em; width: 52em; height: 39em; padding: 1.6em; border-radius: 3em; background: #1b1b1d; box-shadow: 0 2em 4em -1.6em rgb(0 0 0 / 0.6); }
.p-ui { display: flex; height: 100%; overflow: hidden; border-radius: 1.6em; background: var(--pad); color: var(--pad-ink); transition: opacity var(--m-base); }
.lv-cv:not(.k-pair) .p-ui { opacity: 0.25; }
.p-side { display: grid; align-content: start; gap: 0.3em; width: 12em; padding: 1.4em 1em; border-right: 1px solid var(--pad-2); font-size: 1.1em; }
.p-side b { margin-bottom: 0.8em; letter-spacing: 0.15em; }
.p-side em { display: block; color: var(--w-mut); font-size: 0.7em; font-style: normal; }
.p-side span { padding: 0.35em 0.5em; border-radius: 0.4em; }
.p-side i { margin-right: 0.6em; color: var(--w-mut); font: 0.8em var(--font-mono); }
.p-side .on { box-shadow: inset 0.2em 0 0 var(--k); }
.p-con { margin-top: 6em; color: var(--w-mut); }
.p-con::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; border-radius: 50%; background: #b9b2a8; }
.k-pair .p-con::before { background: #2e9b57; }
.p-main { flex: 1; padding: 1.6em 1.8em; }
.p-main > small { color: var(--w-mut); font-size: 1em; letter-spacing: 0.08em; text-transform: uppercase; }
.p-title { display: block; margin: 0.1em 0 0.6em; font: 700 2.4em/1.2 var(--display); }
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.p-t { position: relative; display: grid; align-content: start; gap: 0.3em; min-height: 10em; padding: 1em 1.1em; overflow: hidden; border-radius: 1em; background: var(--pad-2); font-size: 1.2em; font-weight: 600; }
.p-t small { color: var(--w-mut); font-size: 0.75em; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.p-t::after { content: ""; position: absolute; left: 50%; top: 55%; width: 6em; height: 6em; margin: -3em 0 0 -3em; border-radius: 50%; background: var(--k); opacity: 0; transform: scale(0.2); pointer-events: none; }
.k-vol .p-vol::after, .k-play .p-play::after, .k-shot .p-shot::after, .k-app .p-app::after, .k-flow .p-flow::after, .k-lock .p-lock::after { animation: p-tap 650ms var(--ease-out); }
@keyframes p-tap { 0% { opacity: 0.35; transform: scale(0.2); } 100% { opacity: 0; transform: scale(2.4); } }
.p-vol b { font: 300 2.6em/1 var(--display); }
.p-vol i { position: relative; display: block; height: 0.4em; margin-top: 0.6em; border-radius: 0.2em; background: var(--pad); }
.p-vol em { position: absolute; inset: 0; border-radius: inherit; background: var(--k); transform: scaleX(0.7); transform-origin: left; transition: transform 700ms var(--ease-out); }
.lv-cv:not(.k-vol) .p-vol em { transform: scaleX(0.4); }
.p-pp svg { width: 2.2em; height: 2.2em; padding: 0.5em; border: 2px solid var(--k); border-radius: 50%; color: var(--k); }
.p-pp .i-pause, .k-play .p-pp .i-play { display: none; }
.k-play .p-pp .i-pause { display: block; }
.p-app .dk-mail { position: relative; width: 2.4em; height: 2.4em; border-radius: 0.6em; }
.p-flow ol { display: grid; gap: 0.15em; margin: 0.3em 0 0; padding: 0; list-style: none; font-size: 0.85em; font-weight: 500; }
.p-flow li { display: flex; align-items: center; gap: 0.3em; white-space: nowrap; opacity: 0.5; transition: opacity var(--m-base); }
.p-flow li svg { width: 1.2em; height: 1.2em; color: #2e9b57; opacity: 0; transition: opacity var(--m-base); }
.k-flow .p-flow li { opacity: 1; }
.k-flow .p-flow li svg { opacity: 1; }
.p-flow li:nth-child(2), .p-flow li:nth-child(2) svg { transition-delay: 300ms; } .p-flow li:nth-child(3), .p-flow li:nth-child(3) svg { transition-delay: 600ms; }
.p-lock svg { width: 2em; height: 2em; }
.p-code, .p-ask { position: absolute; left: 50%; top: 50%; display: grid; gap: 0.5em; justify-items: center; width: 30em; padding: 2em; border-radius: 1.4em; background: var(--pad); color: var(--pad-ink);
  box-shadow: 0 1.6em 3em -1em rgb(0 0 0 / 0.4); font-size: 1.2em; text-align: center; transform: translate(-50%, -50%); transition: opacity var(--m-base), transform var(--m-base) var(--ease-pop); }
.p-code strong { min-height: 1.3em; font: 600 2.6em/1.3 var(--font-mono); letter-spacing: 0.3em; }
.k-pair .p-code, .lv-cv:not(.k-lock) .p-ask, .k-lockx .p-ask { opacity: 0; transform: translate(-50%, -46%) scale(0.95); pointer-events: none; }
.p-ask span { display: flex; gap: 1em; }
.p-ask i { padding: 0.4em 1.4em; border-radius: 0.6em; background: var(--pad-2); font-style: normal; font-weight: 600; }
.p-ask i + i { background: var(--k); color: #fff; }
.p-ask i:first-child { transition: background-color var(--m-fast), color var(--m-fast); }
.k-cancel .p-ask i:first-child { background: var(--pad-ink); color: var(--pad); }
.lv-cv.k-lock:not(.k-lockx) .p-ui { opacity: 0.45; }
.m-mac { position: absolute; left: 60em; top: 11.5em; width: 49em; }
.m-screen { position: relative; height: 31em; overflow: hidden; border: 0.8em solid #1b1b1d; border-radius: 1.4em 1.4em 0 0; background: linear-gradient(160deg, #e7b98f, #9b5c3a); }
.m-base { height: 1.4em; margin: 0 -3em; border-radius: 0 0 1.4em 1.4em; background: linear-gradient(#d4d4d8, #a1a1a6); }
.m-bar { display: flex; gap: 1.4em; align-items: center; height: 1.8em; padding: 0 1em; background: rgb(255 255 255 / 0.4); color: #1d1d1f; font-size: 0.95em; }
.m-now { margin-left: auto; opacity: 0.4; } .m-now::before { content: "▶ "; }
.k-play .m-now { opacity: 1; }
.m-win { position: absolute; display: grid; grid-template-rows: 1.8em 1fr; width: 26em; height: 17em; overflow: hidden; border-radius: 0.6em; background: #fff; color: #1d1d1f; box-shadow: 0 0.8em 1.6em -0.6em rgb(0 0 0 / 0.5); font-size: 1em;
  transition: transform var(--m-slow) var(--ease-out), z-index 0s var(--m-base); }
.m-win > i { position: relative; background: #ececef radial-gradient(circle, #ff5f57 0.28em, transparent 0.32em) 0.5em 50% / 1em 1em no-repeat; }
.m-win > i u { position: absolute; left: 30%; right: 30%; top: 0.35em; bottom: 0.35em; border-radius: 0.3em; background: #fff; }
.m-web { display: grid; align-content: start; gap: 0.5em; padding: 1.2em 1.4em; }
.m-web b { font: 700 1.6em/1.1 var(--display); }
.m-web span { height: 0.45em; border-radius: 0.2em; background: #d9d9de; }
.m-web span + span { width: 70%; }
.m-web em { height: 6.4em; margin-top: 0.4em; border-radius: 0.4em; background: linear-gradient(160deg, #8fc1e8, #3f7fb8 60%, #2f5e3b); }
.m-inbox { display: grid; align-content: start; }
.m-inbox span { display: grid; padding: 0.55em 1em; border-bottom: 1px solid #ececef; color: #6e6e73; font-size: 0.95em; white-space: nowrap; }
.m-inbox span:first-child { background: #2f6fde; color: #dce7ff; }
.m-inbox b { color: #1d1d1f; font-size: 1.1em; }
.m-inbox span:first-child b { color: #fff; }
.m-ml, .k-app .m-fn { display: none; }
.k-app .m-ml { display: inline; }
.m-safari { left: 3em; top: 4em; z-index: 2; }
.m-mail { left: 18em; top: 7em; z-index: 1; transform: scale(0.96); }
.k-app .m-mail { z-index: 3; transform: none; }
.m-pair { position: absolute; left: 50%; top: 48%; z-index: 5; display: grid; justify-items: center; padding: 1em 2em; border-radius: 0.8em; background: rgb(250 250 252 / 0.96); color: #1d1d1f; font-size: 1.1em;
  transform: translate(-50%, -50%); transition: opacity var(--m-base); }
.m-pair strong { font: 600 1.8em var(--font-mono); letter-spacing: 0.1em; }
.k-pair .m-pair { opacity: 0; }
.m-hud { position: absolute; left: 50%; bottom: 5em; z-index: 6; display: grid; justify-items: center; gap: 0.6em; width: 9em; padding: 1.2em; border-radius: 1.2em; background: rgb(40 40 44 / 0.75);
  opacity: 0; transform: translate(-50%, 1em); transition: opacity var(--m-fast), transform var(--m-base) var(--ease-pop); }
.m-hud span { width: 2.4em; height: 2em; background: #fff; clip-path: polygon(0 30%, 30% 30%, 60% 0, 60% 100%, 30% 70%, 0 70%); }
.m-hud i { position: relative; display: block; width: 100%; height: 0.4em; border-radius: 0.2em; background: rgb(255 255 255 / 0.3); }
.m-hud em { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0.7); transform-origin: left; }
.k-vol:not(.k-volx) .m-hud { opacity: 1; transform: translate(-50%, 0); }
.m-flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.k-shot .m-flash { animation: m-flash 400ms ease-out; }
@keyframes m-flash { 20% { opacity: 0.9; } }
.m-thumb { position: absolute; right: 1em; bottom: 4.6em; z-index: 6; width: 8em; height: 5em; border: 0.25em solid #fff; border-radius: 0.4em; background: linear-gradient(160deg, #e7b98f, #9b5c3a);
  box-shadow: 0 0.4em 1em rgb(0 0 0 / 0.4); opacity: 0; transform: translateX(10em); transition: transform var(--m-slow) var(--ease-out) 300ms, opacity var(--m-fast) 300ms; }
.k-shot .m-thumb { opacity: 1; transform: none; }
.m-note { position: absolute; right: 0.8em; top: 2.4em; z-index: 6; display: grid; width: 13em; padding: 0.6em 0.9em; border-radius: 0.8em; background: rgb(250 250 252 / 0.95); color: #1d1d1f; font-size: 1em;
  opacity: 0; transform: translateX(110%); transition: transform var(--m-slow) var(--ease-out) 800ms, opacity var(--m-base) 800ms; }
.k-flow .m-note { opacity: 1; transform: none; }
.m-dock { position: absolute; left: 50%; bottom: 0.6em; display: flex; gap: 0.5em; padding: 0.4em; border-radius: 0.8em; background: rgb(255 255 255 / 0.35); transform: translateX(-50%); }
.m-dock i { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.6em; background: rgb(255 255 255 / 0.85); }
.m-dock .m-finder { background: linear-gradient(90deg, #3d8ef7 50%, #a9d3ff 50%); }
.m-finder::before { content: ""; width: 1.1em; height: 0.5em; margin-top: 0.7em; border: solid #1d1d1f; border-width: 0 0 0.15em; border-radius: 0 0 1em 1em; }
.m-dock .m-sf { background: radial-gradient(circle, #fff 0 0.15em, #1f8df2 0.2em 0.85em, #fff 0.9em 1em, #1f8df2 1.05em); }
.m-sf::before { content: ""; width: 0.25em; height: 1.4em; background: linear-gradient(#e8453c 50%, #fff 50%); transform: rotate(45deg); }
.m-cal { overflow: hidden; background: #fff linear-gradient(#e8453c 0 0) 0 0 / 100% 0.7em no-repeat !important; }
.m-cal b { margin-top: 0.5em; color: #1d1d1f; font: 600 1.15em/1 var(--display); }
.m-dock .m-mailicon { background: linear-gradient(#5ac8fa, #1a7cf0); }
.m-dock .m-mus { background: linear-gradient(160deg, #ff6a88, #fa233b); }
.m-mus::before { content: "♪"; color: #fff; font-size: 1.5em; line-height: 1; }
.k-app .m-mailicon { animation: lv-bounce 700ms var(--ease-out); }
.lv-control .lv-cv.is-close .p-ui, .lv-control .lv-cv.is-close .m-screen > * { opacity: 0; transition: opacity var(--m-base); }

@media (max-width: 639px) {
  .lv-control .lv-fit { aspect-ratio: 4 / 5; }
  .lv-control .lv-cv { height: 50em; }
  .p-pad { left: 0.6em; top: 3em; width: 38.8em; height: 29em; padding: 1em; border-radius: 2em; }
  .p-side { display: none; }
  .p-main { padding: 1em 1.2em; }
  .p-t { min-height: 7.6em; font-size: 1.1em; }
  .p-code, .p-ask { width: 28em; padding: 1.4em; }
  .m-mac { left: 37em; top: 65.6em; width: 40em; font-size: 0.5em; }
}

/* Beside "Choose the controls and arrange them": six tiles that swap places once. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow: hidden; padding: 24px; border-radius: 16px; background: var(--bg-alt); }
.ti { display: grid; place-items: center; min-height: 84px; padding: 8px; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--line); font-size: 15px; font-weight: 600; text-align: center; }
.ti1, .ti4 { background: #b85c2c; color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .tiles:not(.is-now) .ti { transition: transform 700ms var(--ease-inout); }
  html.js .tiles:not(.is-in) .ti1 { transform: translate(calc(200% + 24px), calc(100% + 12px)); }
  html.js .tiles:not(.is-in) .ti6 { transform: translate(calc(-200% - 24px), calc(-100% - 12px)); }
  html.js .tiles:not(.is-in) .ti3 { transform: translateX(calc(-100% - 12px)); }
  html.js .tiles:not(.is-in) .ti2 { transform: translateX(calc(100% + 12px)); }
}

/* Beside the first row: the pad on an iPad held upright. A touch is a soft circle, not a pointer. */
.lv-padv { --k: #b85c2c; --pad: #f4f1ec; --pad-2: #e6e0d7; --pad-ink: #2b2723; --wall: #5b3220; --wall-2: #b06a3b; max-width: 380px; }
@media (prefers-color-scheme: dark) { .lv-padv { --pad: #1f1c19; --pad-2: #342f2a; --pad-ink: #f1ece6; } }
.lv-padv .lv-fit { aspect-ratio: 40 / 46; background: radial-gradient(80% 70% at 85% 0%, var(--wall-2), transparent 70%), var(--wall); }
.lv-cv.lv-cv-pad { width: 40em; height: 46em; font-size: calc(100cqw / 40); background: none; }
.v-pad { position: absolute; inset: 2em 2.4em; padding: 1.1em; border-radius: 3em; background: #1b1b1d; box-shadow: 0 2em 4em -1.6em rgb(0 0 0 / 0.6); }
.v-ui { height: 100%; padding: 0 1.6em; overflow: hidden; border-radius: 2em; background: var(--pad); color: var(--pad-ink); transition: opacity var(--m-base); }
.lv-padv .lv-cv.is-close .v-ui { opacity: 0; }
.v-nav { display: flex; align-items: center; gap: 1.4em; height: 3.6em; border-bottom: 1px solid var(--pad-2); font-size: 1.15em; white-space: nowrap; }
.v-nav b { letter-spacing: 0.2em; }
.v-nav .on { box-shadow: 0 0.6em 0 -0.4em var(--k); }
.v-crumb { display: block; margin-top: 1.2em; color: var(--w-mut); font-size: 0.95em; letter-spacing: 0.08em; text-transform: uppercase; }
.v-h { display: block; font: 700 2.4em/1.2 var(--display); }
.v-sec { margin-top: 1.1em; padding-top: 1em; border-top: 1px solid var(--pad-2); font-size: 1.15em; }
.v-sec > small, .v-sec small { display: block; color: var(--w-mut); font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; }
.v-vol { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 0.4em; }
.v-vol strong { font: 300 2.8em/1 var(--display); font-variant-numeric: tabular-nums; }
.v-track { position: relative; display: block; width: 25.6em; height: 0.45em; margin: 1.1em 0 0.4em; border-radius: 0.3em; background: var(--pad-2); }
.v-track em { position: absolute; inset: 0; border-radius: inherit; background: var(--k); transform: scaleX(0.4); transform-origin: left; transition: transform 700ms var(--ease-out); }
.vs-thumb { position: absolute; left: -0.8em; top: 50%; width: 1.6em; height: 1.6em; margin-top: -0.8em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.4em rgb(0 0 0 / 0.4); transform: translateX(10.24em); transition: transform 700ms var(--ease-out); }
.v-up .v-track em { transform: scaleX(0.65); }
.v-up .vs-thumb { transform: translateX(16.64em); }
.v-med { display: flex; align-items: center; justify-content: space-between; }
.v-song { display: block; font-size: 1.2em; }
.v-on, .v-mus .v-none { display: none; }
.v-mus .v-on { display: inline; }
.v-keys { display: flex; gap: 0.6em; }
.v-keys i { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--pad-2); color: var(--pad-ink); font-style: normal; transition: transform var(--m-fast), background-color var(--m-fast); }
.v-keys i:first-child::before { content: "\00AB"; } .v-keys i:last-child::before { content: "\00BB"; }
.vm-pp { box-shadow: inset 0 0 0 2px var(--k) !important; color: var(--k) !important; }
.vm-pp svg { width: 1.2em; height: 1.2em; }
.vm-pp .i-pause, .v-mus .vm-pp .i-play { display: none; }
.v-mus .vm-pp .i-pause { display: block; }
.v-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; }
.v-shot, .v-bri { position: relative; display: grid; align-content: start; gap: 0.5em; }
.v-shot small { text-transform: none; letter-spacing: 0; }
.vc-cap { justify-self: start; border-radius: 2em; box-shadow: inset 0 0 0 1px var(--k); color: var(--k); }
.v-chip { display: inline-flex; align-items: center; gap: 0.3em; color: #2e9b57; font-style: normal; font-weight: 600; opacity: 0; transform: translateY(0.4em); transition: opacity var(--m-base), transform var(--m-base) var(--ease-out); }
.v-chip svg { width: 1.1em; height: 1.1em; }
.v-cap .v-chip { opacity: 1; transform: none; }
.v-level { position: relative; display: block; height: 0.45em; margin: 0.4em 0; border-radius: 0.3em; background: var(--pad-2); }
.v-level em { position: absolute; inset: 0; border-radius: inherit; background: #e3a008; transform: scaleX(0.45); transform-origin: left; transition: transform 700ms var(--ease-out); }
.v-lit .v-level em { transform: scaleX(0.75); }
.v-bb { display: flex; gap: 0.4em; }
.v-bb .lv-btn { border-radius: 2em; box-shadow: inset 0 0 0 1px var(--pad-2); font-size: 1em; }
.v-flash { position: absolute; inset: 0; z-index: 10; background: #fff; opacity: 0; pointer-events: none; }
.lv-cv:not(.is-done).v-cap .v-flash { animation: m-flash 400ms ease-out; }
.lv-padv .lv-ptr { width: 3.4em; height: 3.4em; margin: -1.4em 0 0 -1.4em; border-radius: 50%; background-color: rgb(255 255 255 / 0.3); box-shadow: 0 0 0 0.2em rgb(255 255 255 / 0.65); filter: none;
  transition: transform var(--m-slow) var(--ease-inout), opacity var(--m-base), background-color var(--m-fast); }
.lv-padv .lv-ptr svg { display: none; }
.lv-padv .lv-ptr.is-down { background-color: rgb(184 92 44 / 0.5); }
@media (max-width: 639px) {
  .lv-padv .lv-fit { aspect-ratio: 40 / 46; }
  .lv-cv.lv-cv-pad { width: 40em; height: 46em; }
}