.apde-wrap{
	--apde-toolbar: #000;
	--apde-icons: #fff;
	--apde-focus: #edc51b;
	--apde-accent: #1b233f;
	--apde-opacity: .92;
	--apde-btn: 56px;
	--apde-ic: 28px;
	--apde-radius: 14px;
	max-width: 100%;
	margin: 0;
}
.apde-toolbar{
	display:flex;
	align-items:center;
	gap: 10px;
	padding: 10px;
	background: var(--apde-toolbar);
	color: var(--apde-icons);
	border-radius: var(--apde-radius);
	opacity: var(--apde-opacity);
}
.apde-btn{
	width: var(--apde-btn);
	height: var(--apde-btn);
	min-width: 48px;
	min-height: 48px;
	border-radius: calc(var(--apde-radius) * 1px);
	border: 0;
	background: rgba(255,255,255,0.08);
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	text-decoration:none;
}
.apde-btn:hover{ background: rgba(255,255,255,0.14); }
.apde-btn:focus, .apde-btn:focus-visible{
	outline: 4px solid var(--apde-focus);
	outline-offset: 2px;
}
.apde-ic{ width: var(--apde-ic); height: var(--apde-ic); }
.apde-ic path{ fill: var(--apde-icons); }
.apde-link{ display:flex; }

.apde-page{ display:flex; align-items:center; gap: 8px; padding: 0 8px; }
.apde-page-input{
	width: 86px;
	height: 42px;
	font-size: 18px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(0,0,0,0.18);
	color: #fff;
	padding: 0 10px;
}
.apde-page-input:focus{ outline: 4px solid var(--apde-focus); outline-offset: 2px; }

.apde-spacer{ flex: 1; }

.apde-canvas-wrap{
	margin-top: 12px;
	border-radius: 16px;
	background: #0b0f18;
	position: relative;
	overflow:auto;
	box-shadow: 0 10px 26px rgba(0,0,0,.15);
}
.apde-status{
	position:absolute;
	left: 14px;
	top: 14px;
	background: rgba(0,0,0,.55);
	color:#fff;
	padding: 8px 10px;
	border-radius: 12px;
	font-size: 14px;
	z-index: 2;
}
.apde-canvas{ display:block; margin: 0 auto; padding: 18px; }

@media (max-width: 720px){
	.apde-toolbar{ flex-wrap: wrap; }
	.apde-spacer{ display:none; }
}
@media (prefers-reduced-motion: reduce){
	.apde-btn{ transition: none; }
}