/* ==========================================================================
   PostureCo device kit, part 2: pure-CSS 3D MacBook Pro (silver, 16" display)
   and a flat-front blue iMac 24".  No images, no libraries: transforms only.
   Companion script (optional): devices-mac.js -> window.MacDevice.

   USE THIS RENDERED KIT ONLY WHERE THE DEVICE MOVES (lid opens/closes, yaw
   fly-ins). A device that just sits there uses Apple's official product
   bezel instead: assets/kit/devices-apple.css (.abz). Joe, Oct 10 2026 Loom
   (WEB-155): "on static images of these devices use the real media supplied
   to us from Apple"; "those are opening up, so those have to be rendered."

   --------------------------------------------------------------------------
   SIZE   .mbp / .imac are sized by ONE property and everything inside scales
          (1em inside the stage = 1% of the device width):
            --mbp-w   width of the MacBook box   (default min(1100px, 92vw))
            --imac-w  width of the iMac box      (default min(900px, 92vw))
          Any length works (px, vw, %, 100%...). The box keeps its own aspect
          ratio (--mbp-ar / --imac-ar) so the open laptop always fits.

   POSE   (unitless numbers; animatable, they are registered with @property)
            --open  0 = closed slab, 1 = fully open (lid at --mbp-max deg, 112)
            --tilt  camera height in degrees: 14 = Apple "closer look" above-front
                    view (default); 0 = straight-on front view. Modifier
                    .mbp--front sets --tilt:0 and stops the lid at 92deg so
                    the screen faces the camera square (screenshots undistorted).
            --yaw   turn around the vertical axis in degrees (3/4 fly-ins:
                    negative values bring the right side forward). .mbp--yaw = -26.
          The screen is black until --open .32 and fully lit by .6. Like the real
          hinge, the lid slides back (--open .45-.7) and its lower edge then drops
          behind the base (.7-1), so the chin stays short.
          Other knobs: --mbp-max (lid angle at 1), --mbp-zoom, --mbp-dx, --mbp-floor,
          --mbp-ar, --mbp-persp. .mbp--yaw = 3/4 hero pose (zoomed so it stays
          inside its box).

   SCREEN (shared by .mbp and .imac): ONE full-bleed view, nothing else.
          Joe (Oct 10 Loom): "the browser maximized to the dimensions … behind
          this little camera notch". The media IS the whole display: a maximized
          browser whose own top bar (the macOS menu bar + the Safari toolbar,
          drawn into the media) runs under the notch. No wallpaper, menu bar, floating window,
          window toolbar, margins or Dock.
            .mbp__screen > .mbp__view > stacked layers (<img>, <picture>,
                                        <video>, <div>)
          The layers fill the display edge to edge (object-fit: cover,
          top-aligned). The child with .is-active shows; the others fade out
          (.5s; none under reduced motion). No .is-active -> the first child.
          MacBook display = the 16" MacBook Pro panel, 1496 x 967 points
          (ratio 1.547): ship 1496 x 967 stills / 1.547 video and nothing is
          cropped. The notch (.mbp .mbp__screen::before) sits over the top
          centre, proportioned like the real 16" notch (10.7% of the display
          width, 63 of 2234 px tall), so the media keeps its menu bar's
          centre empty. iMac display = 16:9 (4480 x 2520): the same 1.547
          media covers it top-aligned (a strip of the bottom is cropped).
          Old markup (.mbp__menubar / .mbp__window > .mbp__toolbar + .mbp__view
          / .mbp__dock) still renders, full-bleed: the bars are hidden and the
          window fills the display. Switch to the new markup when you touch it.
          (--view-ar and --mbp-title are no longer used.)

   JS     MacDevice.open(el, {duration:1050, delay:0}) -> Promise (weighted ease, rAF;
          prefers-reduced-motion jumps to open) . MacDevice.close(el, opts)
          MacDevice.set(el, t)   sets --open . MacDevice.show(el, i) switches
          the active layer (plays a <video> layer muted + inline, pauses others;
          works on .mbp, .imac and the static Apple-bezel .abz alike).
          Without JS: data-mac-open="1" renders the laptop open.

   MARKUP (copy as-is; the <i> parts are the aluminium body; each base corner
   needs its inner <i></i>: the 6 facets of the rounded corner)
   <div class="mbp" data-mac-open="1">
     <div class="mbp__stage"><div class="mbp__scene">
       <i class="mbp__shadow"></i>
       <div class="mbp__base">
         <i class="mbp__deck"></i>
         <i class="mbp__face mbp__front"></i><i class="mbp__face mbp__back"></i>
         <i class="mbp__face mbp__side mbp__side--l"></i><i class="mbp__face mbp__side mbp__side--r"></i>
         <i class="mbp__corner mbp__corner--fl"><i></i></i><i class="mbp__corner mbp__corner--fr"><i></i></i>
         <i class="mbp__corner mbp__corner--bl"><i></i></i><i class="mbp__corner mbp__corner--br"><i></i></i>
         <i class="mbp__hinge"></i>
       </div>
       <div class="mbp__lid">
         <i class="mbp__lid-back"></i><i class="mbp__lid-top"></i>
         <i class="mbp__lid-side mbp__lid-side--l"></i><i class="mbp__lid-side mbp__lid-side--r"></i>
         <i class="mbp__lid-corner mbp__lid-corner--l"></i><i class="mbp__lid-corner mbp__lid-corner--r"></i>
         <div class="mbp__lid-face">
           <div class="mbp__screen"><div class="mbp__view">
             <img class="is-active" src="…1496x967.webp" alt="…" width="1496" height="967">
             <img src="…" alt="">  <video src="…" muted playsinline loop></video>
           </div></div>
         </div>
       </div>
     </div></div>
   </div>

   <div class="imac">                       (.imac--yaw = slight 3/4 turn)
     <div class="imac__stage"><div class="imac__body">
       <i class="imac__shadow"></i><i class="imac__foot"></i><i class="imac__stand"></i>
       <i class="imac__side imac__side--l"></i><i class="imac__side imac__side--r"></i>
       <i class="imac__top"></i><i class="imac__bottom"></i>
       <i class="imac__corner imac__corner--tl"></i><i class="imac__corner imac__corner--tr"></i>
       <i class="imac__corner imac__corner--bl"></i><i class="imac__corner imac__corner--br"></i>
       <div class="imac__head"><div class="mbp__screen"><div class="mbp__view"> …layers… </div></div></div>
     </div></div>
   </div>

   Geometry. Body: MacBook Pro footprint -> 100em x 70.8em; base 3.25em + lid
   1.5em. Display: measured on Apple's "MacBook Pro M5 16-inch Silver" bezel
   (lid 3566 px wide, display hole 3456 x 2234 px at 55 px from the sides and
   56 px from the top, top corners ~40 px, square bottom corners, notch 370 x
   63 px): display 96.92 x 62.65em at 1.54em / 1.57em, notch 10.38 x 1.77em.
   iMac (Apple's "iMac M4 24-inch Blue"): display 94.96 x 53.41em at 2.5em.
   The lid mark is PostureCo's spine-P, debossed (never an Apple logo).
   Data URIs between /*@X*/ markers (keyboard, lid mark, ports) are generated by
   .work/cloud/mac-gen/gen.py. Its WALL and STATUS outputs have no marker to
   land in any more (wallpaper and menu bar were removed on Oct 10 2026); a
   re-run prints "marker missing" for them and changes nothing else.
   ========================================================================== */

@property --open { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tilt { syntax: "<number>"; inherits: true; initial-value: 14; }
@property --yaw  { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ------------------------------------------------------------- the box */
.mbp {
  --open: 0;
  --tilt: 14;
  --yaw: 0;
  --mbp-max: 112;              /* lid angle at --open:1 (degrees from closed) */
  --mbp-ar: 100 / 89;          /* box aspect ratio (keeps the rising lid inside at every --open) */
  --mbp-floor: 87%;            /* where the laptop's footprint centre sits */
  --mbp-zoom: .94;             /* keeps the perspective-widened base inside the box */
  --mbp-dx: 0em;               /* horizontal nudge of the whole laptop */
  --mbp-persp: 650;            /* perspective (% of box width): long lens, like Apple's renders */
  /* body geometry (em = 1% of laptop width) */
  --mbp-d: 70.8em;             /* depth */
  --mbp-tb: 3.25em;            /* base thickness */
  --mbp-tl: 1.5em;             /* lid thickness */
  --mbp-r: 2.6em;              /* footprint corner radius */
  --mbp-l: calc(var(--mbp-d) - var(--mbp-tl) / 2);   /* lid length */
  position: relative;
  display: block;
  width: var(--mbp-w, min(1100px, 92vw));
  max-width: 100%;
  aspect-ratio: var(--mbp-ar);
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
.mbp[data-mac-open="1"] { --open: 1; }
.mbp--front { --tilt: 0; --mbp-max: 92; --mbp-floor: 94%; --mbp-ar: 100 / 76; }   /* screen square to the camera */
.mbp--yaw   { --yaw: -26; --mbp-zoom: .74; --mbp-floor: 84%; --mbp-dx: -3.5em; }
.mbp *, .mbp *::before, .mbp *::after,
.imac *, .imac *::before, .imac *::after { box-sizing: border-box; }

.mbp__stage {
  position: absolute;
  inset: 0;
  font-size: 1cqw;
  perspective: calc(var(--mbp-persp) * 1cqw);
  perspective-origin: 50% 46%;
  pointer-events: none;
}
.mbp__scene {
  position: absolute;
  left: 50%;
  top: var(--mbp-floor);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateX(var(--mbp-dx)) scale3d(var(--mbp-zoom), var(--mbp-zoom), var(--mbp-zoom)) rotateX(calc(var(--tilt) * -1deg)) rotateY(calc(var(--yaw) * 1deg));
}
.mbp__base { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.mbp__scene i { display: block; font-style: normal; }
.mbp__base > *, .mbp__lid > *, .mbp__shadow {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ------------------------------------------------------------- contact shadow (on the floor) */
.mbp__shadow {
  width: 100em;
  height: var(--mbp-d);
  left: -50em;
  top: calc(var(--mbp-d) / -2);
  border-radius: var(--mbp-r);
  background: rgba(16, 22, 34, .55);
  box-shadow:
    0 0 .25em .1em rgba(16, 22, 34, .55),
    0 0 .9em .3em rgba(16, 22, 34, .32),
    0 0 3.5em 1.2em rgba(16, 22, 34, .16),
    0 1.5em 12em 5em rgba(16, 32, 60, .10);
  transform: translateY(.04em) rotateX(90deg) scale(.985);
}

/* ------------------------------------------------------------- base: keyboard deck (top face) */
.mbp__deck {
  width: 100em;
  height: var(--mbp-d);
  left: -50em;
  top: calc(var(--mbp-d) / -2);
  border-radius: var(--mbp-r);
  transform: translateY(calc(var(--mbp-tb) * -1)) rotateX(90deg);
  /* element top = hinge side, bottom = front edge */
  background:
    /* broad soft specular sweep */
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%),
    /* screen light spilling onto the deck */
    radial-gradient(60em 16em at 50% 0, rgba(170, 205, 245, calc(var(--open) * .22)), transparent 70%),
    /* thumb scoop at the front edge */
    radial-gradient(9.5em 1.5em at 50% 100%, rgba(40, 44, 52, .22), rgba(40, 44, 52, .07) 55%, transparent 75%),
    /* polished chamfer on the front edge */
    linear-gradient(0deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) .32em),
    /* soft shade from the hinge */
    linear-gradient(180deg, rgba(60, 64, 72, .20), rgba(60, 64, 72, 0) 4.5em),
    linear-gradient(180deg, #d9dadd 0%, #e2e3e6 45%, #e6e7e9 100%);
  box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .55), inset 0 0 0 .16em rgba(120, 124, 132, .12);
}
.mbp__deck::before {            /* Force Touch trackpad */
  content: "";
  position: absolute;
  left: 29em;
  width: 42em;
  top: 41.8em;
  height: 25.6em;
  border-radius: 1.45em;
  background: linear-gradient(180deg, #dfe0e3, #e3e4e7 60%, #e6e7e9);
  box-shadow:
    inset 0 0 0 .07em rgba(70, 74, 82, .30),
    inset 0 .14em 0 .07em rgba(255, 255, 255, .55),
    inset 0 -.1em .3em rgba(80, 84, 92, .08);
}
.mbp__deck::after {             /* keyboard (black well, 78 keys, legends) + speaker grilles */
  content: "";
  position: absolute;
  left: 2.4em;
  top: 3.3em;
  width: 95.2em;
  height: 35.6em;
  background: /*@KBD*/url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 952 356%22%3E %3Cdefs%3E %3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232b2b2e%22/%3E%3Cstop offset=%22.55%22 stop-color=%22%231d1d20%22/%3E%3Cstop offset=%221%22 stop-color=%22%23141416%22/%3E%3C/linearGradient%3E %3Cpattern id=%22gp%22 width=%223.4%22 height=%223.4%22 patternUnits=%22userSpaceOnUse%22%3E%3Ccircle cx=%221.7%22 cy=%221.7%22 r=%22.78%22 fill=%22%233c3d41%22 fill-opacity=%22.62%22/%3E%3C/pattern%3E %3C/defs%3E %3Crect x=%2240%22 y=%22-6%22 width=%22872%22 height=%22368%22 rx=%2210%22 fill=%22%2308080a%22/%3E %3Crect x=%220%22 y=%220%22 width=%2232%22 height=%22356%22 rx=%226%22 fill=%22url(%23gp)%22/%3E%3Crect x=%22920%22 y=%220%22 width=%2232%22 height=%22356%22 rx=%226%22 fill=%22url(%23gp)%22/%3E %3Cg fill=%22%23cfd0d4%22 font-family=%22-apple-system,'SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif%22 font-weight=%22400%22%3E%3Crect x=%2250.45%22 y=%224.45%22 width=%2280.07%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%2251.05%22 y=%224.95%22 width=%2278.87%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%2257.57%22 y=%2247.74%22 font-size=%228.9%22%3Eesc%3C/text%3E%3Crect x=%22139.41%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22140.01%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22164.62%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF1%3C/text%3E%3Ccircle cx=%22164.62%22 cy=%2225.62%22 r=%224.15%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.7%22/%3E%3Crect x=%22198.72%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22199.32%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22223.93%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF2%3C/text%3E%3Ccircle cx=%22223.93%22 cy=%2225.62%22 r=%225.81%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.8%22/%3E%3Crect x=%22258.03%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22258.63%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22283.24%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF3%3C/text%3E%3Crect x=%22273.9%22 y=%2223.13%22 width=%225.4%22 height=%224.98%22 rx=%22.4%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.6%22/%3E%3Crect x=%22280.54%22 y=%2223.13%22 width=%225.4%22 height=%224.98%22 rx=%22.4%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.6%22/%3E%3Crect x=%22287.19%22 y=%2223.13%22 width=%225.4%22 height=%224.98%22 rx=%22.4%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.6%22/%3E%3Crect x=%22317.34%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22317.94%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22342.55%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF4%3C/text%3E%3Ccircle cx=%22341.31%22 cy=%2224.38%22 r=%223.74%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.7%22/%3E%3Cpath d=%22M344 27.08l3.32 3.32%22 stroke=%22%23bfc0c4%22 stroke-width=%22.8%22/%3E%3Crect x=%22376.66%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22377.26%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22401.86%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF5%3C/text%3E%3Crect x=%22399.99%22 y=%2221.06%22 width=%223.74%22 height=%226.64%22 rx=%221.87%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.6%22/%3E%3Crect x=%22435.97%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22436.57%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22461.17%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF6%3C/text%3E%3Cpath d=%22M462 21.47a4.15 4.15 0 1 0 3.32 6.23a3.32 3.32 0 0 1 -3.32 -6.23z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22495.28%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22495.88%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22520.48%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF7%3C/text%3E%3Cpath d=%22M520.48 21.89v7.47l-4.86 -3.74zM525.34 21.89v7.47l-4.86 -3.74z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22554.59%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22555.19%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22579.79%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF8%3C/text%3E%3Cpath d=%22M575.68 21.89v7.47l4.48 -3.74z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22581.1%22 y=%2221.89%22 width=%221.31%22 height=%227.47%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22583.34%22 y=%2221.89%22 width=%221.31%22 height=%227.47%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22613.9%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22614.5%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22639.1%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF9%3C/text%3E%3Cpath d=%22M639.1 21.89v7.47l4.86 -3.74zM634.25 21.89v7.47l4.86 -3.74z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22673.21%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22673.81%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22698.41%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF10%3C/text%3E%3Cpath d=%22M693.43 23.96h2.08l2.91 -2.49v8.3l-2.91 -2.49h-2.08z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22732.52%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22733.12%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22757.72%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF11%3C/text%3E%3Cpath d=%22M752.74 23.96h2.08l2.91 -2.49v8.3l-2.91 -2.49h-2.08z%22 fill=%22%23bfc0c4%22/%3E%3Cpath d=%22M758.55 25.54a2.49 2.49 0 0 1 0 3.49%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.55%22 transform=%22translate(0 0)%22/%3E%3Crect x=%22791.83%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22792.43%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22817.03%22 y=%2247.74%22 font-size=%228.9%22 text-anchor=%22middle%22%3EF12%3C/text%3E%3Cpath d=%22M812.05 23.96h2.08l2.91 -2.49v8.3l-2.91 -2.49h-2.08z%22 fill=%22%23bfc0c4%22/%3E%3Cpath d=%22M817.86 25.54a2.49 2.49 0 0 1 0 3.49%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.55%22 transform=%22translate(0 0)%22/%3E%3Cpath d=%22M817.86 24.23a4.36 4.36 0 0 1 0 6.1%22 fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.55%22 transform=%22translate(0.83 0)%22/%3E%3Crect x=%22851.14%22 y=%224.45%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22851.74%22 y=%224.95%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ccircle cx=%22876.34%22 cy=%2229.66%22 r=%2218.15%22 fill=%22none%22 stroke=%22%232e2e31%22 stroke-width=%221.1%22/%3E%3Crect x=%2250.45%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%2251.05%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%2275.66%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E~%3C/text%3E%3Ctext x=%2275.66%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%60%3C/text%3E%3Crect x=%22109.76%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22110.36%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22134.97%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%21%3C/text%3E%3Ctext x=%22134.97%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E1%3C/text%3E%3Crect x=%22169.07%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22169.67%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22194.28%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%40%3C/text%3E%3Ctext x=%22194.28%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E2%3C/text%3E%3Crect x=%22228.38%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22228.98%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22253.59%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%23%3C/text%3E%3Ctext x=%22253.59%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E3%3C/text%3E%3Crect x=%22287.69%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22288.29%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22312.9%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%24%3C/text%3E%3Ctext x=%22312.9%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E4%3C/text%3E%3Crect x=%22347%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22347.6%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22372.21%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%25%3C/text%3E%3Ctext x=%22372.21%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E5%3C/text%3E%3Crect x=%22406.31%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22406.91%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22431.52%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%5E%3C/text%3E%3Ctext x=%22431.52%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E6%3C/text%3E%3Crect x=%22465.62%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22466.22%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22490.83%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%26amp;%3C/text%3E%3Ctext x=%22490.83%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E7%3C/text%3E%3Crect x=%22524.93%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22525.53%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22550.14%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%2A%3C/text%3E%3Ctext x=%22550.14%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E8%3C/text%3E%3Crect x=%22584.24%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22584.84%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22609.45%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E(%3C/text%3E%3Ctext x=%22609.45%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E9%3C/text%3E%3Crect x=%22643.55%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22644.15%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22668.76%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E)%3C/text%3E%3Ctext x=%22668.76%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E0%3C/text%3E%3Crect x=%22702.86%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22703.46%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22728.07%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E_%3C/text%3E%3Ctext x=%22728.07%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E-%3C/text%3E%3Crect x=%22762.17%22 y=%2263.76%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22762.77%22 y=%2264.26%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22787.38%22 y=%2286%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%2B%3C/text%3E%3Ctext x=%22787.38%22 y=%22100.83%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E=%3C/text%3E%3Crect x=%22821.48%22 y=%2263.76%22 width=%2280.07%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22822.08%22 y=%2264.26%22 width=%2278.87%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22894.43%22 y=%22107.06%22 font-size=%228.9%22 text-anchor=%22end%22%3Edelete%3C/text%3E%3Crect x=%2250.45%22 y=%22123.07%22 width=%2280.07%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%2251.05%22 y=%22123.57%22 width=%2278.87%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%2257.57%22 y=%22166.37%22 font-size=%228.9%22%3Etab%3C/text%3E%3Crect x=%22139.41%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22140.01%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22164.62%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EQ%3C/text%3E%3Crect x=%22198.72%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22199.32%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22223.93%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EW%3C/text%3E%3Crect x=%22258.03%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22258.63%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22283.24%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EE%3C/text%3E%3Crect x=%22317.34%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22317.94%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22342.55%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3ER%3C/text%3E%3Crect x=%22376.66%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22377.26%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22401.86%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3ET%3C/text%3E%3Crect x=%22435.97%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22436.57%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22461.17%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EY%3C/text%3E%3Crect x=%22495.28%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22495.88%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22520.48%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EU%3C/text%3E%3Crect x=%22554.59%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22555.19%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22579.79%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EI%3C/text%3E%3Crect x=%22613.9%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22614.5%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22639.1%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EO%3C/text%3E%3Crect x=%22673.21%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22673.81%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22698.41%22 y=%22154.04%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EP%3C/text%3E%3Crect x=%22732.52%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22733.12%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22757.72%22 y=%22145.31%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%7B%3C/text%3E%3Ctext x=%22757.72%22 y=%22160.14%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%5B%3C/text%3E%3Crect x=%22791.83%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22792.43%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22817.03%22 y=%22145.31%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%7D%3C/text%3E%3Ctext x=%22817.03%22 y=%22160.14%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%5D%3C/text%3E%3Crect x=%22851.14%22 y=%22123.07%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22851.74%22 y=%22123.57%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22876.34%22 y=%22145.31%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%7C%3C/text%3E%3Ctext x=%22876.34%22 y=%22160.14%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%5C%3C/text%3E%3Crect x=%2250.45%22 y=%22182.38%22 width=%2297.86%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%2251.05%22 y=%22182.88%22 width=%2296.66%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%2257.57%22 y=%22225.68%22 font-size=%228.9%22%3Ecaps lock%3C/text%3E%3Crect x=%22157.21%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22157.81%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22182.41%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EA%3C/text%3E%3Crect x=%22216.52%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22217.12%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22241.72%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3ES%3C/text%3E%3Crect x=%22275.83%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22276.43%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22301.03%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3ED%3C/text%3E%3Crect x=%22335.14%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22335.74%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22360.34%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EF%3C/text%3E%3Crect x=%22394.45%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22395.05%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22419.66%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EG%3C/text%3E%3Crect x=%22453.76%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22454.36%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22478.97%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EH%3C/text%3E%3Crect x=%22513.07%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22513.67%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22538.28%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EJ%3C/text%3E%3Crect x=%22572.38%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22572.98%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22597.59%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EK%3C/text%3E%3Crect x=%22631.69%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22632.29%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22656.9%22 y=%22213.35%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EL%3C/text%3E%3Crect x=%22691%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22691.6%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22716.21%22 y=%22204.62%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E:%3C/text%3E%3Ctext x=%22716.21%22 y=%22219.45%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E;%3C/text%3E%3Crect x=%22750.31%22 y=%22182.38%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22750.91%22 y=%22182.88%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22775.52%22 y=%22204.62%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%26quot;%3C/text%3E%3Ctext x=%22775.52%22 y=%22219.45%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E'%3C/text%3E%3Crect x=%22809.62%22 y=%22182.38%22 width=%2291.93%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22810.22%22 y=%22182.88%22 width=%2290.73%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22894.43%22 y=%22225.68%22 font-size=%228.9%22 text-anchor=%22end%22%3Ereturn%3C/text%3E%3Crect x=%2250.45%22 y=%22241.69%22 width=%22130.48%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%2251.05%22 y=%22242.19%22 width=%22129.28%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%2257.57%22 y=%22284.99%22 font-size=%228.9%22%3Eshift%3C/text%3E%3Crect x=%22189.83%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22190.43%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22215.03%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EZ%3C/text%3E%3Crect x=%22249.14%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22249.74%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22274.34%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EX%3C/text%3E%3Crect x=%22308.45%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22309.05%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22333.66%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EC%3C/text%3E%3Crect x=%22367.76%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22368.36%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22392.97%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EV%3C/text%3E%3Crect x=%22427.07%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22427.67%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22452.28%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EB%3C/text%3E%3Crect x=%22486.38%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22486.98%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22511.59%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EN%3C/text%3E%3Crect x=%22545.69%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22546.29%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22570.9%22 y=%22272.66%22 font-size=%2216.01%22 text-anchor=%22middle%22%3EM%3C/text%3E%3Crect x=%22605%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22605.6%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22630.21%22 y=%22263.93%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%26lt;%3C/text%3E%3Ctext x=%22630.21%22 y=%22278.76%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E,%3C/text%3E%3Crect x=%22664.31%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22664.91%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22689.52%22 y=%22263.93%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%26gt;%3C/text%3E%3Ctext x=%22689.52%22 y=%22278.76%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E.%3C/text%3E%3Crect x=%22723.62%22 y=%22241.69%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22724.22%22 y=%22242.19%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22748.83%22 y=%22263.93%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E%3F%3C/text%3E%3Ctext x=%22748.83%22 y=%22278.76%22 font-size=%2211.86%22 text-anchor=%22middle%22%3E/%3C/text%3E%3Crect x=%22782.93%22 y=%22241.69%22 width=%22118.62%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22783.53%22 y=%22242.19%22 width=%22117.42%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22894.43%22 y=%22284.99%22 font-size=%228.9%22 text-anchor=%22end%22%3Eshift%3C/text%3E%3Crect x=%2250.45%22 y=%22301%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%2251.05%22 y=%22301.5%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Cg fill=%22none%22 stroke=%22%23bfc0c4%22 stroke-width=%22.55%22%3E%3Ccircle cx=%2264.68%22 cy=%22337.18%22 r=%225.04%22/%3E%3Cellipse cx=%2264.68%22 cy=%22337.18%22 rx=%222.27%22 ry=%225.04%22/%3E%3Cpath d=%22M59.64 337.18h10.08%22/%3E%3C/g%3E%3Ctext x=%2293.74%22 y=%22318.79%22 font-size=%228.9%22 text-anchor=%22end%22%3Efn%3C/text%3E%3Crect x=%22109.76%22 y=%22301%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22110.36%22 y=%22301.5%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22153.06%22 y=%22344.3%22 font-size=%228.9%22 text-anchor=%22end%22%3Econtrol%3C/text%3E%3Crect x=%22169.07%22 y=%22301%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22169.67%22 y=%22301.5%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22212.37%22 y=%22344.3%22 font-size=%228.9%22 text-anchor=%22end%22%3Eoption%3C/text%3E%3Crect x=%22228.38%22 y=%22301%22 width=%2268.21%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22228.98%22 y=%22301.5%22 width=%2267.01%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22289.47%22 y=%22344.3%22 font-size=%228.9%22 text-anchor=%22end%22%3Ecommand%3C/text%3E%3Crect x=%22305.48%22 y=%22301%22 width=%22287.66%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22306.08%22 y=%22301.5%22 width=%22286.46%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Crect x=%22602.03%22 y=%22301%22 width=%2268.21%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22602.63%22 y=%22301.5%22 width=%2267.01%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22609.15%22 y=%22344.3%22 font-size=%228.9%22%3Ecommand%3C/text%3E%3Crect x=%22679.14%22 y=%22301%22 width=%2250.41%22 height=%2250.41%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22679.74%22 y=%22301.5%22 width=%2249.21%22 height=%2221.17%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Ctext x=%22686.26%22 y=%22344.3%22 font-size=%228.9%22%3Eoption%3C/text%3E%3Crect x=%22738.45%22 y=%22330.66%22 width=%2248.44%22 height=%2220.76%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22739.05%22 y=%22331.16%22 width=%2247.24%22 height=%228.72%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Cpath d=%22M759.4 341.03L765.28 337.77L765.28 344.3z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22795.78%22 y=%22301%22 width=%2248.44%22 height=%2220.76%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22796.38%22 y=%22301.5%22 width=%2247.24%22 height=%228.72%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Cpath d=%22M820 308.12L816.74 313.99L823.26 313.99z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22795.78%22 y=%22330.66%22 width=%2248.44%22 height=%2220.76%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22796.38%22 y=%22331.16%22 width=%2247.24%22 height=%228.72%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Cpath d=%22M820 344.3L816.74 338.42L823.26 338.42z%22 fill=%22%23bfc0c4%22/%3E%3Crect x=%22853.11%22 y=%22330.66%22 width=%2248.44%22 height=%2220.76%22 rx=%225.04%22 fill=%22url(%23k)%22/%3E%3Crect x=%22853.71%22 y=%22331.16%22 width=%2247.24%22 height=%228.72%22 rx=%224.03%22 fill=%22%23fff%22 opacity=%22.035%22/%3E%3Cpath d=%22M880.6 341.03L874.72 337.77L874.72 344.3z%22 fill=%22%23bfc0c4%22/%3E%3C/g%3E %3C/svg%3E")/*@end*/ 0 0 / 100% 100% no-repeat;
}

/* ------------------------------------------------------------- base: edges (front, back, sides, rounded corners) */
.mbp__face {
  /* --b = how much the face looks at the key light (-1..1) */
  --b: .5;
  background: linear-gradient(180deg,
    hsl(216 8% calc(86% + 9% * var(--b))) 0,
    hsl(216 6% calc(80% + 9% * var(--b))) 10%,
    hsl(216 5% calc(72% + 11% * var(--b))) 26%,
    hsl(216 4% calc(66% + 11% * var(--b))) 78%,
    hsl(216 4% calc(52% + 8% * var(--b))) 100%);
}
.mbp__front {
  --b: .78;
  width: calc(100em - 2 * var(--mbp-r) + .3em);      /* +.3em tucks under the corner facets: no AA seam */
  height: var(--mbp-tb);
  left: calc(var(--mbp-r) - 50em - .15em);
  top: calc(var(--mbp-tb) * -1);
  transform: translateZ(calc(var(--mbp-d) / 2));
  background:
    radial-gradient(8em 1.25em at 50% 0, rgba(46, 50, 58, .26), rgba(46, 50, 58, .08) 55%, transparent 80%),
    linear-gradient(180deg,
      hsl(216 8% calc(86% + 9% * var(--b))) 0,
      hsl(216 6% calc(80% + 9% * var(--b))) 10%,
      hsl(216 5% calc(72% + 11% * var(--b))) 26%,
      hsl(216 4% calc(66% + 11% * var(--b))) 78%,
      hsl(216 4% calc(52% + 8% * var(--b))) 100%);
}
.mbp__back {
  --b: -.8;
  width: calc(100em - 2 * var(--mbp-r));
  height: var(--mbp-tb);
  left: calc(var(--mbp-r) - 50em);
  top: calc(var(--mbp-tb) * -1);
  transform: translateZ(calc(var(--mbp-d) / -2)) rotateY(180deg);
}
.mbp__side {
  width: calc(var(--mbp-d) - 2 * var(--mbp-r) + .3em);
  height: var(--mbp-tb);
  left: calc(var(--mbp-d) / -2 + var(--mbp-r) - .15em);
  top: calc(var(--mbp-tb) * -1);
}
.mbp__side--l {
  --b: .55;
  transform: translateX(-50em) rotateY(-90deg);
  background-image: /*@PORTS_L*/url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 656 32.5%22 preserveAspectRatio=%22none%22%3E%3Crect x=%2258%22 y=%2211.27%22 width=%2246%22 height=%228%22 rx=%224%22 fill=%22%23121315%22/%3E%3Crect x=%2258%22 y=%2219.27%22 width=%2246%22 height=%221%22 rx=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Crect x=%22132%22 y=%2210.77%22 width=%2230%22 height=%229%22 rx=%224.5%22 fill=%22%23121315%22/%3E%3Crect x=%22132%22 y=%2219.77%22 width=%2230%22 height=%221%22 rx=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Crect x=%22184%22 y=%2210.77%22 width=%2230%22 height=%229%22 rx=%224.5%22 fill=%22%23121315%22/%3E%3Crect x=%22184%22 y=%2219.77%22 width=%2230%22 height=%221%22 rx=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Ccircle cx=%22252%22 cy=%2215.27%22 r=%223.6%22 fill=%22%23121315%22/%3E%3C/svg%3E")/*@end*/, linear-gradient(180deg,
    hsl(216 8% 91%) 0, hsl(216 6% 85%) 10%, hsl(216 5% 78%) 26%, hsl(216 4% 72%) 78%, hsl(216 4% 57%) 100%);
  background-size: 100% 100%;
}
.mbp__side--r {
  --b: -.45;
  transform: translateX(50em) rotateY(90deg);
  background-image: /*@PORTS_R*/url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 656 32.5%22 preserveAspectRatio=%22none%22%3E%3Cg transform=%22translate(656 0) scale(-1 1)%22%3E%3Crect x=%2258%22 y=%2210.27%22 width=%2240%22 height=%2210%22 rx=%222.2%22 fill=%22%23121315%22/%3E%3Crect x=%2258%22 y=%2220.27%22 width=%2240%22 height=%221%22 rx=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Crect x=%22130%22 y=%2210.77%22 width=%2230%22 height=%229%22 rx=%224.5%22 fill=%22%23121315%22/%3E%3Crect x=%22130%22 y=%2219.77%22 width=%2230%22 height=%221%22 rx=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3Crect x=%22196%22 y=%2213.17%22 width=%2264%22 height=%224.2%22 rx=%221.6%22 fill=%22%23121315%22/%3E%3Crect x=%22196%22 y=%2217.38%22 width=%2264%22 height=%221%22 rx=%22.5%22 fill=%22%23fff%22 fill-opacity=%22.55%22/%3E%3C/g%3E%3C/svg%3E")/*@end*/, linear-gradient(180deg,
    hsl(216 8% 84%) 0, hsl(216 6% 76%) 10%, hsl(216 5% 66%) 26%, hsl(216 4% 61%) 78%, hsl(216 4% 49%) 100%);
  background-size: 100% 100%;
}
/* Rounded footprint corners: 6 facets of 15deg each, hinged on the corner's
   axis. The element is the facet at -7.5deg from the corner bisector, its
   ::before / ::after the -22.5 / -37.5 facets; the child <i> is the +7.5 facet
   and its ::before / ::after the +22.5 / +37.5 ones. Lightness (--b) steps
   evenly from the face at one end (--b0) to the face at the other
   (--b0 + --bd), so neighbouring facets differ by ~2% and never band. */
.mbp__corner {
  --R: calc(var(--mbp-r) * .99144);               /* facet distance from the axis: r cos 7.5 */
  width: calc(var(--mbp-r) * .2611 + .04em);       /* 2 r sin 7.5, + a hair of overlap */
  height: var(--mbp-tb);
  left: calc(var(--mbp-r) * -.13055 - .02em);
  top: calc(var(--mbp-tb) * -1);
  transform-style: preserve-3d;
  transform: translate3d(var(--cx), 0, var(--cz)) rotateY(calc(var(--ca) - 7.5deg)) translateZ(var(--R));
}
.mbp__corner > i {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(calc(var(--R) * -1)) rotateY(15deg) translateZ(var(--R));
}
.mbp__corner::before, .mbp__corner::after,
.mbp__corner > i::before, .mbp__corner > i::after,
.mbp__lid-corner::before, .mbp__lid-corner::after {
  content: "";
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mbp__corner::before     { transform: translateZ(calc(var(--R) * -1)) rotateY(-15deg) translateZ(var(--R)); }
.mbp__corner::after      { transform: translateZ(calc(var(--R) * -1)) rotateY(-30deg) translateZ(var(--R)); }
.mbp__corner > i::before { transform: translateZ(calc(var(--R) * -1)) rotateY(15deg)  translateZ(var(--R)); }
.mbp__corner > i::after  { transform: translateZ(calc(var(--R) * -1)) rotateY(30deg)  translateZ(var(--R)); }
.mbp__corner, .mbp__corner::before, .mbp__corner::after,
.mbp__corner > i, .mbp__corner > i::before, .mbp__corner > i::after {
  --b: calc(var(--b0) + var(--bd) * var(--f));
  background: linear-gradient(180deg,
    hsl(216 8% calc(86% + 9% * var(--b))) 0,
    hsl(216 6% calc(80% + 9% * var(--b))) 10%,
    hsl(216 5% calc(72% + 11% * var(--b))) 26%,
    hsl(216 4% calc(66% + 11% * var(--b))) 78%,
    hsl(216 4% calc(52% + 8% * var(--b))) 100%);
}
/* --f = where the facet sits, from the -45deg end (0) to the +45deg end (1) */
.mbp__corner::after      { --f: .0833; }
.mbp__corner::before     { --f: .25; }
.mbp__corner             { --f: .4167; }
.mbp__corner > i         { --f: .5833; }
.mbp__corner > i::before { --f: .75; }
.mbp__corner > i::after  { --f: .9167; }
/* -45deg end -> +45deg end:  fr front->right . fl left->front . br right->back . bl back->left */
.mbp__corner--fr { --cx: calc(50em - var(--mbp-r)); --cz: calc(var(--mbp-d) / 2 - var(--mbp-r)); --ca: 45deg;   --b0: .78;  --bd: -1.23; }
.mbp__corner--fl { --cx: calc(var(--mbp-r) - 50em); --cz: calc(var(--mbp-d) / 2 - var(--mbp-r)); --ca: -45deg;  --b0: .55;  --bd: .23; }
.mbp__corner--br { --cx: calc(50em - var(--mbp-r)); --cz: calc(var(--mbp-r) - var(--mbp-d) / 2); --ca: 135deg;  --b0: -.45; --bd: -.35; }
.mbp__corner--bl { --cx: calc(var(--mbp-r) - 50em); --cz: calc(var(--mbp-r) - var(--mbp-d) / 2); --ca: -135deg; --b0: -.8;  --bd: 1.35; }

/* the dark display hinge between deck and lid */
.mbp__hinge {
  width: 82em;
  left: -41em;
  height: var(--mbp-tl);
  top: calc(-1 * (var(--mbp-tb) + var(--mbp-tl)));
  border-radius: .6em / .5em;
  transform: translateZ(calc(var(--mbp-d) / -2 + var(--mbp-tl) * .8));
  background: linear-gradient(180deg, #4a4c51 0, #2a2b2f 35%, #1b1c1f 70%, #0f1012 100%);
}

/* ------------------------------------------------------------- lid */
.mbp__lid {
  position: absolute;
  width: 100em;
  height: var(--mbp-l);
  left: -50em;
  top: calc(var(--mbp-l) * -1);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  /* Real MBP hinge: as the lid opens it first slides back (--sb), then its
     lower edge drops behind the base (--sd), so the chin stays short and the
     lid never cuts into the deck. */
  --sb: clamp(0, calc((var(--open) - .45) / .25), 1);
  --sd: clamp(0, calc((var(--open) - .7) / .3), 1);
  transform:
    translate3d(0, calc(var(--sd) * 2.6em), calc(var(--sb) * -1.75em))
    translate3d(0, calc(-1 * (var(--mbp-tb) + var(--mbp-tl) / 2)), calc(var(--mbp-d) / -2 + var(--mbp-tl) / 2))
    rotateX(calc((var(--open) * var(--mbp-max) - 90) * 1deg));
}
.mbp__lid::before, .mbp__lid::after {   /* inner backing planes: any hairline crack between the
                                         lid's edge planes shows glass-black / aluminium, never the page */
  content: "";
  position: absolute;
  inset: .05em;
  border-radius: var(--mbp-r);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.mbp__lid::before { transform: translateZ(calc(var(--mbp-tl) / 2 - .14em)); background: #0b0b0d; }
.mbp__lid::after  { transform: translateZ(calc(var(--mbp-tl) / -2 + .14em)) rotateY(180deg); background: #c9cbcf; }
.mbp__lid-back {               /* aluminium back with the debossed spine-P */
  inset: 0;
  border-radius: var(--mbp-r);
  transform: translateZ(calc(var(--mbp-tl) / -2)) rotateY(180deg);
  background:
    /* broad soft specular sweep across the brushed aluminium */
    linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .30) 48%, rgba(255, 255, 255, .12) 56%, transparent 68%),
    /*@MARK*/url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2249 36 1284 1538%22%3E %3Cdefs%3E%3Cpath id=%22m%22 fill-rule=%22evenodd%22 transform=%22rotate(180 691 805) translate(0 1600) scale(1 -1)%22 d=%22M680 1533 c-81 -1 -170 -21 -240 -54 l-10 -5 0 29 0 29 -104 0 c-58 0 -105 0 -105 0 0 -2 7 -4 17 -8 13 -4 19 -9 19 -17 0 -6 -16 -5 -44 2 -13 4 -13 4 -14 2 -2 -3 1 -5 14 -12 17 -9 25 -14 25 -15 -1 0 -10 -1 -22 -1 -20 0 -21 -1 -21 -3 0 -2 2 -3 16 -10 16 -8 25 -13 25 -15 0 -1 -9 -1 -18 0 -8 2 -8 2 -8 -2 0 -1 1 -2 8 -4 12 -3 22 -8 28 -14 6 -6 6 -6 -9 -6 -7 0 -20 -1 -28 -1 l-16 -2 4 -2 c3 -1 5 -3 5 -3 0 -1 2 -2 9 -2 11 -1 31 -5 37 -9 6 -2 18 -14 18 -16 0 -3 -10 -1 -22 4 -20 10 -21 10 -28 3 -7 -7 -6 -9 5 -10 27 -2 68 -18 68 -26 0 -14 -23 -13 -53 3 -3 1 -5 2 -6 2 0 -1 -1 -1 -1 0 0 1 -1 1 -3 0 -4 -1 -3 -6 1 -6 7 0 11 -14 5 -20 -2 -2 -1 -2 31 -10 60 -16 74 -30 18 -18 -16 3 -16 3 -16 -2 -1 -2 -2 -6 -4 -8 -2 -2 -3 -4 -2 -4 1 -3 36 -18 49 -21 10 -3 21 -11 27 -22 l2 -3 -8 0 c-6 0 -24 3 -34 6 -3 1 -5 -1 -8 -6 -1 -3 -2 -3 4 -6 3 -1 12 -7 21 -14 14 -10 25 -17 42 -24 3 -1 6 -3 6 -4 2 -3 6 -16 5 -17 -1 0 -12 5 -26 13 -6 3 -11 6 -12 6 -1 -1 -13 -15 -13 -15 0 -1 3 -1 5 -2 17 -7 44 -30 55 -46 5 -7 5 -8 -1 -5 -2 1 -7 3 -12 4 l-9 3 -4 -3 c-1 -2 -5 -6 -7 -9 l-4 -6 3 -2 c8 -4 14 -9 22 -19 5 -7 13 -15 18 -20 12 -11 13 -14 10 -20 -3 -6 -2 -6 -8 -1 -3 3 -10 7 -15 10 l-9 5 -2 -2 c-3 -3 -4 -8 -4 -15 0 -10 -1 -14 -2 -13 -3 4 -6 1 -6 -3 2 -11 7 -12 18 -4 10 7 17 5 20 -6 l1 -5 5 10 c50 126 173 207 311 204 242 -5 394 -263 283 -479 -49 -94 -142 -159 -249 -174 -19 -2 -64 -2 -83 0 -131 18 -236 108 -274 234 -4 15 -6 17 -10 8 -4 -9 -3 -13 10 -26 8 -9 9 -12 9 -17 -1 -7 -29 -1 -40 9 l-4 3 -3 -5 c-4 -5 -4 -5 6 -7 12 -2 14 -4 10 -15 -3 -11 -2 -12 13 -22 14 -9 16 -14 11 -19 -3 -4 -12 -4 -32 1 -21 6 -22 6 -24 14 -5 14 -11 15 -19 1 -5 -8 -7 -10 -13 -11 -6 0 -29 1 -45 4 -6 0 -17 2 -25 2 -24 3 -26 5 -21 25 1 5 2 12 3 16 2 19 4 19 30 13 19 -4 31 -4 50 -1 8 1 17 2 25 3 l12 0 3 3 c5 7 8 22 5 22 -3 0 -11 -4 -21 -11 l-9 -6 -11 0 c-9 1 -30 3 -63 7 -12 1 -14 3 -14 13 0 8 3 28 4 29 3 4 21 2 46 -4 20 -4 28 -4 45 0 7 2 15 4 19 5 l7 0 1 4 c1 3 3 7 4 10 2 3 3 6 3 6 0 1 -15 -2 -29 -7 -12 -4 -16 -4 -25 -5 -23 -1 -67 5 -67 9 0 1 1 8 3 16 2 9 3 17 3 19 2 9 6 10 27 4 15 -3 24 -4 43 -1 4 1 16 1 26 1 l19 1 3 6 c4 8 5 18 2 21 -3 2 -5 0 -12 -9 -8 -12 -12 -13 -12 -5 0 1 -1 1 -3 0 -1 0 -7 0 -13 0 -7 0 -24 0 -39 0 -15 0 -30 1 -32 1 l-5 1 0 18 c0 10 0 18 0 19 -1 3 14 6 45 7 53 3 56 3 67 8 4 1 4 1 8 -2 5 -4 6 -4 9 -3 5 0 6 1 4 2 -6 2 -9 6 -9 12 0 6 -2 12 -6 16 l-3 2 -4 -2 c-4 -1 -16 -14 -18 -18 -2 -4 -4 0 -5 8 l0 3 -5 -4 c-11 -7 -15 -9 -45 -13 -11 -1 -34 -2 -38 0 -2 0 -2 1 -2 5 1 3 1 11 1 18 1 17 1 17 36 21 20 3 28 6 59 18 24 10 24 10 21 14 -14 21 -21 22 -31 2 -4 -9 -9 -13 -15 -15 -19 -5 -61 -13 -67 -13 l-5 0 0 16 c-1 19 -1 18 5 22 9 5 24 9 52 13 17 2 40 6 41 7 0 1 -1 2 -1 4 -3 4 -2 12 0 21 3 9 -1 11 -11 5 -3 -2 -9 -5 -13 -7 -7 -3 -17 -11 -33 -22 -5 -4 -42 -14 -44 -11 -1 0 -3 8 -4 18 l-4 17 3 3 c2 2 6 5 9 7 7 3 6 3 5 6 -1 2 -1 2 -6 0 -3 0 -7 -1 -10 -1 l-5 1 -4 13 c-2 8 -4 15 -5 17 -2 4 2 7 28 19 20 8 30 12 45 18 12 4 13 5 11 6 -4 1 -6 5 -6 11 -1 7 -5 11 -10 11 -4 -1 -7 -4 -11 -14 -3 -10 -14 -17 -38 -25 -20 -6 -25 -7 -25 -2 0 0 -3 7 -6 14 -5 12 -5 13 -4 16 2 4 13 10 41 20 25 10 46 22 46 28 0 1 -7 4 -11 4 -2 0 -4 1 -8 3 -7 4 -12 5 -15 2 -3 -3 -5 -11 -4 -16 0 -5 -1 -6 -7 -9 -2 -1 -10 -4 -16 -7 -22 -10 -31 -11 -36 -7 -1 2 -6 12 -10 24 -1 4 10 12 27 18 4 3 10 5 13 6 l4 2 -2 5 c-2 5 -1 6 -12 -1 -10 -6 -18 -9 -27 -10 -6 -1 -6 -1 -8 8 -1 8 -3 12 -7 17 l-3 4 2 3 c5 5 20 12 41 18 7 3 13 5 15 6 3 3 6 12 4 13 -2 1 -3 1 -8 -3 -5 -5 -12 -5 -18 1 -2 1 -2 1 -6 -3 -6 -7 -34 -23 -36 -21 -1 1 -2 19 -1 22 1 4 2 5 14 14 16 10 22 17 25 23 1 3 2 6 3 6 0 0 2 -1 4 -2 5 -3 15 -1 15 3 -1 3 -8 6 -16 6 -6 -1 -9 -3 -25 -16 -16 -14 -23 -18 -24 -15 -1 0 -2 5 -3 11 -2 11 -4 9 14 23 12 8 13 9 12 11 -2 3 -1 3 -17 -5 -9 -4 -15 -7 -16 -7 0 1 -1 4 -1 7 0 6 0 7 4 12 2 2 4 6 6 8 2 4 3 5 9 7 4 1 7 2 7 3 0 0 -1 2 -1 5 -4 10 -3 12 10 12 5 0 6 1 6 3 0 3 0 3 -2 3 -15 0 -20 22 -7 29 l3 1 -6 4 c-6 3 -12 9 -13 15 -1 6 11 15 22 17 4 0 4 0 2 2 -1 2 -4 2 -44 2 l-43 0 0 -738 0 -738 130 0 c72 0 130 0 130 1 0 0 -2 5 -4 11 l-4 10 -17 16 c-14 12 -19 16 -24 18 -18 9 -33 13 -45 15 -7 1 -9 2 -12 4 -2 2 -6 5 -9 8 -16 9 -20 18 -21 37 0 6 -1 7 -4 11 -2 2 -5 8 -7 12 -4 8 -9 12 -15 14 -12 3 -16 4 -18 6 l-2 2 10 3 c5 2 17 6 26 10 37 17 43 19 59 23 4 1 5 2 6 12 1 4 1 8 2 9 0 2 0 2 -4 2 -4 0 -5 1 -10 8 -4 6 -8 6 -17 2 l-6 -3 1 -3 c4 -14 -13 -23 -59 -34 -10 -2 -19 -4 -20 -5 -4 -2 -5 -1 -6 3 -1 11 -6 26 -12 42 -9 26 -10 26 20 28 11 1 14 1 19 3 16 7 45 13 54 11 10 -2 13 -1 16 2 2 2 3 4 3 4 0 3 8 13 10 13 1 1 7 2 12 3 11 3 13 2 21 -6 4 -4 10 -10 14 -13 4 -2 10 -8 14 -11 4 -4 11 -10 15 -14 11 -10 13 -18 6 -31 -4 -8 -5 -8 -20 -5 -11 2 -11 2 -16 1 -6 -2 -7 -2 -10 0 -4 3 -7 0 -4 -3 2 -2 3 -5 9 -16 4 -10 6 -12 15 -12 19 -2 23 -8 27 -30 3 -16 5 -17 17 -21 12 -2 14 -6 16 -19 1 -6 3 -16 8 -30 10 -29 12 -44 10 -78 l0 -9 23 -1 24 0 0 157 c0 86 0 157 1 157 0 0 6 -3 13 -6 65 -28 124 -44 197 -51 17 -2 84 -2 102 0 85 8 159 30 230 66 237 125 367 386 320 649 -52 296 -312 511 -613 505z m-465 -792 c30 -10 35 -10 66 -7 30 3 46 3 53 -2 l4 -3 -1 -11 c0 -16 3 -22 15 -25 8 -2 12 -8 12 -17 0 -8 -4 -11 -13 -7 -7 2 -13 1 -19 -2 -5 -2 -5 -2 -9 -1 -4 2 -5 2 -3 -2 3 -8 0 -15 -6 -19 -2 -1 -4 -2 -4 -2 0 -1 7 -5 27 -18 16 -10 20 -17 20 -32 0 -17 -3 -19 -19 -13 -6 3 -9 3 -14 3 -4 0 -7 1 -7 1 0 2 -2 1 -5 -4 -4 -4 -7 -7 -16 -13 0 0 1 -1 2 -2 1 -2 2 -4 3 -6 1 -5 6 -9 22 -17 27 -14 31 -21 21 -34 -7 -7 -13 -8 -32 -1 -15 5 -23 5 -26 -2 -1 -1 -2 -2 -3 -1 -3 0 -5 -3 -3 -6 1 -1 2 -5 3 -8 1 -9 5 -12 28 -20 27 -10 32 -15 25 -27 -9 -15 -22 -17 -37 -5 -6 5 -11 4 -16 -4 l-2 -3 -3 2 c-5 3 -11 6 -13 6 -2 -1 -1 -4 2 -6 4 -3 8 -7 12 -15 7 -14 10 -16 35 -21 17 -2 20 -6 18 -21 -3 -22 -9 -24 -46 -17 -12 2 -22 3 -28 3 -10 0 -10 0 -10 2 0 6 -6 15 -13 17 -11 5 -18 -1 -18 -15 0 -13 -10 -19 -43 -26 -20 -4 -38 -3 -52 4 -8 4 -9 5 -8 15 0 9 3 42 5 48 l0 3 13 -1 c13 0 17 0 50 4 27 3 32 3 53 0 5 0 9 3 14 12 2 4 4 8 5 9 1 2 1 7 -1 7 -1 0 -1 2 -1 6 0 10 -6 17 -16 17 -10 0 -14 -4 -16 -17 -4 -17 -7 -18 -39 -18 -25 0 -32 1 -46 4 -21 5 -23 10 -16 35 4 18 6 28 6 32 -1 5 1 6 13 6 10 0 20 -1 44 -6 41 -8 51 -8 69 3 8 5 8 5 8 9 1 11 -2 17 -7 21 -9 7 -24 -2 -24 -15 l0 -3 -8 0 c-4 1 -12 2 -17 4 -9 2 -14 2 -31 3 -24 1 -30 2 -35 7 l-4 4 4 10 c3 10 11 39 11 42 0 2 3 5 8 5 6 1 16 0 43 -6 29 -7 26 -7 50 -8 11 0 21 -1 23 -2 3 0 3 0 5 6 3 8 9 16 15 18 4 2 5 6 0 6 -4 1 -16 -1 -27 -4 -17 -5 -20 -5 -34 -4 -31 4 -74 17 -73 21 1 1 2 7 4 15 4 25 6 32 12 34 4 3 4 2 16 -1 24 -8 46 -11 68 -7 14 2 15 2 19 1 9 -4 13 -2 19 7 4 6 6 7 10 7 2 0 3 1 3 2 1 3 0 4 -4 4 -1 0 -2 1 -4 2 -3 4 -15 4 -38 1 -29 -5 -72 -2 -81 4 -5 3 -5 6 -1 19 2 6 5 15 5 21 2 11 5 18 7 19 2 1 9 0 22 -4z M233 1321 c-8 0 -25 -23 -20 -27 2 0 11 6 19 12 3 3 9 8 13 10 4 2 7 4 7 4 -1 1 -15 2 -19 1z M658 1203 c-174 -22 -286 -192 -237 -361 25 -85 90 -154 175 -184 131 -48 281 10 345 134 89 172 -16 379 -207 409 -17 3 -60 4 -76 2z M277 1187 c-4 -2 -5 -7 -5 -14 1 -10 1 -10 -15 -19 -6 -3 -12 -6 -12 -7 0 -4 2 -4 14 0 11 4 31 8 42 10 l6 0 -4 4 c-4 4 -6 10 -6 17 0 4 0 4 -4 6 -5 3 -12 4 -16 3z M362 1024 c-2 -1 -6 -6 -6 -7 0 -1 1 -1 2 -1 1 0 7 -6 12 -14 1 -2 2 -3 2 -2 2 4 6 20 6 21 0 1 -8 5 -10 5 -2 0 -4 -1 -6 -2z M356 898 c-7 -2 -7 -3 -5 -3 1 -1 5 -4 9 -7 5 -5 6 -6 6 -4 -1 1 -1 6 -2 9 0 4 0 7 -1 7 0 0 -4 -1 -7 -2z%22/%3E %3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23d4d6d9%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23c3c5c9%22/%3E%3Cstop offset=%221%22 stop-color=%22%23cdd0d3%22/%3E%3C/linearGradient%3E%3C/defs%3E %3Cuse href=%22%23m%22 fill=%22%23fff%22 fill-opacity=%22.85%22 transform=%22translate(0 7)%22/%3E %3Cuse href=%22%23m%22 fill=%22%235e6268%22 fill-opacity=%22.32%22 transform=%22translate(0 -6)%22/%3E %3Cuse href=%22%23m%22 fill=%22url(%23g)%22/%3E %3C/svg%3E")/*@end*/ 50% 50% / 11.6em auto no-repeat,
    radial-gradient(70em 50em at 30% 80%, rgba(255, 255, 255, .35), transparent 70%),
    linear-gradient(180deg, #e9eaec 0%, #dfe0e3 50%, #d3d5d8 100%);
  box-shadow: inset 0 0 0 .12em rgba(255, 255, 255, .7), inset 0 0 0 .2em rgba(110, 114, 122, .14);
}
.mbp__lid-top {                /* top edge of the lid (element top = aluminium back, bottom = glass) */
  left: calc(var(--mbp-r) - .15em);
  width: calc(100em - 2 * var(--mbp-r) + .3em);
  top: calc(var(--mbp-tl) / -2);
  height: var(--mbp-tl);
  transform: rotateX(90deg);
  background: linear-gradient(180deg, #b9bbbf 0, #eef0f1 22%, #e2e3e6 52%, #c3c5c9 80%, #3a3b3f 90%, #0d0d0f 100%);
}
.mbp__lid-side {
  top: calc(var(--mbp-r) - .15em);
  height: calc(var(--mbp-l) - 2 * var(--mbp-r) + .15em);
  width: var(--mbp-tl);
  left: calc(var(--mbp-tl) / -2);
}
.mbp__lid-side--l {            /* element right end = glass side */
  transform: rotateY(-90deg);
  background: linear-gradient(90deg, #c4c6ca 0, #dfe1e3 40%, #c9cbcf 78%, #2a2b2e 90%, #0d0d0f 100%);
}
.mbp__lid-side--r {            /* element left end = glass side */
  left: calc(100em - var(--mbp-tl) / 2);
  transform: rotateY(90deg);
  background: linear-gradient(270deg, #a7a9ad 0, #c3c5c9 40%, #b1b3b7 78%, #26272a 90%, #0d0d0f 100%);
}
.mbp__lid-corner {             /* rounded top corners of the lid, 3 facets each (same tone, so no banding) */
  width: calc(var(--mbp-r) * .5176 + .06em);      /* + a hair of overlap: no light seams at the joins */
  margin-left: -.03em;
  height: var(--mbp-tl);
  top: calc(var(--mbp-r) - var(--mbp-tl) / 2);
  transform-style: preserve-3d;
  transform: rotateZ(var(--ca)) translateY(calc(var(--mbp-r) * -.9659)) rotateX(90deg);
  background: linear-gradient(180deg, #b9bbbf 0, #eef0f1 22%, #e2e3e6 52%, #c3c5c9 80%, #3a3b3f 90%, #0d0d0f 100%);
}
.mbp__lid-corner::before, .mbp__lid-corner::after { background: inherit; }
.mbp__lid-corner::before { transform: translateZ(calc(var(--mbp-r) * -.9659)) rotateY(-30deg) translateZ(calc(var(--mbp-r) * .9659)); }
.mbp__lid-corner::after  { transform: translateZ(calc(var(--mbp-r) * -.9659)) rotateY(30deg)  translateZ(calc(var(--mbp-r) * .9659)); }
.mbp__lid-corner--l { left: calc(var(--mbp-r) * .7412); --ca: -45deg; }
.mbp__lid-corner--r { left: calc(100em - var(--mbp-r) * 1.2588); --ca: 45deg; }

/* ------------------------------------------------------------- display side of the lid */
.mbp__lid-face {
  inset: 0;
  border-radius: var(--mbp-r);
  transform: translateZ(calc(var(--mbp-tl) / 2));
  background: #0b0b0d;          /* glass to the edge: the silver rim comes from the lid edges */
  overflow: hidden;
  pointer-events: auto;
}
.mbp__lid-face::before {       /* black glass */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mbp-r);
  background: linear-gradient(180deg, #0b0b0d, #050506 40%, #070708);
  box-shadow: inset 0 0 0 .12em #1c1d20;
}
.mbp__lid-face::after {        /* glass reflection: never blocks clicks */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: var(--mbp-r);
  pointer-events: none;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .035) 30%, rgba(255, 255, 255, .012) 36%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 12%);
}
.mbp .mbp__screen {            /* the 16" display: 1496 x 967 points, measured on Apple's bezel (see Geometry) */
  left: 1.54em;
  top: 1.57em;
  width: 96.92em;
  height: 62.65em;
  border-radius: 1.12em 1.12em 0 0;
}
.mbp .mbp__screen::before {    /* camera housing (notch): 370 x 63 of the 3456 x 2234 px panel, centred */
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: -.05em;                   /* a hair above the display edge: no lit line over it */
  width: 10.38em;
  height: 1.82em;
  margin-left: -5.19em;
  border-radius: 0 0 .5em .5em;
  background:
    radial-gradient(circle at 50% 50%, #1d2638 0 .14em, #0b0e15 .18em .32em, transparent .37em),
    #000;
  pointer-events: none;
}

/* ------------------------------------------------------------- screen (shared): one full-bleed view */
.mbp__screen {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  background: #fff;              /* a browser page: also what shows while the media loads */
}
.mbp__screen::after {          /* display off -> on */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #030304;
  opacity: clamp(0, calc(2.2 - var(--open) * 3.7), 1);   /* black until .32, fully lit by .6 */
}
.mbp__view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}
.mbp__view > * {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity .5s ease;
}
.mbp__view > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mbp__view > .is-active,
.mbp__view:not(:has(> .is-active)) > :first-child { opacity: 1; }
/* old markup (before Oct 10 2026): the desktop chrome is gone, the window fills the display */
.mbp__menubar, .mbp__toolbar, .mbp__dock { display: none; }
.mbp__window { position: absolute; inset: 0; margin: 0; width: auto; border-radius: 0; box-shadow: none; background: none; }

/* ==========================================================================
   iMac 24" (blue), flat front; same screen API.
   Geometry: 54.7 cm wide -> 100em; head 68em (bezel + 16:9 panel + chin),
   1.15 cm thick = 2.1em; blade stand + foot to the floor at ~82em.
   ========================================================================== */
.imac {
  --open: 1;
  --tilt: 3;
  --yaw: 0;
  --imac-ar: 100 / 90;
  --imac-t: 2.1em;             /* body thickness */
  --imac-r: 1.7em;             /* corner radius */
  position: relative;
  display: block;
  width: var(--imac-w, min(900px, 92vw));
  max-width: 100%;
  aspect-ratio: var(--imac-ar);
  container-type: inline-size;
}
.imac--yaw { --yaw: -22; --tilt: 4; }
.imac__stage {
  position: absolute;
  inset: 0;
  font-size: 1cqw;
  perspective: 300cqw;
  perspective-origin: 50% 40%;
  pointer-events: none;
}
.imac__body {
  position: absolute;
  left: 0;
  top: 2.5em;
  width: 100em;
  height: 68em;
  transform-style: preserve-3d;
  transform-origin: 50% 70% -1em;
  transform: rotateX(calc(var(--tilt) * -1deg)) rotateY(calc(var(--yaw) * 1deg));
}
.imac__body > * {
  position: absolute;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.imac__body::before {           /* inner backing plane: hairline cracks at the edges show blue, never the page */
  content: "";
  position: absolute;
  inset: .05em;
  border-radius: var(--imac-r);
  transform: translateZ(-.18em);
  background: #5d84bd;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.imac__head {
  inset: 0;
  border-radius: var(--imac-r);
  overflow: hidden;
  pointer-events: auto;
  /* blue aluminium chin under a light blue-white glass bezel */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .18) 22%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #bcd3f0 0, #a9c5ea 86.2%, #9dbde6 91%, #89aedf 100%);
  box-shadow: inset 0 0 0 .14em rgba(80, 120, 180, .35);
}
.imac__head::before {          /* bezel glass (light) */
  content: "";
  position: absolute;
  left: .16em;
  right: .16em;
  top: .16em;
  height: 58.4em;
  border-radius: calc(var(--imac-r) - .16em) calc(var(--imac-r) - .16em) 0 0;
  background:
    radial-gradient(circle at 50% 1.3em, #3b475c 0 .09em, #1c2330 .12em .24em, transparent .29em),
    linear-gradient(180deg, #f3f6fa, #eaf0f6);
  box-shadow: 0 .08em 0 rgba(70, 100, 150, .28);
}
.imac__head::after {           /* glass reflection */
  content: "";
  position: absolute;
  z-index: 6;
  left: .16em;
  right: .16em;
  top: .16em;
  height: 58.4em;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 36%, rgba(255, 255, 255, 0) 36.2%);
}
.imac .mbp__screen {            /* 16:9 panel, measured on Apple's "iMac M4 24-inch Blue" bezel (see Geometry) */
  left: 2.52em;
  top: 2.5em;
  width: 94.96em;
  height: 53.41em;
  border-radius: .2em;
  box-shadow: 0 0 0 .08em rgba(0, 0, 0, .55);
}
.imac__side, .imac__top, .imac__bottom, .imac__corner, .imac__corner::before, .imac__corner::after {
  background: linear-gradient(90deg, #6f95c9, #9dbbe3 45%, #7ea3d4);
}
.imac__side {
  top: var(--imac-r);
  height: calc(68em - 2 * var(--imac-r));
  width: var(--imac-t);
  left: calc(var(--imac-t) / -2);
}
.imac__side--l { transform: translateZ(calc(var(--imac-t) / -2)) rotateY(-90deg); background: linear-gradient(90deg, #8fb0dc, #b5cdee 50%, #9ab9e2); }
.imac__side--r { left: calc(100em - var(--imac-t) / 2); transform: translateZ(calc(var(--imac-t) / -2)) rotateY(90deg); background: linear-gradient(90deg, #4f78b3, #6c92c9 50%, #5a82bc); }
.imac__top, .imac__bottom {
  left: var(--imac-r);
  width: calc(100em - 2 * var(--imac-r));
  height: var(--imac-t);
  top: calc(var(--imac-t) / -2);
  transform: translateZ(calc(var(--imac-t) / -2)) rotateX(90deg);
  background: linear-gradient(180deg, #8eaedb, #c6d9f2 60%, #a9c3e8);
}
.imac__bottom { top: calc(68em - var(--imac-t) / 2); transform: translateZ(calc(var(--imac-t) / -2)) rotateX(-90deg); background: #49689a; }
.imac__corner {
  width: calc(var(--imac-r) * .5176 + .06em);     /* + a hair of overlap: no light seams at the joins */
  margin-left: -.03em;
  height: var(--imac-t);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--imac-t) / -2)) rotateZ(var(--ca)) translateY(calc(var(--imac-r) * -.9659)) rotateX(90deg);
  background: linear-gradient(180deg, #8eaedb, #c6d9f2 60%, #a9c3e8);
}
.imac__corner::before, .imac__corner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.imac__corner--bl { background: linear-gradient(180deg, #9ab9e2, #b0c9ec 50%, #93b3df); }
.imac__corner--br { background: linear-gradient(180deg, #5a82bc, #6c92c9 50%, #557db7); }
.imac__corner--bl, .imac__corner--br,
.imac__corner--bl::before, .imac__corner--bl::after,
.imac__corner--br::before, .imac__corner--br::after {   /* these face inward: keep them drawn */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.imac__corner::before { transform: translateZ(calc(var(--imac-r) * -.9659)) rotateY(-30deg) translateZ(calc(var(--imac-r) * .9659)); }
.imac__corner::after  { transform: translateZ(calc(var(--imac-r) * -.9659)) rotateY(30deg)  translateZ(calc(var(--imac-r) * .9659)); }
.imac__corner--tl { left: calc(var(--imac-r) * .7412); top: calc(var(--imac-r) - var(--imac-t) / 2); --ca: -45deg; }
.imac__corner--tr { left: calc(100em - var(--imac-r) * 1.2588); top: calc(var(--imac-r) - var(--imac-t) / 2); --ca: 45deg; }
.imac__corner--bl { left: calc(var(--imac-r) * .7412); top: calc(68em - var(--imac-r) - var(--imac-t) / 2); --ca: -135deg; }
.imac__corner--br { left: calc(100em - var(--imac-r) * 1.2588); top: calc(68em - var(--imac-r) - var(--imac-t) / 2); --ca: 135deg; }
.imac__stand {                 /* blade: leaves the back of the head, runs down and back */
  left: 36.4em;
  width: 27.2em;
  top: 48em;
  height: 37.6em;
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--imac-t) * -1 - .3em)) rotateX(-22.5deg);
  border-radius: 0 0 .5em .5em;
  background:
    linear-gradient(90deg, rgba(20, 40, 80, .10), rgba(255, 255, 255, .08) 45%, rgba(20, 40, 80, .08)),
    linear-gradient(180deg, #3f679f 0, #5179b3 30%, #6a92c9 78%, #8fb2e0 96%, #b9d1f0 100%);
}
.imac__foot {                  /* the foot on the floor, running forward under the head */
  left: 36.4em;
  width: 27.2em;
  top: calc(48em + 34.7em - 13.4em);
  height: 26.8em;
  border-radius: .6em;
  transform-origin: 50% 50%;
  transform: translateZ(calc(var(--imac-t) * -1 - .3em - 14.4em + 13.4em)) rotateX(90deg);
  background: linear-gradient(180deg, #6e92c6, #94b4e0 60%, #b3cbed);
  box-shadow: inset 0 -.35em 0 #5f84bb, inset 0 -.5em 0 rgba(255, 255, 255, .55);
}
.imac__shadow {
  left: 30em;
  width: 40em;
  top: calc(48em + 34.7em - 15em);
  height: 30em;
  border-radius: 50%;
  transform: translateZ(-1.4em) translateY(.08em) rotateX(90deg);
  background: radial-gradient(closest-side, rgba(20, 40, 80, .32), rgba(20, 40, 80, .12) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .mbp__view > * { transition: none; }
}

/* ==========================================================================
   Seam fixes from the second independent review (Oct 9 2026), tested by injecting them after this file. Magenta-backdrop sweeps (--open 0..1, every 2nd step, pixels >35% backdrop inside the silhouette): std 1440 1300->328, yaw 1440 27823->140, front 1440 64204->490, std 390 18140->243; iMac flat 507->66, yaw 1322->23. */
.mbp__hinge { width: calc(100em - 2 * var(--mbp-r)); left: calc(var(--mbp-r) - 50em); }
.mbp__lid-top { top: calc(var(--mbp-tl) / -2 - .08em); height: calc(var(--mbp-tl) + .16em); }
.mbp__lid-side { left: calc(var(--mbp-tl) / -2 - .08em); width: calc(var(--mbp-tl) + .16em); }
.mbp__lid-side--r { left: calc(100em - var(--mbp-tl) / 2 - .08em); }
.mbp__lid-corner { top: calc(var(--mbp-r) - var(--mbp-tl) / 2 - .08em); height: calc(var(--mbp-tl) + .16em);
  width: calc(var(--mbp-r) * .5359 + .06em);
  transform: rotateZ(var(--ca)) translateY(calc(var(--mbp-r) * -1)) rotateX(90deg); }
.mbp__lid-corner::before { transform: translateZ(calc(var(--mbp-r) * -1)) rotateY(-30deg) translateZ(var(--mbp-r)); }
.mbp__lid-corner::after  { transform: translateZ(calc(var(--mbp-r) * -1)) rotateY(30deg)  translateZ(var(--mbp-r)); }
.mbp__lid-corner--l { left: calc(var(--mbp-r) * .7321); }
.mbp__lid-corner--r { left: calc(100em - var(--mbp-r) * 1.2679); }
.mbp__hinge { height: calc(var(--mbp-tl) + .4em); }
.mbp__lid::before { inset: 0; transform: translateZ(calc(var(--mbp-tl) / 2 - .3em)); }
.mbp__lid-side--l { background: linear-gradient(90deg, #c4c6ca 0, #dfe1e3 40%, #cfd1d4 75%, #9a9ca1 100%); }
.mbp__lid-side--r { background: linear-gradient(270deg, #a7a9ad 0, #c3c5c9 40%, #b5b7bb 75%, #85878c 100%); }

/* iMac: same edge overlap + full backing plane; flat iMac drawn without 3D tilt (sharp screen) */
.imac__side { width: calc(var(--imac-t) + .16em); left: calc(var(--imac-t) / -2 - .08em); }
.imac__side--r { left: calc(100em - var(--imac-t) / 2 - .08em); }
.imac__top, .imac__bottom { height: calc(var(--imac-t) + .16em); top: calc(var(--imac-t) / -2 - .08em); }
.imac__bottom { top: calc(68em - var(--imac-t) / 2 - .08em); }
.imac__corner { height: calc(var(--imac-t) + .16em); }
.imac__corner--tl, .imac__corner--tr { top: calc(var(--imac-r) - var(--imac-t) / 2 - .08em); }
.imac__corner--bl, .imac__corner--br { top: calc(68em - var(--imac-r) - var(--imac-t) / 2 - .08em); }
.imac__body::before { inset: 0; transform: translateZ(-.6em); }
.imac { --tilt: 0; }
.imac--yaw { --tilt: 4; }
.imac__stand { height: 38em; }             /* +.4em: sinks the blade into the foot, kills the see-through line at the joint */