/* A MacBook Pro deck seen from above, built to real proportions (14-inch: 31.3 cm wide).
   1 cqw = 1% of the deck's width, so everything scales together.
   Light comes from above and slightly in front, the way Apple lights its top-down product shots.
   The front corners are true circular arcs (about 11 mm), and the rolled edge follows them all the way round. */

.deck {
  --al-1: #e6e7ea; --al-2: #d3d5d9; --al-edge: #a9acb2; --al-face: #8e9197;
  --well: #0b0b0d; --cap-1: #262629; --cap-2: #1c1c1f; --legend: rgba(255,255,255,0.86);
  --pad-1: #e9eaed; --pad-2: #dfe0e4;
  --hi: rgba(255,255,255,0.85);
  --grain: 0.5; --film: 0.32;
  position: relative; container-type: inline-size; border-radius: 0 0 3.6cqw 3.6cqw;
}
.deck[data-finish="black"] {
  --al-1: #3a3b3e; --al-2: #2b2c2f; --al-edge: #1c1d1f; --al-face: #141516;
  --well: #060607; --cap-1: #202022; --cap-2: #171719; --legend: rgba(255,255,255,0.8);
  --pad-1: #35363a; --pad-2: #2d2e31;
  --hi: rgba(255,255,255,0.2);
  --grain: 0.7; --film: 0.45;
}

/* The aluminium: base tone, slightly darker toward the sides */
.deck .body {
  position: relative; border-radius: inherit; overflow: hidden; padding-top: 1px;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,0.03)),
    linear-gradient(180deg, var(--al-1) 0%, var(--al-2) 100%);
}
.deck[data-finish="black"] .body {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0) 14%, rgba(0,0,0,0) 86%, rgba(0,0,0,0.12)),
    linear-gradient(180deg, var(--al-1) 0%, var(--al-2) 100%);
}
/* Bead-blast: fine pits, some unevenness, and the odd glint where a pit catches the light (tex/make_textures.py) */
.deck .body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay; z-index: 0;
  background: url("tex/al-micro.png") 0 0 / 256px 256px;
}

/* Camera layers over everything (case, keys, trackpad, finger): a whisper of depth of field at the far edge, and sensor grain */
.deck .dof { position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 5; pointer-events: none; -webkit-backdrop-filter: blur(0.9px); backdrop-filter: blur(0.9px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.deck .film { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; background: url("tex/film.png") 0 0 / 128px 128px; mix-blend-mode: overlay; opacity: var(--film); }

/* Keyboard: black well cut into the aluminium, square keycaps on a 19 mm pitch */
.deck .keyboard {
  position: relative; z-index: 1; margin: 2.6cqw 6cqw 0; padding: 0.6cqw; border-radius: 1.3cqw; background: var(--well);
  box-shadow:
    inset 0 0.35cqw 0.7cqw rgba(0,0,0,0.7),
    0 0 0 0.1cqw rgba(0,0,0,0.35),
    0 0.14cqw 0 0.1cqw rgba(255,255,255,0.55);
}
.deck[data-finish="black"] .keyboard { box-shadow: inset 0 0.35cqw 0.7cqw rgba(0,0,0,0.8), 0 0 0 0.1cqw rgba(0,0,0,0.5), 0 0.14cqw 0 0.1cqw rgba(255,255,255,0.08); }
.deck .keys { display: grid; gap: 0.62cqw; }
.deck .keys > div { display: flex; gap: 0.62cqw; }
.deck .keys i {
  flex: 1; height: 5.45cqw; border-radius: 0.7cqw; display: flex; align-items: center; justify-content: center; position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--cap-1) 0%, var(--cap-2) 100%);
  box-shadow:
    inset 0 0.09cqw 0 rgba(255,255,255,0.13),
    inset 0 -0.12cqw 0 rgba(0,0,0,0.55),
    inset 0.08cqw 0 0 rgba(255,255,255,0.03), inset -0.08cqw 0 0 rgba(255,255,255,0.03);
  font: 400 1.55cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; font-style: normal; color: var(--legend);
}
.deck .keys i::after { content: ""; position: absolute; inset: 10%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,calc(var(--w, 0) * 0.07)), rgba(255,255,255,0)); }
.deck .keys i.mod { flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 0 0.75cqw 0.85cqw; font-size: 1cqw; letter-spacing: 0.01em; gap: 0.3cqw; }
.deck .keys i.mod.r { align-items: flex-end; padding: 0 0.85cqw 0.75cqw 0; }
.deck .keys i.mod s { text-decoration: none; font-size: 1.3cqw; }
.deck .keys i.pair { flex-direction: column; gap: 0.55cqw; font-size: 1.25cqw; }
.deck .keys .arrows { flex: 3; display: flex; gap: 0.5cqw; height: auto; align-items: flex-end; background: none; box-shadow: none; border-radius: 0; }
.deck .keys .arrows > i { flex: 1; height: 2.6cqw; border-radius: 0.55cqw; font-size: 0.8cqw; }
.deck .keys .arrows > b { flex: 1; display: flex; flex-direction: column; gap: 0.25cqw; }
.deck .keys .arrows b i { flex: none; height: 2.6cqw; border-radius: 0.55cqw; font-size: 0.8cqw; }
.deck .keys .arrows b i:first-child { height: 2.6cqw; }

/* Force Touch trackpad: glass, same tone as the case, a hair lower, with a fine gap around it */
.deck .pad {
  position: relative; z-index: 1; width: 48cqw; aspect-ratio: 1.56; margin: 2.6cqw auto 3.4cqw; border-radius: 1.5cqw;
  background: linear-gradient(180deg, var(--pad-1) 0%, var(--pad-2) 100%);
  box-shadow:
    0 0 0 0.1cqw rgba(0,0,0,0.26),
    0 0.12cqw 0 0.1cqw rgba(255,255,255,0.6),
    inset 0 0.18cqw 0.3cqw rgba(0,0,0,0.09);
}
.deck[data-finish="black"] .pad {
  background: linear-gradient(180deg, var(--pad-1) 0%, var(--pad-2) 100%);
  box-shadow: 0 0 0 0.1cqw rgba(0,0,0,0.6), 0 0.12cqw 0 0.1cqw rgba(255,255,255,0.08), inset 0 0.18cqw 0.3cqw rgba(0,0,0,0.25);
}

/* glass finish over the glow: one broad reflection and faint oily smudges */
.deck .pad::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: url("tex/pad.jpg") 0 0 / 100% 100%; mix-blend-mode: soft-light; opacity: 0.9; }

/* Edge zones: a faint tint, a level that fills up to the finger, a light pooled under the fingertip */
.deck .zone { position: absolute; top: 6%; bottom: 6%; width: 12%; border-radius: 1.1cqw; --y: 78%; --p: 0; --lvl: 50%; overflow: hidden; }
.deck .zone.l { left: 2.4%; --c: 255,159,10; }
.deck .zone.r { right: 2.4%; --c: 0,113,227; }
.deck .zone::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--dir), rgba(var(--c),0.26), rgba(var(--c),0)); }
.deck .zone.l::before { --dir: 90deg; } .deck .zone.r::before { --dir: 270deg; }
.deck .zone .lvl { position: absolute; left: 0; right: 0; bottom: 0; height: var(--lvl); background: linear-gradient(var(--dir), rgba(var(--c),0.3), rgba(var(--c),0.04));
  -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - 2.4cqw), transparent); mask-image: linear-gradient(0deg, #000 calc(100% - 2.4cqw), transparent); }
.deck .zone.l .lvl { --dir: 90deg; } .deck .zone.r .lvl { --dir: 270deg; }
.deck .zone .pool { position: absolute; inset: 0; opacity: var(--p); background: radial-gradient(90% 16% at 50% var(--y), rgba(var(--c),0.5), rgba(var(--c),0) 100%); }
.deck .lbl { position: absolute; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; font: 600 1.55cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; letter-spacing: 0.04em; color: rgba(0,0,0,0.34); white-space: nowrap; }
.deck[data-finish="black"] .lbl { color: rgba(255,255,255,0.4); }
.deck .lbl.l { left: 5.4%; rotate: 180deg; }
.deck .lbl.r { right: 5.4%; }

/* Fingertip. Hovering: a wide, soft shadow offset toward the viewer. Touching: the shadow tightens under a contact patch. */
.deck .finger { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; --h: 1; --p: 0; z-index: 2; }
.deck .finger .shade {
  position: absolute; width: 7.4cqw; height: 8.6cqw; left: -3.7cqw; top: -4.3cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20,20,30,0.34), rgba(20,20,30,0) 100%);
  transform: translate(calc(var(--h) * 0.7cqw), calc(var(--h) * 2.4cqw)) scale(calc(1 + var(--h) * 0.45));
  opacity: calc(var(--vis) * (0.45 + var(--p) * 0.4));
  filter: blur(calc(0.25cqw + var(--h) * 0.9cqw));
}
.deck .finger .tip {
  position: absolute; width: 4.6cqw; height: 5.5cqw; left: -2.3cqw; top: -2.75cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(25,25,35,0.24), rgba(25,25,35,0.12) 70%, rgba(25,25,35,0) 100%);
  box-shadow: inset 0 0 0 0.08cqw rgba(255,255,255,0.18);
  opacity: calc(var(--vis) * var(--p)); transform: scale(calc(0.85 + var(--p) * 0.15));
}

/* Lid-lift scoop in the front edge */
.deck .notch { position: absolute; z-index: 3; left: 50%; bottom: 0; width: 15cqw; margin-left: -7.5cqw; height: 1.1cqw; border-radius: 1.6cqw 1.6cqw 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(255,255,255,0.35) 60%, rgba(0,0,0,0.1));
  box-shadow: inset 0 0.08cqw 0.12cqw rgba(0,0,0,0.18); }

/* Front edge: a sliver of the front face at the very edge, then the specular roll-over just inside it.
   Drawn as inset shadows on the deck's own outline, so both bands bend around the corners with the case
   and thin out up the sides, the way a front-lit rounded edge does. */
.deck .lip { position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 -0.42cqw 0.12cqw -0.04cqw var(--al-face),
    inset 0 -0.6cqw 0.1cqw -0.04cqw var(--al-edge),
    inset 0 -1.15cqw 0.4cqw -0.1cqw var(--hi); }

/* The deck fades out at the top: the keyboard carries on above the frame */
.deck-fade { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.5) 14%, #000 30%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,0.5) 14%, #000 30%); }

/* Shadows that obey one light: a dark contact line right at the edge, a soft occlusion pool, a wide faint penumbra */
.deck-shadow { filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.28)) drop-shadow(0 6px 8px rgba(0,0,0,0.1)) drop-shadow(0 28px 34px rgba(0,0,0,0.12)); }