/*! Devices.css v0.2.0 | MIT License | github.com/picturepan2/devices.css */
/* Copyright (c) 2017 Yan Zhu. Licensed under the MIT License; the full
   text is at github.com/picturepan2/devices.css/blob/master/LICENSE.

   TRIMMED VENDOR COPY, not the published bundle. Taken from
   dist/devices.min.css of v0.2.0 (package.json 0.2.0, the last commit
   on master, 2022-09-18; the repo carries no git tag for it), which is
   50,506 bytes for sixteen devices. The landing's "how it works" bento
   shows the owner's admin, a desktop view in the real product, and a
   laptop is what makes a desktop screen read as software rather than a
   card, so this file keeps only:

     the shared base (.device and its frame and screen rules), the same
     three rules static/devices-iphone-14-pro.css carries, and
     the MacBook Pro in its default silver finish (#0d0d0d lid, #c8cacb
     ring, #e2e3e4 base) with every part it draws: the frame, the lip
     under the screen (the frame's ::after), the camera notch (header
     and the two rounded shoulders its pseudo-elements cut), the screen,
     and the base (power, with the thumb notch its ::after draws and the
     two hinge marks its ::before casts by box-shadow).

   Dropped: the other fifteen devices, which include the older
   .device-macbook-pro-2018 and the plain .device-macbook that share
   this one's name, and this model's .device-spacegray finish, which the
   page does not use. Declarations are the upstream ones verbatim,
   reflowed one rule per line, with ONE edit, the phone file's, carried
   one level further: upstream's `.device *` is narrowed to `.device > *`
   and `.device > .device-frame > *`. Upstream blockifies every
   descendant of the device so that an <img> or <iframe> screen sits
   flush; here the screen holds a hand-built admin page with inline text,
   which a universal display:block would break line by line. The phone
   file stops at the device's direct children because its screen has no
   border and so never depended on box-sizing; this screen carries a 2px
   border inside a 600px slot, and border-box is what keeps it 600 wide
   rather than 604, so the frame's own children are covered too. Nothing
   inside the screen is. When both device files are linked on one page
   the base rules are declared twice with identical values, which the
   cascade resolves to the same result.

   The second edit, the phone file's too: every rule sits inside one
   @supports gate on the CSS length division tan(atan2(<length>, 740px))
   that the landing scales the device with. A browser without trig over
   lengths would drop that one declaration and keep the rest, leaving a
   740px laptop in a 500px cell; the gate makes the sheet stand or fall
   with the division, so where the scale cannot be computed no laptop
   is drawn and the tile's own screen-only fragment shows instead. The
   probe uses 740px, this device's width, so the gate and the scaling
   rule ask the browser the same question. The rule lines are
   unindented so they stay byte-for-byte what upstream wrote.

   GEOMETRY, for whoever scales it: the device is 740 by 434 outside.
   The lid (frame) is 618 by 418 and centred, so it starts 61px in from
   each side; its padding is 9px at the top and sides and 23px at the
   foot, where the ::after lip is. The screen is 600 by 375 as a
   border-box, so the picture inside its 2px border is 596 by 371, with
   its top-left corner at (72, 11) in device coordinates. The base
   (power) is the full 740 wide and 24 tall and overlaps the lid by 10px
   (its negative top margin), which is why 418 + 24 - 10 leaves 2px of
   slack under the 434. The camera notch is 64 by 12, centred, at the
   top of the picture. All fixed-pixel by design: the device expects to
   be scaled as a whole, and how the landing does that lives beside its
   markup in landing.html, not here. Nothing in this file is themed: a
   laptop is the same object on any page, so its colours are its own and
   stay hardcoded. */
@supports (scale: tan(atan2(100cqw, 740px))) {
.device, .device::before, .device::after, .device > *, .device > .device-frame > *, .device ::before, .device ::after { box-sizing: border-box; display: block }
.device { position: relative; transform: scale(1); z-index: 1 }
.device .device-frame { z-index: 1 }
.device .device-screen { background-color: #000; background-position: center center; background-size: cover; object-fit: cover; position: relative }
.device-macbook-pro { height: 434px; width: 740px }
.device-macbook-pro .device-frame { background: #0d0d0d; border-radius: 20px; box-shadow: inset 0 0 0 2px #c8cacb; height: 418px; margin: 0 auto; padding: 9px 9px 23px 9px; position: relative; width: 618px }
.device-macbook-pro .device-frame::after { background: linear-gradient(to bottom,#272727,#0d0d0d); border-radius: 0 0 20px 20px; bottom: 2px; content: ""; height: 24px; left: 2px; position: absolute; width: 614px }
.device-macbook-pro .device-header { background: #0d0d0d; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; height: 12px; left: 50%; margin-left: -32px; position: absolute; top: 11px; width: 64px; z-index: 2 }
.device-macbook-pro .device-header::after, .device-macbook-pro .device-header::before { content: ""; height: 4px; position: absolute; top: 0; width: 4px }
.device-macbook-pro .device-header::after { background: radial-gradient(circle at bottom left,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%); left: -4px }
.device-macbook-pro .device-header::before { background: radial-gradient(circle at bottom right,transparent 0,transparent 75%,#0d0d0d 75%,#0d0d0d 100%); right: -4px }
.device-macbook-pro .device-screen { border: 2px solid #121212; border-radius: 10px 10px 0 0; height: 375px; width: 600px }
.device-macbook-pro .device-power { background: radial-gradient(circle at center,#e2e3e4 85%,#c8cacb 100%); border: solid #a0a3a7; border-radius: 2px 2px 12px 12px; border-width: 1px 2px 0 2px; box-shadow: inset 0 -2px 8px 0 #6c7074; height: 24px; margin-top: -10px; position: relative; width: 740px; z-index: 9 }
.device-macbook-pro .device-power::after { background: #e2e3e4; border-radius: 0 0 10px 10px; box-shadow: inset 0 0 4px 2px #babdbf; content: ""; height: 10px; left: 50%; margin-left: -60px; position: absolute; top: 0; width: 120px }
.device-macbook-pro .device-power::before { background: 0 0; border-radius: 0 0 3px 3px; bottom: -2px; box-shadow: -300px 0 #272727,300px 0 #272727; content: ""; height: 2px; left: 50%; margin-left: -20px; position: absolute; width: 40px }
}