/**
 * HD Device Mockups 3.3.0 — pure-CSS device frames.
 *
 * 3.3.0 additions: Chrome + Firefox branded browser chromes (light/dark
 * each), white bezel variants for iPad/iPhone (bezel="white"), space-black
 * MacBook Pro tuning, Pro-Stand for the Studio Display, and the .hdm-stack
 * composition layout (back / left / right slots, up to 3 devices).
 *
 * Every frame is drawn with borders, radii, gradients, box-shadows and
 * ::before/::after pseudo-elements. The only "image" is one tiny inline-SVG
 * data-URI (the padlock hint in the browser address pill). Finishes are
 * themeable via the custom properties declared on .hdm-mockup.
 *
 * 3.2.0 — frames track Apple's current product-bezel resources:
 *   macbook → MacBook Pro (M5): black-glass bezel, camera notch, aluminum
 *             deck with thumb scoop, contact shadow. 3024×1964 screen.
 *   studio  → Studio Display (2026): slim uniform black bezel inside an
 *             aluminum rim, flat aluminum stand arm + foot. 5K 16:9 screen
 *             with slightly rounded corners (replaces the old iMac frame).
 *   ipad    → iPad Pro (M5): uniform slim black bezel inside an aluminum
 *             rail, landscape Center Stage camera. 4:3 / 3:4 screen.
 *   iphone  → iPhone 17: aluminum rail, Dynamic Island, side/volume
 *             buttons, optional glass sheen (disable with .hdm-no-glare).
 *             2622×1206 screen (portrait and landscape).
 *   browser → macOS Safari chrome (true traffic-light colors, centered
 *             address pill with lock hint, hairline divider).
 *
 * Interaction (3.2.0): scroll="true" screens are cursor-interactive —
 * the screenshot nudges vertically as the pointer approaches (movement
 * affordance), and scrolls with the mouse wheel or by click-dragging,
 * vertically only. The JS toggles .hdm-interactive / .hdm-dragging.
 *
 * Legacy class names (.dm-device, .dm-browser, .device, .screen, .dm-width,
 * .dm-stacked, .dm-scroll, .has-gallery) are emitted alongside the hdm-*
 * classes so existing site CSS keeps working.
 */

/* ---------------------------------------------------------------------------
 * 1. Component root + finish tokens
 * ------------------------------------------------------------------------ */

.hdm-mockup {
	/* Silver / light finish (default). */
	--hdm-frame: #d9dbdf;         /* main frame surface   */
	--hdm-frame-hi: #f7f8fa;      /* frame highlight      */
	--hdm-frame-edge: #9ba0ab;    /* frame edge / shading */
	--hdm-screen-bg: #10131a;     /* screen backing       */
	--hdm-screen-edge: #05070b;   /* inner screen rim     */
	--hdm-bezel: #0b0d11;         /* black display glass around the screen */
	--hdm-bezel-hi: #181b21;      /* bezel catch-light                     */
	--hdm-radius: 1.1rem;         /* outer frame radius   */
	--hdm-screen-radius: 0.45rem; /* screen corner radius */
	--hdm-bar: #f6f6f6;           /* browser chrome bar   */
	--hdm-pill: #ffffff;          /* browser address pill */
	--hdm-pill-text: #9a9ea8;
	/* Layered elevation: tight contact shadow + soft ambient falloff. */
	--hdm-shadow:
		0 0.4rem 0.7rem -0.45rem rgba(10, 14, 24, 0.35),
		0 2.2rem 3.4rem -1.6rem rgba(10, 14, 24, 0.4);

	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	line-height: 0; /* kill whitespace gaps around screen content */
}

.hdm-mockup figcaption {
	line-height: 1.5;
}

/* Dark graphite finish: black / space-gray / graphite / titanium. */
.hdm-finish-dark {
	--hdm-frame: #43454c;
	--hdm-frame-hi: #6e727b;
	--hdm-frame-edge: #17181d;
	--hdm-bar: #38383d;
	--hdm-pill: #46464c;
	--hdm-pill-text: #8b8e96;
}

/* Champagne gold finish. */
.hdm-finish-gold {
	--hdm-frame: #e5d0a6;
	--hdm-frame-hi: #f9eed6;
	--hdm-frame-edge: #ad8b4c;
	--hdm-bar: #efe2c4;
	--hdm-pill: #f9f2e0;
	--hdm-pill-text: #a08a5c;
}

/* White display-glass bezel (bezel="white") — iPad / iPhone variants that
 * match the white-front hardware. The Dynamic Island / camera stay dark,
 * exactly like the real devices. */
.hdm-bezel-white {
	--hdm-bezel: #f3f4f6;
	--hdm-bezel-hi: #ffffff;
	--hdm-screen-edge: #c9ccd2;
}

.hdm-bezel-white.hdm-type-ipad .device {
	background:
		linear-gradient(155deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 45%, #e8eaee 100%)
			padding-box,
		linear-gradient(
			145deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 45%,
			var(--hdm-frame-edge) 100%
		) border-box;
}

.hdm-bezel-white.hdm-type-iphone .device {
	background:
		linear-gradient(180deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 10%, #e8eaee 100%)
			padding-box,
		linear-gradient(
			125deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 30%,
			var(--hdm-frame-edge) 62%,
			var(--hdm-frame) 88%,
			var(--hdm-frame-hi) 100%
		) border-box;
}

/* Camera dot needs a rim to sit on white glass. */
.hdm-bezel-white .device::before {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------------------
 * 2. Shared frame + screen
 * ------------------------------------------------------------------------ */

.hdm-mockup .device {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	border-radius: var(--hdm-radius);
	background:
		linear-gradient(
			155deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 42%,
			var(--hdm-frame) 68%,
			var(--hdm-frame-edge) 100%
		);
	border: 1px solid var(--hdm-frame-edge);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 1px rgba(0, 0, 0, 0.18),
		var(--hdm-shadow);
}

.hdm-finish-dark .device {
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -1px 1px rgba(0, 0, 0, 0.5),
		var(--hdm-shadow);
}

.hdm-mockup .screen {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	overflow: hidden; /* clip screen content to the glass */
	background: var(--hdm-screen-bg);
	border-radius: var(--hdm-screen-radius);
	box-shadow:
		inset 0 0 0 1px var(--hdm-screen-edge),
		inset 0 0 1.2rem rgba(0, 0, 0, 0.3);
	/*
	 * Aspect ratios are set per device below with the modern `aspect-ratio`
	 * property (Requires at least: 6.0 implies evergreen browsers).
	 * Fallback for ancient browsers, if ever needed:
	 *   .screen { height: 0; padding-top: <ratio>%; }  e.g. 62.5% for 16:10.
	 */
}

.hdm-mockup .screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.hdm-mockup .screen a.hdm-screen-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	box-shadow: none;
	text-decoration: none;
}

/* Image-optimizer plugins (ShortPixel) wrap screen images in <picture>;
 * inline picture boxes can introduce baseline slivers — normalize them. */
.hdm-mockup .screen picture {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
	font-size: 0;
}

/* ---------------------------------------------------------------------------
 * 3. MacBook — MacBook Pro (M5): black-glass lid with camera notch,
 *    aluminum deck with front lip + thumb scoop, contact shadow
 * ------------------------------------------------------------------------ */

.hdm-type-macbook {
	padding-bottom: 1.7rem; /* room for the deck + contact shadow */
}

/* Space-black MacBook Pro (color="black"/dark finish): deep grey aluminum
 * like the M-series Pro hardware, darker than the generic graphite. */
.hdm-type-macbook.hdm-finish-dark {
	--hdm-frame: #2e2f33;
	--hdm-frame-hi: #55575e;
	--hdm-frame-edge: #121317;
}

/*
 * The lid. The whole front of a modern MacBook Pro is black glass; the
 * aluminum shows only as a thin machined rim, drawn here as a 2px gradient
 * border (padding-box / border-box double background).
 */
.hdm-type-macbook .device {
	padding: 2% 1.9% 2%;
	margin: 0 4.5%; /* the deck extends slightly beyond the lid */
	border: 2px solid transparent;
	border-radius: 0.9rem 0.9rem 0.3rem 0.3rem;
	background:
		linear-gradient(180deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 9%, #07080b 100%)
			padding-box,
		linear-gradient(
			180deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 35%,
			var(--hdm-frame-edge) 100%
		) border-box;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.05),
		0 1.5rem 2.6rem -1.9rem rgba(10, 14, 24, 0.5);
}

/* MacBook Pro (M5) 14" panel: 3024×1964. */
.hdm-type-macbook .screen {
	aspect-ratio: 3024 / 1964;
	--hdm-screen-radius: 0.35rem 0.35rem 0.2rem 0.2rem;
}

/* Camera notch: black tab ~1/6 screen width hanging from the top bezel,
 * with the camera lens drawn as a radial gradient at its center. */
.hdm-type-macbook .device::before {
	content: "";
	position: absolute;
	top: 0; /* flush against the aluminum rim, blending into the bezel */
	left: 50%;
	width: 15.5%;
	height: 5.4%;
	transform: translateX(-50%);
	border-radius: 0 0 0.32rem 0.32rem;
	background:
		radial-gradient(
			circle 0.11rem at 50% 62%,
			#2c3a4e 0%,
			#131a24 55%,
			transparent 75%
		),
		linear-gradient(180deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 20%, var(--hdm-bezel) 100%);
	z-index: 2;
}

/* Aluminum deck: top surface with a faint keyboard-well inset, front lip
 * with the centered thumb scoop, rounded lower corners. */
.hdm-type-macbook .device::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -5.2%;
	right: -5.2%;
	height: 1rem;
	border-radius: 0 0 0.55rem 0.55rem / 0 0 0.5rem 0.5rem;
	background:
		/* thumb scoop: shallow dip cut into the front lip, centered */
		radial-gradient(
			10% 58% at 50% 0,
			rgba(0, 0, 0, 0.22) 0 40%,
			rgba(0, 0, 0, 0.07) 52%,
			transparent 60%
		),
		/* very faint keyboard-well hint on the deck's top surface */
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.08),
			rgba(0, 0, 0, 0.02)
		) no-repeat top center / 86% 42%,
		/* deck top surface -> front lip -> under-edge */
		linear-gradient(
			to bottom,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 38%,
			var(--hdm-frame) 62%,
			var(--hdm-frame-edge) 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.5),
		inset 0 -1px 1px rgba(0, 0, 0, 0.22),
		/* contact shadow grounding the base */
		0 0.3rem 0.45rem -0.25rem rgba(10, 14, 24, 0.5),
		0 0.55rem 1rem -0.4rem rgba(10, 14, 24, 0.3);
}

/* A caption must clear the absolutely-positioned deck. */
.hdm-type-macbook .hdm-caption {
	margin-top: 2rem;
}

.hdm-type-macbook:has(.hdm-caption) {
	padding-bottom: 0.2rem; /* the caption margin already reserves the space */
}

/* ---------------------------------------------------------------------------
 * 4. Studio Display (2026) — slim uniform black bezel inside a thin aluminum
 *    rim, flat aluminum stand arm + foot, floating shadow. Replaces the old
 *    iMac frame; legacy type="imac" maps here. Screen corners are slightly
 *    rounded by design choice (the hardware is square-cornered).
 * ------------------------------------------------------------------------ */

.hdm-type-studio {
	padding-bottom: 2.7rem; /* room for the Pro-Stand slab + shadow */
}

/*
 * Body: black display glass edge-to-edge with a slim uniform bezel; the
 * aluminum enclosure shows as a thin machined rim, drawn as a 2px gradient
 * border (padding-box / border-box double background), like the hardware.
 */
.hdm-type-studio .device {
	padding: 2.4%;
	border: 2px solid transparent;
	border-radius: 0.7rem;
	background:
		linear-gradient(165deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 40%, #07080b 100%)
			padding-box,
		linear-gradient(
			180deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 45%,
			var(--hdm-frame-edge) 100%
		) border-box;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.05),
		var(--hdm-shadow);
}

/* 27" 5K panel: 5120×2880 = 16:9, corners rounded slightly. */
.hdm-type-studio .screen {
	aspect-ratio: 16 / 9;
	--hdm-screen-radius: 0.4rem;
}

/* Center Stage camera dot in the top bezel. */
.hdm-type-studio .device::before {
	content: "";
	position: absolute;
	top: 1.15%;
	left: 50%;
	width: 0.28rem;
	height: 0.28rem;
	transform: translate(-50%, -10%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #35435a, #0d1117 70%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
	z-index: 2;
}

/* Pro-Stand: one wide flat aluminum slab (Pro Display XDR style) with a
 * small darker foot lip at the bottom and a contact shadow. */
.hdm-type-studio .device::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 23.5%;
	height: 2.4rem;
	transform: translateX(-50%);
	border-radius: 0 0 0.18rem 0.18rem;
	background:
		/* foot lip: slightly darker band at the very bottom */
		linear-gradient(
			to bottom,
			transparent 0 82%,
			rgba(0, 0, 0, 0.1) 82% 86%,
			rgba(255, 255, 255, 0.28) 86% 90%,
			rgba(0, 0, 0, 0.12) 96% 100%
		),
		/* brushed slab: soft vertical sheen, edges shaded */
		linear-gradient(
			to right,
			var(--hdm-frame-edge) 0%,
			var(--hdm-frame) 8%,
			var(--hdm-frame-hi) 38%,
			var(--hdm-frame) 72%,
			var(--hdm-frame-edge) 100%
		);
	/* seam where the slab meets the display + grounding shadow */
	box-shadow:
		inset 0 2px 2px -1px rgba(0, 0, 0, 0.28),
		0 0.35rem 0.5rem -0.25rem rgba(10, 14, 24, 0.45),
		0 0.6rem 1.1rem -0.4rem rgba(10, 14, 24, 0.25);
}

/* A caption must clear the absolutely-positioned stand. */
.hdm-type-studio .hdm-caption {
	margin-top: 2.9rem;
}

.hdm-type-studio:has(.hdm-caption) {
	padding-bottom: 0.2rem; /* the caption margin already reserves the space */
}

/* ---------------------------------------------------------------------------
 * 5. iPad — iPad Pro (M5): aluminum rail around a uniform slim black bezel,
 *    squircle-feel nested radii, landscape Center Stage camera
 * ------------------------------------------------------------------------ */

/*
 * The rail is a 2px gradient border (border-box layer); everything inside
 * it is black display glass, exactly like the hardware.
 */
.hdm-type-ipad .device {
	padding: 3.2%;
	border: 2px solid transparent;
	border-radius: 1.5rem;
	background:
		linear-gradient(155deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 45%, #07080c 100%)
			padding-box,
		linear-gradient(
			145deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 45%,
			var(--hdm-frame-edge) 100%
		) border-box;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.05),
		var(--hdm-shadow);
}

/* 2752×2064 panel: exactly 4:3 (3:4 in portrait). */
.hdm-type-ipad .screen {
	aspect-ratio: 3 / 4; /* portrait default */
	--hdm-screen-radius: 0.95rem; /* nested radius -> continuous-curve feel */
}

.hdm-type-ipad.hdm-orientation-landscape .screen,
.hdm-type-ipad.landscape .screen {
	aspect-ratio: 4 / 3;
}

/* Center Stage camera sits on the LANDSCAPE edge (M5 hardware): top bezel
 * in landscape, left bezel in portrait. */
.hdm-type-ipad .device::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.5%;
	width: 0.3rem;
	height: 0.3rem;
	transform: translate(-10%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #35435a, #0d1117 70%);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.hdm-type-ipad.hdm-orientation-landscape .device::before,
.hdm-type-ipad.landscape .device::before {
	top: 1.5%;
	left: 50%;
	transform: translate(-50%, -10%);
}

/* ---------------------------------------------------------------------------
 * 6. iPhone — iPhone 17: aluminum rail flowing into the screen radius,
 *    Dynamic Island, side/volume buttons, glass sheen
 * ------------------------------------------------------------------------ */

/* Space-black aluminum via the dark finish mapping. */
.hdm-type-iphone.hdm-finish-dark {
	--hdm-frame: #55565c;
	--hdm-frame-hi: #93959c;
	--hdm-frame-edge: #232428;
}

/*
 * Rail: a 3px gradient border with the highlight biased to the upper-left,
 * so one side of the frame catches light like brushed aluminum. Percentage
 * radii keep body/screen corners proportional at any rendered size.
 */
.hdm-type-iphone .device {
	padding: 2.4%;
	border: 3px solid transparent;
	border-radius: 15.5% / 7.4%;
	background:
		linear-gradient(180deg, var(--hdm-bezel-hi) 0%, var(--hdm-bezel) 10%, #07080b 100%)
			padding-box,
		linear-gradient(
			125deg,
			var(--hdm-frame-hi) 0%,
			var(--hdm-frame) 30%,
			var(--hdm-frame-edge) 62%,
			var(--hdm-frame) 88%,
			var(--hdm-frame-hi) 100%
		) border-box;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.06),
		var(--hdm-shadow);
}

/* iPhone 17 panel: 2622×1206 (6.3"), Dynamic Island. */
.hdm-type-iphone .screen {
	aspect-ratio: 1206 / 2622; /* portrait default */
	--hdm-screen-radius: 13.5% / 6.25%; /* tracks the body corner curve */
}

.hdm-type-iphone.hdm-orientation-landscape .screen,
.hdm-type-iphone.landscape .screen {
	aspect-ratio: 2622 / 1206;
	--hdm-screen-radius: 6.25% / 13.5%;
}

.hdm-type-iphone.hdm-orientation-landscape .device,
.hdm-type-iphone.landscape .device {
	border-radius: 7.4% / 15.5%;
	padding: 1.2%;
}

/* Action button + volume nubs on the left rail (portrait only). */
.hdm-type-iphone .device::before {
	content: "";
	position: absolute;
	top: 15%;
	left: -4.5px; /* device pseudos offset from the padding box: clear the 3px rail */
	width: 2.5px;
	height: 17%;
	border-radius: 2px 0 0 2px;
	background:
		/* nub layout: action button / volume up / volume down */
		linear-gradient(
			to bottom,
			#000 0 15%,
			transparent 15% 32%,
			#000 32% 62%,
			transparent 62% 70%,
			#000 70% 100%
		) no-repeat left / 1px 100%,
		linear-gradient(
			to bottom,
			var(--hdm-frame-edge) 0 15%,
			transparent 15% 32%,
			var(--hdm-frame-edge) 32% 62%,
			transparent 62% 70%,
			var(--hdm-frame-edge) 70% 100%
		) no-repeat right / 1.5px 100%;
}

/* Side (power) button on the right rail (portrait only). */
.hdm-type-iphone::before {
	content: "";
	position: absolute;
	top: 26%;
	right: -2px;
	width: 2.5px;
	height: 10%;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(
		to right,
		var(--hdm-frame-edge),
		var(--hdm-frame) 45%,
		var(--hdm-frame-hi) 100%
	);
	box-shadow: 0.5px 0 0 rgba(0, 0, 0, 0.28);
}

.hdm-type-iphone.hdm-orientation-landscape .device::before,
.hdm-type-iphone.landscape .device::before,
.hdm-type-iphone.hdm-orientation-landscape::before,
.hdm-type-iphone.landscape::before {
	content: none;
}

/* Dynamic Island: pill ~26% of the screen width, camera lens hinted on
 * its right side, floating just below the screen's top edge. */
.hdm-type-iphone .device::after {
	content: "";
	position: absolute;
	top: 2.9%;
	left: 50%;
	width: 26%;
	height: 3.5%;
	transform: translateX(-50%);
	border-radius: 999px;
	background:
		radial-gradient(
			circle at 78% 50%,
			#1d2836 0%,
			#0d131c 30%,
			#000 55%
		);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
	z-index: 2;
}

.hdm-type-iphone.hdm-orientation-landscape .device::after,
.hdm-type-iphone.landscape .device::after {
	top: 50%;
	left: 2.9%;
	width: 3.5%;
	height: 26%;
	transform: translateY(-50%);
	background:
		radial-gradient(
			circle at 50% 22%,
			#1d2836 0%,
			#0d131c 30%,
			#000 55%
		);
}

/* Screen glass: faint diagonal reflection sheen. Add .hdm-no-glare to the
 * figure (shortcode class attribute) to turn it off. */
.hdm-type-iphone .screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(
		118deg,
		transparent 34%,
		rgba(255, 255, 255, 0.045) 44%,
		rgba(255, 255, 255, 0.09) 50%,
		rgba(255, 255, 255, 0.035) 56%,
		transparent 66%
	);
}

.hdm-mockup.hdm-no-glare .screen::after {
	content: none;
}

/* ---------------------------------------------------------------------------
 * 7. Browser window — macOS Safari: chrome bar, traffic lights,
 *    centered address pill with lock hint, hairline divider
 * ------------------------------------------------------------------------ */

.hdm-type-browser .device {
	--hdm-radius: 0.7rem;
	padding: 0;
	overflow: hidden; /* bar + screen share the outer radius */
	background: var(--hdm-bar);
	border: 1px solid rgba(0, 0, 0, 0.16);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.4),
		var(--hdm-shadow);
}

.hdm-type-browser .screen {
	aspect-ratio: 16 / 10;
	border-radius: 0;
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

.hdm-browser-bar {
	position: relative;
	height: 2.4rem;
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--hdm-bar) 96%, #fff),
		color-mix(in srgb, var(--hdm-bar) 94%, #000)
	);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12); /* hairline divider */
}

/* Traffic lights: 12px dots in the exact macOS colors, each with a soft
 * top-left catch-light and darker rim (three radial gradients). */
.hdm-browser-bar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.85rem;
	width: 3.25rem;
	height: 0.75rem;
	transform: translateY(-50%);
	background:
		radial-gradient(
			circle 0.375rem at 0.375rem 50%,
			#ff8078 10%,
			#ff5f57 45%,
			#de433c 88%,
			rgba(222, 67, 60, 0) 100%
		),
		radial-gradient(
			circle 0.375rem at 1.625rem 50%,
			#ffd257 10%,
			#febc2e 45%,
			#dfa023 88%,
			rgba(223, 160, 35, 0) 100%
		),
		radial-gradient(
			circle 0.375rem at 2.875rem 50%,
			#57da68 10%,
			#28c840 45%,
			#1fad35 88%,
			rgba(31, 173, 53, 0) 100%
		);
}

/* Centered address pill with a faint padlock hint (tiny inline SVG). */
.hdm-browser-bar::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	/* centered, but never wide enough to collide with the traffic lights */
	width: max(4.5rem, min(46%, calc(100% - 9rem)));
	height: 1.3rem;
	transform: translate(-50%, -50%);
	border-radius: 0.4rem;
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2012'%3E%3Cpath%20fill='%238e8e93'%20d='M5%200a3.2%203.2%200%200%200-3.2%203.2V5h-.4A1.4%201.4%200%200%200%200%206.4v4.2A1.4%201.4%200%200%200%201.4%2012h7.2a1.4%201.4%200%200%200%201.4-1.4V6.4A1.4%201.4%200%200%200%208.6%205h-.4V3.2A3.2%203.2%200%200%200%205%200zm1.8%205H3.2V3.2a1.8%201.8%200%201%201%203.6%200z'/%3E%3C/svg%3E")
			no-repeat center / 0.5rem 0.6rem,
		var(--hdm-pill);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* Dark browser variant (Safari dark chrome). */
.hdm-frame-dark.hdm-type-browser {
	--hdm-bar: #38383d;
	--hdm-pill: #46464c;
	--hdm-pill-text: #8b8e96;
}

.hdm-frame-dark.hdm-type-browser .device {
	border-color: #17181c;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		var(--hdm-shadow);
}

.hdm-frame-dark .hdm-browser-bar {
	border-bottom-color: rgba(0, 0, 0, 0.55);
}

.hdm-frame-dark .hdm-browser-bar::after {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.hdm-frame-light.hdm-type-browser {
	--hdm-bar: #f6f6f6;
	--hdm-pill: #ffffff;
}

/* ---------------------------------------------------------------------------
 * 7b. Branded browser chromes — Chrome and Firefox (light + dark each).
 *     type="chrome" / type="firefox" emit .hdm-brand-* plus a
 *     .hdm-browser-tab element inside the bar (the visible tab). Safari
 *     (type="safari"/"browser") keeps the classic centered-pill chrome.
 * ------------------------------------------------------------------------ */

/* Two-tier bar: tab strip on top, toolbar below. */
.hdm-brand-chrome .hdm-browser-bar,
.hdm-brand-firefox .hdm-browser-bar {
	height: 3.3rem;
	background: linear-gradient(
		to bottom,
		var(--hdm-strip) 0 47%,
		var(--hdm-bar) 47% 100%
	);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Traffic lights sit in the tab strip. */
.hdm-brand-chrome .hdm-browser-bar::before,
.hdm-brand-firefox .hdm-browser-bar::before {
	top: 23.5%;
	left: 0.75rem;
}

/* The visible tab. */
.hdm-browser-tab {
	position: absolute;
	top: 0.28rem;
	left: 4.6rem;
	width: min(34%, 11rem);
	height: 1.28rem;
	background: var(--hdm-tab);
	z-index: 1;
}

/* Favicon dot + title line inside the tab. */
.hdm-browser-tab::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.55rem;
	width: 0.55rem;
	height: 0.55rem;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--hdm-favicon, #7aa9e8);
}

.hdm-browser-tab::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.5rem;
	right: 1.1rem;
	height: 0.28rem;
	transform: translateY(-50%);
	border-radius: 0.14rem;
	background: var(--hdm-pill-text);
	opacity: 0.55;
}

/* Chrome: trapezoid-feel tab fused to the toolbar, left-aligned pill. */
.hdm-brand-chrome .hdm-browser-tab {
	border-radius: 0.55rem 0.55rem 0 0;
	top: 0.3rem;
	height: calc(47% - 0.3rem);
}

.hdm-brand-chrome .hdm-browser-bar::after {
	/* rounded-full omnibox, left-aligned in the toolbar */
	left: 4.9rem;
	right: 1rem;
	width: auto;
	top: 73.5%;
	height: 1.15rem;
	transform: translateY(-50%);
	border-radius: 999px;
}

/* Firefox (Proton): floating rounded tab + softer-radius address field. */
.hdm-brand-firefox .hdm-browser-tab {
	border-radius: 0.3rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.hdm-brand-firefox .hdm-browser-bar::after {
	left: 4.9rem;
	right: 1rem;
	width: auto;
	top: 73.5%;
	height: 1.2rem;
	transform: translateY(-50%);
	border-radius: 0.3rem;
}

/* Nav-arrow hints (back/forward/reload) in the toolbar, both brands. */
.hdm-brand-chrome .hdm-browser-bar,
.hdm-brand-firefox .hdm-browser-bar {
	--hdm-nav-dot: color-mix(in srgb, var(--hdm-pill-text) 68%, transparent);
	background-image:
		radial-gradient(circle 0.16rem at 1.05rem 73.5%, var(--hdm-nav-dot) 0 97%, transparent),
		radial-gradient(circle 0.16rem at 2.25rem 73.5%, var(--hdm-nav-dot) 0 97%, transparent),
		radial-gradient(circle 0.16rem at 3.45rem 73.5%, var(--hdm-nav-dot) 0 97%, transparent),
		linear-gradient(
			to bottom,
			var(--hdm-strip) 0 47%,
			var(--hdm-bar) 47% 100%
		);
}

/* Chrome light. */
.hdm-brand-chrome.hdm-frame-light {
	--hdm-strip: #dee1e6;
	--hdm-bar: #ffffff;
	--hdm-tab: #ffffff;
	--hdm-pill: #f1f3f4;
	--hdm-pill-text: #5f6368;
}

/* Chrome dark. */
.hdm-brand-chrome.hdm-frame-dark {
	--hdm-strip: #202124;
	--hdm-bar: #35363a;
	--hdm-tab: #35363a;
	--hdm-pill: #202124;
	--hdm-pill-text: #9aa0a6;
}

.hdm-brand-chrome.hdm-frame-dark .hdm-browser-tab {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Firefox light. */
.hdm-brand-firefox.hdm-frame-light {
	--hdm-strip: #f0f0f4;
	--hdm-bar: #f9f9fb;
	--hdm-tab: #ffffff;
	--hdm-pill: #f0f0f4;
	--hdm-pill-text: #5b5b66;
	--hdm-favicon: #ff9500;
}

/* Firefox dark. */
.hdm-brand-firefox.hdm-frame-dark {
	--hdm-strip: #1c1b22;
	--hdm-bar: #2b2a33;
	--hdm-tab: #42414d;
	--hdm-pill: #1c1b22;
	--hdm-pill-text: #bfbfc9;
	--hdm-favicon: #ff9500;
}

/* Dark-mode shared frame/border treatment for branded chromes. */
.hdm-brand-chrome.hdm-frame-dark .device,
.hdm-brand-firefox.hdm-frame-dark .device {
	border-color: #17181c;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		var(--hdm-shadow);
}

.hdm-brand-chrome.hdm-frame-dark .hdm-browser-bar,
.hdm-brand-firefox.hdm-frame-dark .hdm-browser-bar {
	border-bottom-color: rgba(0, 0, 0, 0.55);
}

/* Branded pills keep the padlock hint from the shared ::after rule; kill
 * the centered max-width from the Safari layout. */
.hdm-brand-chrome .hdm-browser-bar::after,
.hdm-brand-firefox .hdm-browser-bar::after {
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2012'%3E%3Cpath%20fill='%238e8e93'%20d='M5%200a3.2%203.2%200%200%200-3.2%203.2V5h-.4A1.4%201.4%200%200%200%200%206.4v4.2A1.4%201.4%200%200%200%201.4%2012h7.2a1.4%201.4%200%200%200%201.4-1.4V6.4A1.4%201.4%200%200%200%208.6%205h-.4V3.2A3.2%203.2%200%200%200%205%200zm1.8%205H3.2V3.2a1.8%201.8%200%201%201%203.6%200z'/%3E%3C/svg%3E")
			no-repeat 0.55rem center / 0.45rem 0.55rem,
		var(--hdm-pill);
}

/* ---------------------------------------------------------------------------
 * 8. Legacy wrappers
 * ------------------------------------------------------------------------ */

.dm-width,
.hdm-width {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.dm-stacked,
.hdm-stacked {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * 8b. Stack composition — [hd_stack]: up to 3 devices in back / left /
 *     right slots, all children share one grid cell and bottom-align on a
 *     common ground line. Back slot: Studio Display or MacBook only.
 *     Side slots: MacBook, iPad, iPhone. iPhones always render in front.
 * ------------------------------------------------------------------------ */

.hdm-stack {
	position: relative;
	display: grid;
	width: 100%;
	isolation: isolate; /* contain the slot z-indexes */
}

.hdm-stack > .hdm-mockup {
	grid-area: 1 / 1;
	min-width: 0;
}

/* Back slot: centered, largest, behind everything. */
.hdm-stack .hdm-slot-back {
	justify-self: center;
	align-self: end;
	width: 66%;
	z-index: 1;
}

.hdm-stack .hdm-slot-back.hdm-type-macbook {
	width: 76%;
}

/* Side slots: anchored to the edges, overlapping the back device. */
.hdm-stack .hdm-slot-left {
	justify-self: start;
	align-self: end;
	z-index: 2;
}

.hdm-stack .hdm-slot-right {
	justify-self: end;
	align-self: end;
	z-index: 2;
}

/* Side widths by device type (tuned to the reference composition). */
.hdm-stack .hdm-slot-left.hdm-type-macbook,
.hdm-stack .hdm-slot-right.hdm-type-macbook {
	width: 54%;
}

.hdm-stack .hdm-slot-left.hdm-type-ipad,
.hdm-stack .hdm-slot-right.hdm-type-ipad {
	width: 27%;
	margin-bottom: 0.5rem; /* sit on the shared ground line */
}

.hdm-stack .hdm-slot-left.hdm-type-ipad.hdm-orientation-landscape,
.hdm-stack .hdm-slot-right.hdm-type-ipad.hdm-orientation-landscape,
.hdm-stack .hdm-slot-left.hdm-type-ipad.landscape,
.hdm-stack .hdm-slot-right.hdm-type-ipad.landscape {
	width: 40%;
}

.hdm-stack .hdm-slot-left.hdm-type-iphone,
.hdm-stack .hdm-slot-right.hdm-type-iphone {
	width: 13.5%;
	margin-bottom: 0.5rem;
}

.hdm-stack .hdm-slot-left.hdm-type-iphone.hdm-orientation-landscape,
.hdm-stack .hdm-slot-right.hdm-type-iphone.hdm-orientation-landscape,
.hdm-stack .hdm-slot-left.hdm-type-iphone.landscape,
.hdm-stack .hdm-slot-right.hdm-type-iphone.landscape {
	width: 28%;
}

/* Pull side devices inward so they overlap the back device like the
 * reference art (only when a back device exists to overlap). Narrow
 * devices (iPhones) need a deeper pull to reach the back frame's edge. */
.hdm-stack:has(.hdm-slot-back) .hdm-slot-left {
	margin-left: 2%;
}

.hdm-stack:has(.hdm-slot-back) .hdm-slot-right {
	margin-right: 2%;
}

.hdm-stack:has(.hdm-slot-back) .hdm-slot-left.hdm-type-iphone {
	margin-left: 7%;
}

.hdm-stack:has(.hdm-slot-back) .hdm-slot-right.hdm-type-iphone {
	margin-right: 7%;
}

/* iPhones are always the front-most layer. */
.hdm-stack .hdm-type-iphone {
	z-index: 5;
}

/* Captions inside a composition would collide — suppress them. */
.hdm-stack .hdm-caption {
	display: none;
}

.hdm-stack .hdm-type-studio:has(.hdm-caption) {
	padding-bottom: 2.7rem; /* restore stand room the caption rule removed */
}

/* ---------------------------------------------------------------------------
 * 9. Behaviors: interactive scroll + gallery cross-fade (driven by the JS)
 * ------------------------------------------------------------------------ */

/*
 * Interactive scroll (scroll="true"): tall screenshots keep their natural
 * height and the JS translates them vertically — proximity nudge, wheel,
 * and click-drag. No CSS transition on transform: motion is JS-eased every
 * frame so drag tracks the pointer 1:1.
 */
.hdm-mockup .screen.dm-scroll img,
.hdm-mockup .screen.hdm-scroll img {
	height: auto;
	min-height: 100%;
	object-fit: unset;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/* Cursor affordance + input capture, applied by the JS only when the image
 * actually overflows the screen (there is something to scroll). The hand
 * cursor must also win on descendants — theme CSS gives links a pointer
 * cursor, and portfolio screens are wrapped in a.hdm-screen-link. */
.hdm-mockup .screen.hdm-interactive {
	touch-action: none; /* vertical drags belong to the screen, not the page */
}

.hdm-mockup .screen.hdm-interactive,
.hdm-mockup .screen.hdm-interactive * {
	cursor: grab;
}

.hdm-mockup .screen.hdm-interactive img,
.hdm-mockup .screen.hdm-interactive a.hdm-screen-link {
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.hdm-mockup .screen.hdm-interactive.hdm-dragging,
.hdm-mockup .screen.hdm-interactive.hdm-dragging * {
	cursor: grabbing;
}

.hdm-mockup .screen.hdm-interactive:focus-visible {
	outline: 2px solid #38bdf8;
	outline-offset: 3px;
}

/* Gallery cross-fade: images stack and fade via .hdm-active. */
.hdm-mockup .screen.has-gallery img,
.hdm-mockup .screen.hdm-gallery img {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.hdm-mockup .screen.has-gallery img.hdm-active,
.hdm-mockup .screen.hdm-gallery img.hdm-active {
	opacity: 1;
}

/* Gallery + scroll combined: stacked for the cross-fade but natural height
 * so the active image can pan. Must follow the gallery block above. */
.hdm-mockup .screen.has-gallery.dm-scroll img,
.hdm-mockup .screen.hdm-gallery.hdm-scroll img {
	inset: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: unset;
}

/* Caption. */
.hdm-caption {
	margin-top: 0.9rem;
	font-size: 0.85rem;
	text-align: center;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * 10. Reduced motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.hdm-mockup *,
	.hdm-mockup *::before,
	.hdm-mockup *::after {
		transition: none !important;
		animation: none !important;
	}
}