@font-face {
	font-family: 'DPV Site Font';
	src: url('../fonts/site-font.ttf') format('truetype');
	font-display: swap;
	font-style: normal;
	font-weight: 100 900;
}

:root {
	--dpv-ink: #17212b;
	--dpv-muted: #647383;
	--dpv-line: #d8e0e7;
	--dpv-panel: #ffffff;
	--dpv-workbench: #111820;
	--dpv-workbench-2: #1c2732;
	--dpv-focus: #73c9ff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button { font: inherit; }
button:focus-visible { outline: 3px solid var(--dpv-focus); outline-offset: 2px; }
.dpv-app {
	min-width: 320px;
	background: #e8edf2;
	color: var(--dpv-ink);
	font-family: 'DPV Site Font', Arial, sans-serif;
}
.dpv-workbench {
	position: sticky;
	top: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	min-height: 92px;
	padding: 12px 18px;
	background: linear-gradient(135deg, var(--dpv-workbench), var(--dpv-workbench-2));
	color: #edf6ff;
	box-shadow: 0 16px 40px rgba(15, 28, 40, .18);
}
.dpv-workbench-brand { display: grid; gap: 2px; min-width: 180px; }
.dpv-workbench-brand strong { font-size: 1rem; }
.dpv-workbench-brand > span:last-child { color: #aebdca; font-size: .78rem; }
.dpv-kicker { color: #76d0ff; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.dpv-control-scroll { display: flex; gap: 10px; min-width: 0; overflow-x: auto; padding: 2px 2px 7px; scrollbar-color: #536574 transparent; }
.dpv-control-group { display: flex; gap: 4px; flex: 0 0 auto; margin: 0; padding: 15px 8px 7px; border: 1px solid #364654; border-radius: 10px; }
.dpv-control-group legend { padding: 0 5px; color: #9fb1c0; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.dpv-control-group button {
	border: 1px solid transparent;
	border-radius: 7px;
	padding: 7px 9px;
	background: transparent;
	color: #dce8f2;
	cursor: pointer;
	white-space: nowrap;
	font-size: .76rem;
}
.dpv-control-group button:hover { background: #293845; }
.dpv-control-group button[aria-pressed='true'] { border-color: #5cc5ff; background: #164a67; color: #fff; }
.dpv-status { width: 170px; margin: 0; color: #b9c9d5; font-size: .72rem; line-height: 1.45; }
.dpv-canvas { min-height: calc(100vh - 92px); padding: clamp(18px, 4vw, 54px); overflow: auto; }
.dpv-device {
	width: min(100%, 1500px);
	min-width: 300px;
	margin: 0 auto;
	border: 1px solid #b9c4ce;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 32px 90px rgba(23, 38, 52, .22);
	transition: width .25s ease;
}
.dpv-app[data-viewport='tablet'] .dpv-device { width: min(100%, 900px); }
.dpv-app[data-viewport='mobile'] .dpv-device { width: min(100%, 430px); }
.dpv-browser-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: #edf1f4; border-bottom: 1px solid #d3dbe2; }
.dpv-browser-bar > span { width: 8px; height: 8px; border-radius: 50%; background: #9ba8b4; }
.dpv-browser-bar > div { max-width: 440px; margin-left: 8px; padding: 4px 18px; overflow: hidden; border: 1px solid #d7dfe5; border-radius: 12px; background: #fff; color: #6b7884; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.dpv-site { position: relative; min-height: 720px; overflow: hidden; background: var(--site-page); color: var(--site-text); }

@media (max-width: 950px) {
	.dpv-workbench { grid-template-columns: minmax(140px, auto) minmax(0, 1fr); }
	.dpv-status { display: none; }
}

@media (max-width: 620px) {
	.dpv-workbench { position: relative; grid-template-columns: 1fr; }
	.dpv-workbench-brand { grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; }
	.dpv-canvas { min-height: 0; padding: 10px; }
	.dpv-device { border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}