/* Poppins regular and medium, beside the bold header.php loads (owner OK'd, 2026-09-18): lets inactive tabs be lighter
   in weight as well as color. Staged here so only dev sees it; at the push, fold 400,500 into header.php's Google
   Fonts link and drop this @import (it must stay the first rule while it is here). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
.wf-loading * {
    /*
    first things first, we need to hide everything,
    but bear in mind that this will only take effect
    once the loading script has taken effect.
    here we're hiding all content within
    the <html> once it has the class "wf-loading"
    */
    opacity: 0;
}
html{
	width: 100%;
	min-height: 100%;
	margin-top: 0px; 
	margin-left: 0px;
	background: #FFFFFF; /* For browsers that do not support gradients */
/*	background-repeat: no-repeat;*/
/*	background: -webkit-linear-gradient(white, #ACACAC 300px);  For Safari 5.1 to 6.0 */ 
/*	background: -o-linear-gradient(white, #ACACAC 300px);  For Opera 11.1 to 12.0 */ 
/*	background: -moz-linear-gradient(white, #ACACAC 300px);  For Firefox 3.6 to 15 */ 
/*	background: linear-gradient(white, #ACACAC 300px);  Standard syntax */
}
body {
	width: auto;
	margin:0 auto;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif; 
	font-display: optional;
	color: #444; 
	min-height: 350px;
	background: #FFFFFF; /* For browsers that do not support gradients */ 
/*	background-repeat: no-repeat; */
/*	background: -webkit-linear-gradient(white, #ACACAC 300px);  For Safari 5.1 to 6.0 */ 
/*	background: -o-linear-gradient(white, #ACACAC 300px);  For Opera 11.1 to 12.0 */ 
/*	background: -moz-linear-gradient(white, #ACACAC 300px);  For Firefox 3.6 to 15 */ 
/*	background: linear-gradient(white, #ACACAC 300px);  Standard syntax */
	-webkit-text-size-adjust: 100%;
/*	-ms-overflow-style:none; */
}
a {
	color: #FC4A1A;
	text-decoration: none;
	cursor: pointer;
}

.header{
	text-align: center; 
	width: 100%; 
	background: #444; 
	color: #fff;
}
.header a{
	color: #fff;
}
.controls{
    position: relative;
    margin-bottom: 0px;
    display: block;
    width: 100%;
    text-align: left;
    height: 60px;
    line-height: 60px;
    border-bottom: 0px solid #444;
    white-space: nowrap;
    box-sizing: border-box; 
    user-select: none;
    vertical-align: middle;
}
.headerlinks{
	display: inline-block;
	position: relative;
}
.headerlinks a{
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
}
.headerlinksicon {
	display: none;
    margin-left: 30px;
    vertical-align: middle;
    margin: 0px;
    cursor: pointer;
}
.headerlinks-content {
    display: inline-block;
    text-align: left; 
    line-height: normal;  
    white-space: nowrap;
}
.logo{
	display: inline-block;
	font-family: 'Audiowide'; 
    font-size: 32px;
    line-height: 32px;
    margin-left: 20px;
    text-shadow: 2px 2px #000;
    color: #fff;
    vertical-align: middle;
    margin-bottom: 8px;
}
.userheader{
    text-align: right;
    position: absolute;
    right: 0px;
    top: 0px;
    display: block;
    line-height: 60px;
    height: 60px;
    padding: 0px;
    padding-right: 20px;
    margin: 0px;
    box-sizing: border-box;
    vertical-align: middle;
}
.userheader a{
    margin-left: 0px;
}
.userpic{
    width: 40px; 
    height: 40px; 
    border-radius: 50%;
    padding: 0px;
    margin: 0px;
    display: inline;
    vertical-align: middle;
    margin-bottom: 4px;
}
.userdownarrow{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    vertical-align: top;
    font-size: 16px;
}
.user_login{
    font-size: 14px;
    color: silver;
    user-select: none;
    cursor: default;
    width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.bgcolor {
	background: #444;
}
.nobgcolor {
	background: white;
}
.closebutton{
	color: #444;
}
.arrow {
	display: inline-block;
	vertical-align: middle; 
	width: 0; 
	height: 0; 
	border-top: 8px solid transparent; 
	border-bottom: 8px solid transparent; 
	border-right: 8px solid #FC4A1A;
}
.downarrow {
	display: inline-block;
	vertical-align: middle; 
	width: 0; 
	height: 0;
	margin: 0px;
	padding: 0px;
	border-top: 8px solid #FC4A1A; 
	border-left: 8px solid transparent; 
	border-right: 8px solid transparent;
}
.uparrow {
	display: inline-block;
	vertical-align: top; 
	width: 0; 
	height: 0;
	margin: 0px;
	padding: 0px;
	border-bottom: 8px solid #FC4A1A; 
	border-left: 8px solid transparent; 
	border-right: 8px solid transparent;
	font-size: 0px;
}
.arrowcontainer{
	position: absolute;
	padding: 0px;
	text-align: center;
	background: transparent;
	width: auto;
	height: 8px;
}
.bubbleuparrow, .bubbledownarrow, .bubbleuparrowafter, .bubbledownarrowafter{
/*
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0px;
  padding: 0px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
*/
	bottom: 0%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
}
.bubbleuparrow {
	/*
  vertical-align: middle;
  border-top: 8px solid #FC4A1A;
  	*/
  	border-color: rgba(252, 74, 26, 0);
	border-top-color: #FC4A1A;
	border-width: 11px;
	margin-left: -11px;
}
.bubbleuparrowafter {
	border-color: rgba(242, 242, 242, 0);
	border-top-color: #f2f2f2;
	border-width: 8px;
	margin-left: -8px;
}
.bubbledownarrow {
	/*
  vertical-align: top;
  border-bottom: 8px solid #FC4A1A;
	*/
	border-color: rgba(252, 74, 26, 0);
	border-bottom-color: #FC4A1A;
	border-width: 11px;
	margin-left: -11px;
}
.bubbledownarrowafter {
	/*
  vertical-align: top;
  border-bottom: 8px solid #FC4A1A;
	*/
	border-color: rgba(242, 242, 242, 0);
	border-bottom-color: #f2f2f2;
	border-width: 8px;
	margin-left: -8px;
}
.bubbledialog{
	position: absolute;
	z-index: 1000;
/*	background: #FCEFEC; */
	background: #f2f2f2; 
	border: 2px solid #FC4A1A;
	border-radius: 10px;
	padding: 10px;
	box-shadow: 0 0 10px rgba(68,68,68,1);
}
/* Any scrollable list INSIDE a popup (dropdown .selector, .effectlist, font list, color list, ...) keeps its scroll from
   chaining out to the page -- an outside scroll is what BubbleDialog's close-on-scroll listens for, so containment here
   prevents an over-scroll at the list's top/bottom from dismissing the popup. No-op on non-scrolling descendants. */
.bubbledialog * { overscroll-behavior: contain; }
/* https://cssarrowplease.com/ */
.downbubbledialog:after, .downbubbledialog:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
}
.downbubbledialog:after {
	border-color: rgba(242, 242, 242, 0);
	border-bottom-color: #f2f2f2;
	border-width: 8px;
	margin-left: -8px;
}
.downbubbledialog:before {
	border-color: rgba(252, 74, 26, 0);
	border-bottom-color: #FC4A1A;
	border-width: 11px;
	margin-left: -11px;
}
.upbubbledialog:after, .upbubbledialog:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.upbubbledialog:after {
	border-color: rgba(242, 242, 242, 0);
	border-top-color: #f2f2f2;
	border-width: 8px;
	margin-left: -8px;
}
.upbubbledialog:before {
	border-color: rgba(252, 74, 26, 0);
	border-top-color: #FC4A1A;
	border-width: 11px;
	margin-left: -11px;
}
.bubblecontainer{
	text-align: center;
	font-family: 'Open Sans', sans-serif !important;
	font-size: 14px;
/*	background: #f2f2f2; */
	display: inline-block;
	width: auto;
	height: auto;
}
.bubblecontainer .part{
	margin-bottom: 0px;
}
.bubblecontainer .inlinepart{
	margin-right: 10px;
}
.bubblecontainer .inlinepart:last-child{
	margin-right: 0px;
}
.selector{
	font-family: 'Open Sans', sans-serif !important; 
	font-size: 14px;
	width: auto;
	height: auto;
/*	min-width: 60px; */
	max-height: 200px;
	overflow-y: scroll;
	padding: 0px;
	scrollbar-width: thin;
}
.selector::-webkit-scrollbar {
	-webkit-appearance: none;
}
.selector::-webkit-scrollbar:horizontal {
	height: 8px;
}
.selector::-webkit-scrollbar:vertical {
	width: 8px;
}
.selector::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}
.selector::-webkit-scrollbar-track { 
	background-color: silver; 
/*	border-radius: 0px; */
}
.selectitem{
	padding: 2px 0px;
	padding-right: 18px;
	padding-left: 10px;
	width: 100%;
	color: #444;
	background: #fff;
	line-height: normal;
	cursor: pointer;
	border: none;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	box-sizing: border-box;
	user-select: none;
	text-align: left;
	white-space: nowrap;
}
.selectitem:hover{
	background: #4abdac; /* aqua color */
	color: #fff;
}
.selectheader{
	padding: 0px 5px;
	width: 100%;
	color: black;
	line-height: normal;
	font-weight: bold;
	background: #444;
	color: #fff;
	cursor: not-allowed;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	box-sizing: border-box;
	user-select: none;
}
.selecteditem{
	background: #FC4A1A;
	color: white;
}
.selecteditem:hover{
	background: #FC4A1A;
	color: white;
}
.colorbox{
	display: inline-block;
	width: 100%;
	height: 100%;
	border: 1px solid silver;
	box-sizing: border-box;
	margin-bottom: 0px;
	margin-right: 0px;
	border-radius: 6px; /* rounded like the swatches in the color panel: these were the last hard corners left (owner, 2026-10-16) */
}
.colorboxbg{
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 0px;
	margin-right: 0px;
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, 5px 5px;
    background-size: 10px 10px, 10px 10px;
}
.colortextbox{
	display: inline-block;
	vertical-align: top;
	line-height: 18px;
	font-size: 14px;
	height: 18px;
	padding: 0px;
	margin: 0px;
	border: 1px solid transparent;
	margin-right: 4px;
}
.colortextbox:last-child{
	margin-right: 0px;
}

.searchterm {
	width: 120px;
	height: 30px;
	padding: 5px;
	margin: 0px;
	outline: 0px;
	border: 1px solid #E3E3E3;
	background: #fff; 
	line-height: 18px !important; 
	vertical-align: bottom; 
	font-size: 14px; 
	font-family: Open Sans, sans-serif;
	border-radius: 5px;
	box-sizing: border-box;
}
.searchterm:hover:enabled {
	border: 1px solid #FC4A1A; 
}
.searchterm:focus {
	outline:0;
}

.searchbutton { 
	height: 30px; 
	padding: 5px; 
	margin: 0px;
	margin-left: 2px;
	outline: 0;
	text-align: center;
	line-height: 18px !important; 
	font-size: 14px !important;
	font-family: 'Open Sans', sans-serif !important; 
	background: #444;
	border: 1px solid #E3E3E3;
	border-radius: 5px;
	color: white;
	vertical-align: bottom;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.searchbutton:hover:enabled {
	/*	background-color: #F7B733;
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
	*/
	border: 1px solid #FC4A1A; 
}
.searchbutton:focus {
	outline:0;
}
.searchbutton:disabled {
	color: gray;
	cursor: auto;
}
.wideicon{
	display: inline-block;
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
	height: 14px;
	width: 24px;
	margin: 0px 3px;
	box-sizing: border-box;
}
.squareicon{
	display: inline-block;
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
	height: 14px;
	width: 14px;
	margin: 0px 3px;
	box-sizing: border-box;
}
.verticon{
	display: inline-block;
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
	height: 14px;
	width: 8px;
	margin: 0px 3px;
	box-sizing: border-box;
}
/* 4:5. Sized by ratio like its three neighbours -- 11x14 is 0.79 against portrait's 0.8, and the
   2px border means a truer 11.2 would not survive rounding anyway. Sits between square and
   vertical in width, which is exactly where the shape sits. */
.porticon{
	display: inline-block;
	color: #fff;
	background: transparent;
	border: 2px solid #fff;
	height: 14px;
	width: 11px;
	margin: 0px 3px;
	box-sizing: border-box;
}
.googlesignin {
	background: url('/images/googlesignin/sprites.png') 0 -93px;
	background-size: 191px 184px;
	height: 46px;
	width: 191px;
	display: inline-block;
/*	background-repeat: no-repeat; 
    background-attachment: fixed;
    background-position:; */
}
.googlesignin:disabled {
/*	background-image: url('/images/googlesignin/btn_google_signin_dark_disabled_web@2x.png'); */
	background-position: 0 0;
}
.googlesignin:focus {
/*	background-image: url('/images/googlesignin/btn_google_signin_dark_focus_web@2x.png'); */
	background-position: 0 -139px;
}
.googlesignin:active {
/*	background-image: url('/images/googlesignin/btn_google_signin_dark_pressed_web@2x.png'); */
	background-position: 0 -46px;
}
.pagetitle {
	font-size: 24px;
	font-family: 'Open Sans';
	font-weight: bold;
	box-sizing: border-box;
}
.splash{
	color: #444;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 100%;
	display: block; 
/*	height: 500px;  */
	min-height: 500px;
	overflow: visible;
	margin-bottom: 0px; 
	text-align: center;
}
.bigsplash{
	color: #444;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 100%;
	display: block; 
	height: 500px;
	min-height: 500px;
	overflow: visible;
	margin-bottom: 0px; 
	text-align: center;
}
.splashlearnmore{
	color: #444; 
	padding: 0px 60px; 
	max-width: 100%; 
	display: inline-block; 
	min-height: 100vh; 
	width: 1280px; 
	margin: 0 auto;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.paddedlearnmore{
	color: #444; 
	padding: 0px 70px; 
	max-width: 100%; 
	display: inline-block;  
	width: 1300px; 
	margin: 0 auto;
	margin-bottom: 20px;
	box-sizing: border-box;
}
.splashlearnmoretitle{
	color: #444; 
	font-size: 28px; 
	margin-bottom: 20px; 
	font-weight: bold; 
	font-family: 'Poppins'; 
	text-align: center;
}
.splashlearnmorebyline{
	font-size: 24px;
}
.splashtitle{
	font-size: 60px; 
	font-weight: bold; 
	font-family: 'Poppins';
}
.splashsection{
	padding: 0px;
	overflow: hidden; 
	margin-top: 120px; 
}
.bigsplashsection{
	overflow: hidden; 
	max-width: 100%; 
	width: 1280px;
	height: 500px;
	line-height: 500px;
	display: inline-block; 
	padding: 0px 60px; 
	box-sizing: border-box; 
	background: transparent;
	color: white; 
	margin-top: 0px;
}
h1{
	font-size: 48px; 
	font-weight: bold;
	font-family: 'Poppins';
	margin: 10px 0px;
}
h2{
	font-size: 36px; 
	font-weight: bold; 
	font-family: 'Poppins';
	margin: 10px 0px;
}
h3{
	font-size: 24px; 
	font-weight: bold; 
	font-family: 'Poppins';
	margin: 10px 0px;
}
.splashread{
	display: inline-block;
	margin: 0 auto;
	margin-top: 90px;
	text-align: left;
	font-size: 20px;
	line-height: 175%;
	max-width: 800px;
}
.splashread h1{
	margin: 30px 0px;
}
.splashread h2{
	margin: 30px 0px;
}
.splashread h3{
	margin: 30px 0px;
}
.splashawesome{
	display: inline-block; 
	font-size: 24px;
	font-family: 'Open Sans', sans-serif !important; 
	background: #FC4A1A;
	border: 1px solid #FC4A1A;
	border-radius: 3px;
	color: white;
	width: 45px; 
	padding: 5px 2px; 
	text-align: center;
	margin-right: 5px;
}
.splashbyline{
	font-size: 24px;
	margin-top: 30px;
	margin-bottom: 30px;
	line-height: 150%;
}
.splashbutton{
	display: inline-block; 
	background: #FC4A1A; 
	font-size: 24px; 
	padding: 10px 20px;
	font-family: 'Open Sans', sans-serif !important; 
	border: 1px solid #FC4A1A;
	border-radius: 3px;
	color: white;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
}
.splashbuttonrow{
	margin-top: 0px; 
	text-align: center; 
	font-weight: normal;
}
.splashimgright{
	float: right;
	display: inline-block; 
	text-align: right; 
	box-sizing: border-box;
	padding: 0px;
	padding-left: 10px; 
	max-width: 554px;
	width: calc(50% - 10px);
/*	height: 324px;
	line-height: 324px; */
	vertical-align: middle;
}
.bigsplashimgright{
	float: right;
	display: inline-block; 
	text-align: right; 
	box-sizing: border-box;
	padding: 0px;
	padding-left: 10px; 
	max-width: 554px;
	width: calc(50% - 10px);
	height: 500px;
	line-height: 500px;
	vertical-align: middle;
}
.splashimgleft{
	float: left;
	display: inline-block; 
	text-align: left; 
	box-sizing: border-box;
	padding: 0px; 
	padding-right: 10px; 
	max-width: 554px;
	width: calc(50% - 10px);
/*	height: 324px;
	line-height: 324px; */
	vertical-align: middle;
}
.splashtblleft{
	float: left;
	font-size: 20px;
	padding: 0px;
	padding-right: 10px;
	padding-top: 10px; 
	box-sizing: border-box;
	max-width: 554px;
	height: auto; 
	width: calc(50% - 10px);
}
.bigsplashtblleft{
	float: left;
	font-size: 20px;
	padding: 0px;
	padding-right: 10px; 
	box-sizing: border-box;
	max-width: 554px;
	height: 500px; 
	width: calc(50% - 10px);
}
.splashtblright{
	float: right;
	font-size: 20px;
	padding: 0px;   
	padding-left: 10px;
	padding-top: 10px;
	box-sizing: border-box;
	max-width: 554px;
	height: auto; 
	width: calc(50% - 10px);
}
.splashtbltext{
	display: inline-block; 
	text-align: left; 
	width: 100%;
	line-height: 175%;
}
.splashtbltext h1{
	font-size: 18px; 
	font-weight: bold;
	margin: 10px 0px;
	font-family: 'Open Sans';
	text-transform: uppercase;
	color: #444;
	line-height: 32px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.splashtbltext h1::first-line{
	font-size: 32px; 
	font-family: 'Poppins';
	line-height: 32px;
}
.splashimg{
/*	border: 3px solid #eeeeee;*/
	width: 100%; 
	max-width: 100%; 
	box-sizing: border-box;
}
.splashtexttitle{
	font-size: 36px; 
	font-weight: bold; 
	margin-bottom: 10px;
	font-family: 'Poppins';
}
.videorevolver{
	display: block; 
	cursor: pointer; 
	border: 0; 
	width: 100%; 
	object-fit: contain; 
	background: transparent;
}
.revolvervideo{
	border-radius: 10px;
}
.lazy{
	background: transparent;
}
.shadowPlaceHolder{
	display: none;
	width: 1px;
	height: 1px;
}
.cropPlaceHolder{
	display: none;
	width: 1px;
	height: 1px;
}
.socialcircle {
	display: table-cell; 
	font-size: 22px; 
	width: 44px; 
	height: 44px; 
	vertical-align: middle; 
	border-radius: 50%; 
	background: #ffffff;
	border: 1px solid #444;
	color: #444;
	text-align: center;
	white-space: normal;
}
.socialcircle:hover {
	background: #FC4A1A;
	color: #ffffff;
	border: 1px solid #FC4A1A;
}
.emptybox{
	display: inline-block;
	background: #ffffff;
	width: 10px;
	height: 10px;
	margin: 0px;
	border: 1px solid #444;
	margin-right: 1px;
	margin-bottom: 2px; /* To account for border in vertical spacing */
	vertical-align: middle;
}
.fillbox{
	display: inline-block;
	background: #444;
	width: 10px;
	height: 10px;
	margin: 0px;
	border: 1px solid #444;
	margin-right: 1px;
	margin-bottom: 2px; /* To account for border in vertical spacing */
	vertical-align: middle;
}
.fillbox:last-child{
	margin-right: 0px;
}
.emptybox:last-child{
	margin-right: 0px;
}
.boxsequence{
	width: 100%;
}
.boxbutton{
	display: flex;
	flex-wrap: wrap;
  	justify-content: center;
  	align-items: center;
  	align-content: center;
	background: #fff;
	color: #444;
	margin-right: 4px;
	vertical-align: middle;
	font-size: 14px;
	line-height: 14px;
	cursor: pointer;
	width: 65px;
	height: 55px;
	padding: 3px;
	font-family: Open Sans;
}
.boxbutton:last-child{
	margin-right: 0px;
}
/* ── Site footer ──────────────────────────────────────────────────────────
   includes/footer.php, on every page that shows it. Deep teal, the color of the example strips, with
   the tools, the video ad pages and the company links in their own columns. It sits flush against
   the content above: no margin, and #centercontent, an inline-block on the baseline, is lifted off
   it so its line box no longer leaves a 4-5px white strip underneath. The .footerlists rules below
   still serve oldfooter.php and newfooter.php. Text colors all measure 4.5:1 or better on #0e3b45. */
#centercontent { vertical-align: top; }
.ft { display: block; width: 100%; box-sizing: border-box; margin: 0; background: #0e3b45; color: rgba(255,255,255,.78); font-weight: 500;
      font-size: 15px; line-height: 1.6; text-align: left; }
.ft-cols { max-width: 1180px; margin: 0 auto; padding: 56px 32px 40px; box-sizing: border-box; display: grid;
           grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.ft-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
           font-family: 'Audiowide', sans-serif; font-size: 28px; line-height: 1; text-transform: lowercase; }
.ft-logo img { width: 32px; height: 32px; display: block; }
.ft-logo:hover { color: #fff; text-decoration: none; }
.ft-brand p { margin: 18px 0 22px; max-width: 360px; }
.ft-social { display: flex; gap: 10px; }
.ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
               border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 16px; text-decoration: none;
               transition: background .15s, border-color .15s; }
.ft-social a:hover { background: #fc4a1a; border-color: #fc4a1a; color: #fff; }
.ft-head { font-family: Poppins, sans-serif; font-weight: bold; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
           color: rgba(255,255,255,.62); margin: 6px 0 14px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft li { margin: 0 0 10px; }
.ft-col a, .ft-base a { color: #fff; text-decoration: none; }
.ft-col a:hover, .ft-base a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ft-base { max-width: 1180px; margin: 0 auto; padding: 20px 32px 28px; box-sizing: border-box; display: flex; flex-wrap: wrap;
           gap: 8px 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: rgba(255,255,255,.62); }
.ft-base span { margin-right: auto; }
.ft-base a { color: rgba(255,255,255,.78); }
@media (max-width: 900px) {
    .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
    .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 44px 20px 28px; }
    .ft-base { padding: 18px 20px 26px; }
    .ft-base span { flex-basis: 100%; }
}
/* ── end site footer */
.footerlists{
	margin: 0 auto;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	width: auto;
	gap: 50px;
	padding: 50px;
	text-align: left;
	/* width:auto makes this shrink-to-fit, so below ~360px it sized itself to the hard
	   300px .footerlistcontainer and then added its own padding outside that -- 340px of
	   footer inside a 300px column, which widened the whole document on every page. These
	   two lines only bind when the parent is actually narrower than the content, so wider
	   viewports are untouched: border-box puts the padding inside the cap rather than on
	   top of it, and the cap is what finally gives .footerlistcontainer's max-width:100%
	   something definite to resolve against (against a shrink-to-fit parent it was
	   circular, which is why it never did anything). */
	max-width: 100%;
	box-sizing: border-box;
}
.footerlistcontainer{
	vertical-align: top;
	display: inline-block;
	width: 300px;
/*	margin: 35px; */
	text-align: left;
}
.footerlistheader{
	font-family: Poppins;
	font-weight: bold;
	text-transform: uppercase;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 15px 0px;
}
.footerlist{
	list-style-type: none;
	list-style-position: outside;
	padding: 0px;
	margin: 0px;
}
.footerlist li{
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 15px 0px;
}
.effectlist{
	text-align: left;
	overflow-y: auto;
	width: 310px;
	height: 105px;
	margin: 0 auto;
	font-size: 0px;
/*	background: #fff; */
	user-select: none;
}

.effectlist::-webkit-scrollbar {
	-webkit-appearance: none;
}

.effectlist::-webkit-scrollbar:horizontal {
	height: 8px;
}

.effectlist::-webkit-scrollbar:vertical {
	width: 8px;
}

.effectlist::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.effectlist::-webkit-scrollbar-track { 
	background-color: silver; 
/*	border-radius: 0px; */
}

.effectcanvas {
	display: inline-block; 
	background: transparent; 
	vertical-align: middle; 
	margin-right: 0px; 
	margin-bottom: 0px; 
	cursor: pointer;
	padding: 0px;
	margin: 2px;
/*	border: 1px solid transparent; */
	outline: 0;
}
.popupselected{
/*	border: 1px solid #FC4A1A; */
	background: #FC4A1A;
}
/* Customize the label (the container) */
.cbcontainer {
  display: inline-block;
  position: relative;
  padding-left: 24px;
  margin: 0px;
  cursor: pointer;
  font-size: 14px;
  line-height: 14px;
  height: 14px; 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cbcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #fff;
  border: 1px solid silver;
}

/* On mouse-over, add a grey background color */
.cbcontainer:hover input ~ .checkmark {
/*  background-color: silver; */
}

/* When the checkbox is checked, add a blue background */
.cbcontainer input:checked ~ .checkmark {
  background-color: #444;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cbcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cbcontainer .checkmark:after {
  left: 4px;
  top: 0px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.toplayer{ 
	margin-top: 20px;
	box-sizing: border-box;
	padding: 10px;
}
.toplayerinfo{
	padding-left: 20px; 
	padding-bottom: 5px; 
	width: auto; 
	display: table-cell; 
	vertical-align: bottom; 
	text-align: left;
}
.bigimagebox{
	position: relative;
	width: 102px; 
	display: table-cell; 
	vertical-align: bottom; 
	text-align: center;
}
.bigimage{
	width: 100px; 
	height: 100px; 
	vertical-align: middle; 
	border: 1px solid silver; 
	border-radius: 50%;
}
.accountbox{
	text-align: left; 
	font-size: 18px; 
	border: 1px solid silver; 
	width: 800px; 
	max-width: 100%;
	margin: 0 auto;
	background: #ffffff; 
	padding: 20px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.updatepic{
	display: block; 
	width: 100%; 
	position: absolute; 
	top: 100px; 
	text-align: center;
}
.checkerinspector{
	background-color: #e5e5f7;
	opacity: 0.8;
	background-image:  repeating-linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), repeating-linear-gradient(45deg, #444 25%, #e5e5f7 25%, #e5e5f7 75%, #444 75%, #444);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
}
.checkerboard{
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, 5px 5px;
    background-size: 10px 10px, 10px 10px;
}
.tinycheckerboard{
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, 2px 2px;
    background-size: 4px 4px, 4px 4px;
}
.diagonallines {
	background-color: #fff;
	opacity: 1;
	background: repeating-linear-gradient( 45deg, #444, #444 4px, #fff 4px, #fff 20px );
}
.zigzag {
	background-color: #fff;
	opacity: 1;
	background-image:  linear-gradient(135deg, #444 25%, transparent 25%), linear-gradient(225deg, #444 25%, transparent 25%), linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(315deg, #444 25%, #fff 25%);
	background-position:  11px 0, 11px 0, 0 0, 0 0;
	background-size: 22px 22px;
	background-repeat: repeat;
}
.redzigzag {
	background-color: #fff;
	opacity: 1;
	background-image:  linear-gradient(135deg, #FC4A1A 25%, transparent 25%), linear-gradient(225deg, #FC4A1A 25%, transparent 25%), linear-gradient(45deg, #FC4A1A 25%, transparent 25%), linear-gradient(315deg, #FC4A1A 25%, #fff 25%);
	background-position:  11px 0, 11px 0, 0 0, 0 0;
	background-size: 22px 22px;
	background-repeat: repeat;
}
.dots{
	background-color: #444;
	opacity: 1;
	background-image: radial-gradient(#fff 0.45px, #444 0.45px);
	background-size: 9px 9px;
}
.reddots{
	background-color: #FC4A1A;
	opacity: 1;
	background-image: radial-gradient(#fff 0.45px,  #FC4A1A 0.45px);
	background-size: 9px 9px;
}
.dropdown {
    position: relative;
    display: inline-block;
    user-select: none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    right: 10px;
    top: 55px;
    padding: 10px;
    background-color: white;
    min-width: 126px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 99;
    font-size: 14px; 
    width: 150px; 
    text-align: left; 
    line-height: normal;  
    white-space: normal;
    border-radius: 5px;
} 
.dropdown:hover .dropdown-content {
	display: block;
}
/* For mobile no hover */
.mobile-dropdown-content {
    display: none;
    position: relative;
    right: -5px;
    top: -5px;
    padding: 10px;
    background-color: white;
    min-width: 126px;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 99;
    font-size: 14px; 
    width: 150px; 
    text-align: left; 
    line-height: normal;  
    white-space: normal;
}
.inline-dropdown {
    position: relative;
    display: inline-block;
    user-select: none;
}

/* Dropdown Content (Hidden by Default) */
.inline-dropdown-content {
    display: none;
    position: absolute;
    right: -5px;
    padding: 10px;
    background-color: white;
    min-width: 126px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5);
    z-index: 99;
    font-size: 14px; 
    width: 126px; 
    text-align: left; 
    line-height: normal;  
    white-space: normal;
}

.inline-dropdown:hover .inline-dropdown-content {
	display: block;
}

.inline-dropdown:hover .editbutton {
	border: 1px solid #f2f2f2;
}

.fancy-inline-dropdown {
    position: relative;
    display: inline-block;
    user-select: none;
}

/* Dropdown Content (Hidden by Default) */
.fancy-inline-dropdown-content {
    display: none;
    position: absolute;
    right: 0px;
/*    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); */
    z-index: 99;
    font-size: 14px; 
    text-align: left; 
    line-height: normal;  
    white-space: normal;
}
.fancy-inline-dropdown-content-menu{
	margin: 0px;
	border: 3px solid #444;
	border-radius: 9px; padding: 10px;
	background: #fff;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

.fancy-inline-dropdown:hover .fancy-inline-dropdown-content {
	display: block;
}
.bloglist{
	margin: 0 auto;
	display: block;
	width: 100%;
	max-width: 1280px;
	font-family: Open Sans;
	text-align: left;
	padding: 0px;
	font-size: 24px;
	box-sizing: border-box;
}
.blog{
	display: inline-block; 
	margin: 10px 10px;
	padding: 40px;
	border: 0; 
	box-sizing: border-box;
	width: calc(100% - 20px);
	vertical-align: top;
	background: #f2f2f2;
	border-radius: 10px;
	box-shadow: none;
	color: #000;
}
.blog:hover{
	box-shadow: 1px 1px 10px #444;
}
.blogimgcont{
	display: inline-block; 
	text-align: right; 
	box-sizing: border-box;
	padding: 0px; 
	padding-right: 20px; 
	width: calc(30% - 20px);
	max-width: 382px;
	vertical-align: top;
}
.blogimg{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bloginfo{
	display: inline-block;
	width: 70%;
	text-align: left;
	vertical-align: top;
}
.bloginfo h3{
	font-size: 20px; 
	font-weight: bold; 
	font-family: 'Poppins';
	margin-top: 0px;
}
.blogtitle{
	font-size: 20px; 
	font-weight: bold; 
	font-family: 'Poppins';
}
.blogdate{
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	text-transform: uppercase;
}
.blogdesc{
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden; 
	font-size: 18px;
	text-align: left; 
	width: 100%;
	line-height: 150%;
}
.project{
	display: inline-block; 
	padding: 20px; 
	border: 0; 
	width: 25%;
	box-sizing: border-box;
}

.projectimg{
	width: 100%;
	display: block;
	position: relative;
}

.projectimg:after{
	padding-top: 56.25%;
  	/* 16:9 ratio */
  	display: block;
  	content: '';
}

.projectimgcont{
	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
}

.projectvid{
	vertical-align: middle;
	width: 100%;
	display: block;
	position: relative;
}

.projectvid:after{
	padding-top: 56.25%;
  	/* 16:9 ratio */
  	display: block;
  	background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%;
  	content: '';
}

.projectvidsq{
	vertical-align: middle;
	width: 100%;
	display: block;
	position: relative;
}

.projectvidsq:after{
	padding-top: 100%;
  	/* 16:9 ratio */
  	display: block;
  	background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%;
  	content: '';
}

.projectvidvert{
	vertical-align: middle;
	width: 100%;
	display: block;
	position: relative;
}

.projectvidportrait{
	vertical-align: middle;
	width: 100%;
	display: block;
	position: relative;
}

.projectvidportrait:after{
	padding-top: 125%;
  	/* 4:5 ratio */
  	display: block;
  	background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%;
  	content: '';
}

.projectvidvert:after{
	padding-top: 177.78%;
  	/* 16:9 ratio */
  	display: block;
  	background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%;
  	content: '';
}

.projectvidcont{
	position: absolute;
  	top: 0;
  	bottom: 0;
  	right: 0;
  	left: 0;
}

input{
	font: 400 18px 'Open Sans';
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.logininput {
	width: 100%;
	font-size: 18px;
	font-family: 'Open Sans' !important;
	padding: 2px;
	margin-bottom: 3px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	
	background-color: #ffffff !important;
	border: 1px solid silver !important;
	-webkit-appearance: none;
	border-radius: 0;
}
.logininput:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #ffffff inset;
}
.logininput:focus {
	outline:0;
	border: 1px solid #FC4A1A !important;
}
.logininput:disabled {
	color: #C0C0C0;
}
.loginlabel {
	font-size: 18px;
	font-weight: normal;
	padding: 2px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	display: inline-block;
}
.usermenu {
	display: inline-block;
	font-size: 14px !important; 
	padding: 10px; 
	width: 100%;
	color: #444 !important;
	background: white !important;
	box-sizing: border-box;
	cursor: pointer;
}
.usermenu:hover {
	color: white !important;
	background: #444 !important;
}
.addmenu {
	display: inline-block;
	font-size: 14px !important; 
	padding: 0px 10px;
	margin: 0px;
	width: 100%;
	color: #444;
	background: #f2f2f2;
	box-sizing: border-box;
	cursor: pointer;
	text-align: left;
	line-height: 24px;
	border: none;
	white-space: nowrap;
}
.addmenu:hover:enabled {
	color: #f2f2f2;
	background: #444;
	border: none;
}
.addmenu:focus {
	outline: 0;
}
.addmenu:disabled {
	cursor: auto;
	color: #BEBEBE;
}
.tab{
	font-size: 15px;
	font-family: 'Open Sans', sans-serif !important; 
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	color: #6b8189;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	padding-top: 0px;
	padding-bottom: 5px;
	padding-left: 3px; 
	padding-right: 3px;
	margin-right: 18px; 
}
.tab:hover {
	color: #1a6b7a;
}
.tab:focus {
	outline:0;
}
.tab:disabled {
	color: #1a6b7a;
	font-weight: 600;
	background: transparent;
	border: none;
	border-bottom: 2px solid #1a6b7a;
	cursor: auto;
}
.atab{
	font-size: 18px;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif !important; 
	background: transparent;
	border: none;
/*	border-bottom: 1px solid transparent; */
	color: #FC4A1A;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	padding-top: 0px;
	padding-bottom: 3px;
	padding-left: 5px; 
	padding-right: 5px;
	margin-right: 15px; 
}
.atab:focus {
	outline:0;
}
.atabdisabled {
	color: #000;
	background: transparent;
	border: none;
	border-bottom: 1px solid #000;
	pointer-events: none;
  	cursor: default;
}
.tabbutton{
	font-size: 18px;
	font-family: 'Open Sans', sans-serif !important; 
	background: #FC4A1A;
	border: 1px solid #FC4A1A;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	color: white;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
}
.tabbutton:focus {
	outline:0;
}
.tabbutton:disabled {
	background: #444;
	border: 1px solid transparent;
	cursor: auto;
}
.editnodebutton{
	display: inline-block;
	font-family: 'Open Sans', sans-serif !important; 
	font-size: 14px; 
	text-align: center;
	background: #fff;
	padding: 0px 5px;
	border: 1px solid #E3E3E3;
	color: #444;
	border-radius: 5px;
	vertical-align: middle;
	outline: 0;
	margin: 0px;
	height: 30px;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-appearance: none;
	font-weight: normal;
	
/*	-webkit-appearance: none; */
}
.editnodebutton:hover:enabled {
	border: 1px solid #FC4A1A; 
}
.nodeeffectdiv{
	display: inline-block;
	font-family: 'Open Sans', sans-serif !important; 
	font-size: 14px; 
	text-align: center;
	background: transparent;
	padding: 0px ;
	color: #444;
	vertical-align: middle;
	margin: 0px;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
	-webkit-appearance: none;
	font-weight: normal;
}
.actionbutton{
	font-size: 16px;
	font-family: 'Open Sans', sans-serif !important; 
	background: #FC4A1A;
	padding: 3px 10px;
	border: 1px solid #FC4A1A;
	border-radius: 3px;
	color: white;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-appearance: none;
	font-weight: bold;
	text-transform: uppercase;
}
.actionbutton:hover:enabled {
	/*	background-color: #F7B733;
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
	*/
	border: 1px solid #FFF; 
}
.actionbutton:focus {
	outline:0;
}
.actionbutton:disabled {
	color: #e3e3e3;
	background: #fff;
	border: 1px solid #e3e3e3;
	cursor: auto;
}
/* Secondary action in a dialog (Cancel, help, Update All). Outlined and neutral so the orange primary
   is the obvious next step. Same 1px border and padding as .actionbutton, so it is exactly as large. */
.actionbutton.secondarybutton {
	background: transparent;
	color: #555;
	border-color: #c4c4c4;
}
.actionbutton.secondarybutton:hover:enabled {
	background: rgba(252, 74, 26, 0.06);
	color: #FC4A1A;
	border-color: #FC4A1A;
}
.actionbutton.secondarybutton:disabled {
	color: #c4c4c4;
	background: transparent;
	border-color: #e3e3e3;
}
/* Short confirmation ("Image copied", "Project saved") from moToast() in modialog.js. Not a dialog: no
   backdrop, nothing to dismiss. Above dialogs (swal sits at 99999), below portaled bubble popups. */
.motoast {
	position: fixed;
	left: 50%;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 10px;
	/* Sized to its text, not shrink-to-fit: from left: 50% only half the viewport is available, which
	   squeezed a long message into a narrow column on phones. */
	width: max-content;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 14px 20px;
	/* Light card, not a dark pill: in the editor the toast lands on the dark timeline strip, where a dark
	   pill all but disappeared. A white card with a heavy shadow reads on both the timeline and the canvas. */
	background: #fff;
	color: #2b2f33;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
.motoast i {
	font-size: 22px;
	flex-shrink: 0;
}
/* Upload trigger in the Uploads tab of the image and video selectors. It shares the tab
   right-hand slot with the Unsplash/Pixabay sort dropdowns, but unlike those it is the
   tab primary action, so it carries .actionbutton white-on-#FC4A1A instead of the
   neutral .selectbutton fill. This class only rescales it -- .actionbutton is 16px and
   sized for page-level buttons, and this has to sit on the same 30px control row as the
   dropdowns beside it. position:relative is required: BubbleDialog appends its
   .bubbledialog popup (position:absolute) into this button. */
/* Uploads grid while files are dragged over it. Outline rather than border so switching
   it on does not resize the box and reflow the grid underneath. */
/* Empty Uploads tab. This is the only place the drop zone advertises itself: a permanent
   background behind a full grid of thumbnails would be noise for a hint you need once, and
   an empty library is exactly when there is nothing else to look at. It renders inside
   .searchmessage, which supplies the centring and the 450px cap. */
/* Sits in the dead space left of the Upload button. Ellipsised rather than wrapped: it
   shares a fixed 30px row with the button, so a second line would overlap the grid. */
.drophint{
	float: left;
	max-width: 60%;
	font-size: 13px;
	line-height: 30px;
	color: #a8a29b;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.drophint i{
	margin-right: 6px;
	color: #c9c4bd;
}

.dropinvite{
	border: 2px dashed #dcdcdc;
	border-radius: 8px;
	padding: 34px 20px;
	color: #8a837c;
	font-size: 16px;
	font-weight: 600;
}
.dropinvite i{
	display: block;
	font-size: 34px;
	color: #c9c4bd;
	margin-bottom: 12px;
}
.dropinvitesub{
	font-size: 14px;
	font-weight: normal;
	margin-top: 6px;
	color: #a8a29b;
}

/* The signed-out twin of .dropinvite. It borrows the panel but not the dashed border: there is
   nothing to drop here, and a drop target you cannot use reads as broken rather than inviting.
   The top margin keeps it off the toolbar -- the results area is as tall as the dialog, so a
   panel flush to the top looked like a failed load rather than a considered empty state. */
.signininvite{
	border: 1px solid #e6e3df;
	border-style: solid;
	background: #faf9f8;
	margin-top: 40px;
}
.signinvitebtn{
	display: inline-block;
	margin-top: 16px;
	padding: 9px 20px;
	border: none;
	border-radius: 999px;
	background: #FC4A1A;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}
.signinvitebtn:hover{ background: #e23f12; }

.dropactive{
	outline: 2px dashed #FC4A1A;
	outline-offset: -6px;
	background: #FFF6F3;
	min-height: 120px;
}

.uploadbutton{
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	position: relative;
	width: auto;
	height: 30px;
	padding: 0px 14px;
	font-size: 14px;
	line-height: 20px;
	border-radius: 5px;
	box-sizing: border-box;
}
.inlineactionbutton{
	font-size: 18px;
	line-height: 18px;
	font-family: 'Open Sans', sans-serif !important; 
	background: #FFF;
	padding: 5px;
	border: 1px solid #444;
	border-radius: 5px;
	color: #444;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-appearance: none;
}
.inlineactionbutton:hover:enabled {
	/*	background-color: #F7B733;
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
	*/
	border: 1px solid #FC4A1A; 
}
.inlineactionbutton:focus {
	outline:0;
}
.inlineactionbutton:disabled {
	color: #e3e3e3;
	border: 1px solid #e3e3e3;
	cursor: auto;
}

.cropbutton{
	padding: 5px 0px;
	font-size: 12px;
	line-height: 12px;
	border-radius: 5px;
	margin: 0px;
	border: 1px solid #e3e3e3;
	outline: 0px; 
	cursor: pointer;
	height: 22px;
	width: 22px;
	background: #fff;
	color: #444 !important;
	display: inline-block;
}
.iconbutton{
	font-size: 18px; 
	vertical-align: middle; 
	line-height: 24px; 
	margin-left: 3px;
	margin-right: 3px; 
	width: auto;
	height: 30px; 
	background: transparent;
	text-align: left; 
	font-weight: normal;
	padding: 0px 7px;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif !important; 
	border: 1px solid transparent;
	border-radius: 3px;
	color: #FFF;
	cursor: pointer;
	-webkit-appearance: none;
	user-select: none;
	-webkit-user-select: none; /* Safari 3.1+ */
  	-moz-user-select: none; /* Firefox 2+ */
  	-ms-user-select: none;
	white-space: nowrap;
}
.iconbutton:focus {
	outline:0;
}
.iconbutton:disabled {
	color: #888888;
	cursor: auto;
}

.editbutton{
	display: inline-block;
	width: auto;
	font-size: 14px; 
	vertical-align: middle; 
	line-height: 24px; 
	margin: 5px 0px; 
/*	width: 100%;  */
	background: transparent;
	text-align: center; 
	font-weight: normal;
	padding: 3px;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif !important; 
	border: 1px solid transparent;
	border-radius: 3px;
	color: white;
	cursor: pointer;
	-webkit-appearance: none;
	user-select: none;
	-webkit-user-select: none; /* Safari 3.1+ */
  	-moz-user-select: none; /* Firefox 2+ */
  	-ms-user-select: none;
	white-space: nowrap;
}
.editbutton:hover:enabled {
	background: #4ABDAC;
	/*
	background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#26000000)";
	*/
/*	border: 1px solid #f2f2f2; */
}
.editbutton:focus {
	outline:0;
}
.editbutton:disabled {
	color: gray;
	cursor: auto;
}
.blackbanner{
	width: 100%; font-size: 36px; font-family: Poppins; font-weight: bold; background: #000; color: #fff; padding: 30px; box-sizing: border-box; background-image: linear-gradient(to right, rgb(0,0,0), rgb(68,68,68));
}
.gradientbanner{
	width: 100%; 
	background: rgb(68,68,68);
	background: linear-gradient(73deg, rgba(68,68,68,1) 0%, rgba(252,74,26,1) 100%);
	color: #fff;
	padding: 40px;
	box-sizing: border-box;
	font-size: 36px;
	font-family: Poppins;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 40px;
	border-radius: 5px;
}
.infoflex{
	display: flex;
	flex-wrap: wrap;
}
.infobox{
	flex: 1;
	vertical-align: top;
	background: #fff;
	padding: 20px;
	color: #000;
	border: 2px solid silver;
	border-radius: 10px;
/*	min-width: 300px; */
	margin: 20px;
	box-sizing: border-box;
}
.greentored{
	width: 100%; 
	background: rgb(6,190,182);
	background: linear-gradient(73deg, rgba(6,190,182,1) 0%, rgba(252,74,26,1) 100%);
	padding: 40px;
	box-sizing: border-box;
	margin: 40px 0px;
	color: #fff;
}
.modal {
	position: fixed; /* Stay in place */
	z-index: 10001; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0); /* Black w/ opacity */
}
.fixedoverlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  background-color: rgba(41, 47, 51, 0.55); /*dim the background*/
  text-align: center;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog{
	display: inline-block;
	vertical-align: middle;
	/* auto (not "0 auto") so a dialog taller than the viewport centres via auto margins yet stays
	   scrollable to its TOP -- .fixedoverlay's align-items:center otherwise clips the top (and the
	   close X) with no way to scroll up to it. */
	margin: auto;
	width: auto;
	max-width: calc(100% - 10px);
/*	max-height: calc(100% - 10px); */
	padding: 0px;
	background: #f2f2f2; 
    border-radius: 10px;
	/* Same 1px width as before: MoDialog's resize math measures the border. Depth comes from the shadow. */
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	z-index: 10001;
}
/* The title bar shares the card color, split off by a hairline. An inset shadow rather than a border so
   the bar stays exactly 30px -- the search dialogs' resize math and the calc(100vh - 130px) rules below
   are built on that height. */
.dialogtitlediv{
	background: transparent;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
	color: #333;
	display: block;
	padding: 0px;
	line-height: 30px;
	height: 30px;
	font-size: 18px;
	position: relative;
}
.dialogtitle {
/*	padding: 2px; */
/*	position: absolute;
	top: 0px;
	left: 0px;*/
	display: inline-block;
	width: calc(100% - 50px);
	vertical-align: top;
	text-align: center;
	/* Poppins bold rather than uppercase Audiowide: calmer for "Selected Music" or "Leave Page?", and it
	   matches the editor. Only the 700 weight is loaded (header.php), so bold. The progress dialog keeps
	   Audiowide -- it has no title bar and styles its own message. Height is unchanged: the 30px
	   line-height comes from .dialogtitlediv. */
	font-family: 'Poppins', 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: bold; 
	text-transform: none;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
/*	margin-bottom: 15px; */
	user-select: none;
	-webkit-user-select: none;
	margin: 0 auto;
}
.dialogclosediv{
	position: absolute;
	vertical-align: top;
	text-align: right; 
	margin-bottom: 0px;
	top: 0px;
	right: 10px;
}
/* A round hover target instead of a bare heavy glyph. The close div is absolutely positioned, so this
   cannot change the title bar height. */
.dialogclosediv .closebutton{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: #888;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.dialogclosediv .closebutton:hover{
	background-color: rgba(252, 74, 26, 0.12);
	color: #FC4A1A;
}
.dialogbuttondiv{
	margin-top: 20px;
	white-space: nowrap;
	text-align: right;
	vertical-align: top;
}
.dialogcontent{
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 25px;
	margin-top: 25px;
	box-sizing: border-box;
}
.dialogresizecontent{
	max-height: calc(100vh - 130px);  /*40px is for dialogtitle, 20+30 for dialog content padding, 40 for good measure*/
	overflow-y: auto;
}
.dialogresizeheight{
	height: calc(100vh - 130px);  /*40px is for dialogtitle, 20+30 for dialog content padding, 40 for good measure*/
}
.dialogscrollcontainer {
/*	overflow-y: auto; */
	padding: 20px 30px;
}
.dialogscrollcontainer::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 0px;
}
.dialogscrollcontainer::-webkit-scrollbar:horizontal {
	height: 0px;
	background: transparent;
}
.dialogscrollcontainer::-webkit-scrollbar:vertical {
	width: 0px;
}
.dialogscrollcontainer::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}
.dialogscrollcontainer::-webkit-scrollbar-track { 
	background-color: transparent; 
	border-radius: 0px; 
}
.dialogscrollcontainer::-webkit-scrollbar-corner { 
	background-color: transparent; 
}
.progresslabel {
	width: 600px;
	max-width: 100%;
	padding: 2px;
	box-sizing: border-box;
	font-size: 28px;
	text-align: center;
	font-family: 'Open Sans';
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	color: #444;
	user-select: none;
}
.progressbar {
	width: 600px;
	max-width: 100%;
	height: 20px;
	background: #ffffff;
	position: relative;
	border: 1px solid silver;
}
.indeterminate{
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
    filter: alpha(opacity=25);
    opacity: 0.25; 
}
.progressoverlay{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0%;
	height: 100%;
	background: silver;
}
.roundbutton {
	display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    color: white !important;
    background: #FC4A1A;
    border: 1px solid #FC4A1A;
    font-size: 18px;
    text-align: center;
    padding: 0px;
    cursor: pointer;
}
.roundbutton:hover {
	border-color: #FC4A1A; 
}
.roundbutton:focus {
	outline:0;
}
.displayslim{
	position: relative;
	display: inline-block; 
	margin-top: 20px; 
	margin-bottom: 20px;
/*	border: 1px solid silver; */
/*	box-shadow: 0px 0px 5px silver; */
	width: 800px; 
	height: 450px;
}
.thumbnail{
	display: block; 
/* 
	background: #eeeeee;
	max-width: 112px;
	width: 112px;
	height: 63px;
 */
	border: 2px solid transparent;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	cursor: pointer;
}
.thumbarea{
	display: inline-block;
	margin: 0 auto;
	font-size: 0px;
	width: 100%; 
/*	max-width: 800px; */ 
	text-align: left; 
	margin-top: 0px; 
	margin-bottom: 0px; 
	overflow-x: hidden; 
	overflow-y: hidden; 
/*	height: 103px; */
	background: #eeeeee;
/*	border: 1px solid silver; */ 
	white-space: nowrap;
	vertical-align: top;
}
.addarea{
	display: inline-block;
	width: 65px;
	height: 65px;
	box-sizing: border-box;
	line-height: 65px; 
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
    color: #FC4A1A !important;
/*    background: #eeeeee; */
/*	height: 99px; */
	vertical-align: middle;
	text-align: center;
	border: 0px;
}
.playarea{
	display: inline-block;
	width: 65px;
	height: 65px;
	box-sizing: border-box;
	line-height: 65px; 
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
    color: #FC4A1A !important;
/*    background: #eeeeee; */
/*	height: 99px; */
	vertical-align: middle;
	text-align: center;
	border: 0px;
}
.thumbdiv{
	position: relative;
	display: inline-block;
/*	width: 112px; */
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}
.bigcard {
	position: relative; 
	display: inline-block; 
	margin: 10px;
	padding: 0px; 
	box-sizing: border-box; 
	width: calc(25% - 20px); 
	cursor: pointer; 
	color: #ffffff; 
	background-color: transparent; 
	overflow: hidden;
	vertical-align: bottom;
}
.middot{
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px
}
.templateheaderbg{
	background: #eeeeee;
	background-image:linear-gradient(to right, rgba(6, 190, 182, 0.7), rgba(72, 177, 191, 0.95)), url(https://res.cloudinary.com/slimanimation/image/upload/c_scale,w_1280/v1552496707/splash/eyes.jpg);
	background-size: cover;
	background-position: center;
	width: 100%;
}
.templateheader{
	width: 100%;
	padding: 50px 50px;
	box-sizing: border-box;
	font-size: 0px;
}
.templateheaderlefthalf{
	width: 50%;
	min-width: 350px;
	margin: 0px;
	box-sizing: border-box;
	vertical-align: top;
	text-align: left;
	display: inline-block;
	color: #fff;
	font-size: 0px;
}
.templateheaderrighthalf{
	width: 50%;
	min-width: 350px;
	margin: 0px; 
	box-sizing: border-box;
	vertical-align: top;
	height: 120px;
	padding-top: 35px;
	text-align: right;
	display: inline-block;
	color: #fff;
}
.templatefullcont{
	width: 100%;
	padding: 50px 40px;
	box-sizing: border-box;
	font-size: 0px;
	text-align: center;
}
.templatesearch{
	float: right;
	display: inline-block;
	width: 180px;
	padding: 5px 10px;
	border-radius: 10px;
	margin: 5px;
	margin-right: 0px;
	outline: 0px; 
	border: 1px solid silver;
	font-size: 18px;
	line-height: 24px;
	height: 24px;
	font-family: Open Sans, sans-serif;
	vertical-align: bottom;
}
.ideamenu{
	position: relative;
	display: inline-block;
	margin: 5px;
	margin-left: 0px;
}
.ideamenutitle{
	display: inline-block;
	padding: 5px 10px;
	border-radius: 0px;
	outline: 0px; 
	border: 1px solid #444;
	border-radius: 10px;
	background: #FC4A1A;
	color: #fff;
	font-size: 18px;
	line-height: 24px;
	height: 24px;
	font-family: Open Sans, sans-serif;
	vertical-align: bottom;
	cursor: pointer;
}
.idealist{
	display: none;
	position: absolute;
    left: 0px;
    top: 34px;
    background: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5);
    z-index: 99;
	padding: 10px;
	box-sizing: border-box;
	text-align: left; 
	margin: 0px;
	width: 320px;
	line-height: normal;
  	-webkit-overflow-scrolling: touch;
	vertical-align: top;
	user-select:  none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;  
}
.idealist a{
	color: #000;
	white-space: nowrap;
	display: inline-block;
	width: 140px;
	font-size: 16px;
	margin: 0px 5px;
	padding: 5px 10px;
	cursor: pointer;
	box-sizing: border-box;
	z-index: 199;
}
.idealist a:hover{
	color: #FFF;
	background: #444;
}
.idea{
	background: #eee;
	margin: 0px;
	text-align: center;
	width: 100%;
}
.ideacontainer{
	position: relative;
	margin:20px;
	display: inline-block;
	text-align: left;
	font-size: 20px;
	line-height: 175%;
	max-width: 900px;
	padding: 40px;
	background: white;
	color: #000;
	border: 1px solid silver;
}
.ideatitle{
	text-align: left;
	font-size: 32px;
	font-weight: bold;
	line-height: 100%;
	margin-bottom: 10px;
	font-family: 'Poppins';
}
.ideacontent{
	text-align: left;
	font-size: 20px;
	line-height: 175%;
}
.ideaclose{
	position: absolute;
	top: 18px;
	right: 20px;
	font-size: 20px;
	line-height: 20px;
	height: 20px;
	color: #000;
}
.startfromscratch{ 
	display: inline-block;
	vertical-align: middle;
	background: transparent; 
	font-size: 20px; 
	font-weight: bold;
	padding: 10px 10px;
	box-sizing: border-box;
	line-height: normal;
	font-family: 'Open Sans', sans-serif !important; 
	border: 1px solid #FFF;
	border-radius: 10px;
	color: #FFF;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
}
.startfromscratch:hover {
	border: 1px solid #FC4A1A;
}
.templatelistcont{
	margin: 0 auto;
	margin-top: 0px;
	text-align: center;
	width: 100%;
	/*
	display: grid;
	grid-template-columns: auto auto auto auto;
	*/
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	align-self: flex-start;
	gap: 30px 30px;
}
.tempcard {
	display: inline-block;
/*	place-self: center; */
	margin: 0px;
	padding: 20px;
	box-sizing: border-box;
/*	width: calc(25% - 20px); */
	color: #000; 
	background-color: #f2f2f2; 
	overflow: hidden;
	vertical-align: top;
	border-radius: 5px;
	/* No border. The #f2f2f2 fill above already separates one card from the next; a silver
	   1px rule on top of it is a second boundary doing the same job, and at low contrast
	   against that fill it read as noise rather than structure once the grid ran to 417
	   cards. :hover still lifts the card, so the affordance is unchanged.
	   Removing it leaves 2px of slack (border-box 394 - 40 padding = 354 against a 352
	   image) which the centred image absorbs. */
	border: 0;
	box-shadow: none;
	max-width: 100%;
	width: 394px;
}
.tempcard .tempcardtitle{
	margin: 0px;
	padding: 0px;
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	vertical-align: bottom;
	font-family: Open Sans;
	font-weight: normal !important;
	color: #444;
	user-select: none;
	/* 20px, not 28. 28 on a 14px font is double-spaced, and because it is the block's strut it
	   applied to BOTH lines -- the ::first-line rule below asks for 18px and never got it --
	   so the title and its category floated 56px apart inside a 306px card. 20px is the same
	   ratio the <=820px block further down already uses; that pass tightened the phone and
	   left the desktop behind, which is the only reason this was still here. Two lines now
	   measure 40px and the card is 290px. The 18px ::first-line still fits inside the strut. */
	line-height: 20px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.tempcard .tempcardtitle::first-line{
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
	line-height: 18px;
}
.tempcard:hover{
	box-shadow: 1px 1px 5px #444;
}
.tempcardcont {
	position: relative;
	width: 100%;
	/* Rounded on the media box rather than on the img, because three things stack in here:
	   .tempimgcont holds the still, .tempvideocont holds the hover clip, and :after paints the
	   loading spinner and supplies the 16:9 height. Rounding the image alone would leave the
	   hover video square-cornered the moment you pointed at a card. overflow:hidden clips all
	   three. 4px matches the related grid on template.php; the card's own 5px sits outside the
	   20px padding and is a separate edge. */
	border-radius: 4px;
	overflow: hidden;
}
.tempcardcont:after{
	padding-top: 56.25%;
  	/* 16:9 ratio */
  	display: block;
  	background: transparent url(https://res.cloudinary.com/slimanimation/image/upload/v1560457651/docs/Spinner-1s-100px.gif) no-repeat 50% 50%;
  	content: '';
}
.temptitle{
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
	padding-top: 10px;
	user-select: none;
	line-height: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}
.tempdesctitle{
	text-align: center;
	font-size: 14px;
	padding-top: 5px;
	user-select: none;
	line-height: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.tempbr{
	position: absolute;
	display: inline-block;
	font-size: 14px;
	bottom: 5px;
	right: 5px;
	padding: 4px;
	color: #fff;
	background-color: rgba(68,68,68,0.5);
}
.tempbl{
	position: absolute; 
	display: inline-block;
	font-size: 14px;
	bottom: 5px;
	left: 5px;
	padding: 4px;
	margin-right: 4px;
	color: #fff;
	background-color: rgba(68,68,68,0.5);
}
.tempimgcont{
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.tempimg{
	display: block;
	width: 100%;
	height: 100%;
}
.tempvideocont{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.tempvideo{
	display: block;
	outline: 0;
	width: 100%;
	height: 100%;
}
.templatevideocont{
	margin: 0 auto;
	display: inline-block; 
	width: 100%;
	height: 100%;
	max-width: 1280px;
	width: 100%;
	padding: 0px 60px;
	text-align: center;
	box-sizing: border-box;
	margin-top: 20px;
}
.templatevideocrumbs{
	text-align: left;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;	
	white-space: nowrap;
	overflow-x: scroll;
	width: 100%;
}
.templatevideo{
	margin: 20px 0px;
	display: block;
	outline: 0;
	object-fit: contain;
	width: 100%;
	min-height: 240px;
	height: calc(100vh - 200px);
	max-height: 720px;
}
.temp{
	margin: 0 auto; 
	display: inline-block; 
	width: 100%; 
	text-align: center; 
	box-sizing: border-box;
	margin-top: 60px;
	color: #444;
}
.templeft{
	display: inline-block;
	font-size: 20px;
	padding: 30px;
	padding-left: 0px;
	box-sizing: border-box;
	max-width: 1280px;
	width: calc(50% - 30px);
	min-width: 484px;
	height: auto; 
	vertical-align: top;
	line-height: normal;
	position: relative;
}
.tempright{
	display: inline-block;
	font-size: 20px;
	line-height: 175%;
	padding: 30px;
	padding-left: 20px;
	padding-right: 0px;  
	box-sizing: border-box;
	max-width: 504px;
	width: calc(50% - 0px);
	min-width: 352px;
	height: auto;
}
.card {
	position: relative; 
	display: inline-block; 
	margin-left: 10px;
	margin-top: 10px;
	padding: 0px; 
	box-sizing: border-box; 
	width: calc(25% - 12.5px); 
	min-width: 50px; 
	cursor: pointer; 
	color: #ffffff; 
	background-color: transparent; 
	overflow: hidden;
	vertical-align: bottom;
}
.deselectedcard{
	color: transparent; 
	background-color: transparent;
}
.selectedcard{
	color: #FFFFFF; 
	background-color: rgba(252, 74, 26,0.5);
}
.searchresults {
	min-height: 200px; 
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: scroll;
  	-webkit-overflow-scrolling: touch;
  	pointer-events: auto;
	border: 1px solid #E3E3E3; 
	box-sizing: border-box; 
	padding: 0px;
	user-select: none;
}
.searchresults::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.searchresults::-webkit-scrollbar:horizontal {
	height: 0px;
	background: gray;
}

.searchresults::-webkit-scrollbar:vertical {
	width: 11px;
}

.searchresults::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.searchresults::-webkit-scrollbar-track { 
	background-color: silver; 
	border-radius: 0px; 
}

.searchresults::-webkit-scrollbar-corner { 
	background-color: silver; 
}

.medialistselector{
	width: 100%; 
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2.5px; 
	justify-content: flex-start; 
	align-items: flex-start;
	align-content: flex-start;
	text-align: left;
	margin: 0px;
	padding: 0px;
	line-height: 0%;
	vertical-align: top;
	font-size: 14px;
}

.medialistselector .mls-thumb{
	position: relative;
}
.mls-thumb.mls-draggable{
	transition: box-shadow 0.1s ease;
}
/* the tile being dragged: lifts off the strip and follows the pointer (transform set inline in JS) */
.mls-thumb.mls-dragging{
	opacity: 0.92;
	z-index: 10;
	box-shadow: 0 8px 18px rgba(0,0,0,0.4);
	cursor: grabbing;
}
/* the tile it will drop onto */
.mls-thumb.mls-drop-target{
	outline: 3px solid #fc4a1a;
	outline-offset: 2px;
}
.mls-thumb.mls-drop-target::after{
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(252,74,26,0.22);
	pointer-events: none;
}
/* "x" to remove a media element (top-right of each tile) */
.mls-remove{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 16px;
	height: 16px;
	line-height: 15px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	background: rgba(0,0,0,0.55);
	cursor: pointer;
	z-index: 2;
	user-select: none;
	border-bottom-left-radius: 4px;
}
.mls-remove:hover{
	background: #fc4a1a;
}
/* "+" tile to add a media element (trails the thumbnails) */
.mls-add{
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px dashed #b8b8b8;
	border-radius: 4px;
	background: transparent;
	color: #b8b8b8;
	font-size: 30px;
	font-weight: 300;
	line-height: normal;
	cursor: pointer;
}
.mls-add:hover{
	border-color: #fc4a1a;
	color: #fc4a1a;
}

.medialistselector::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.medialistselector::-webkit-scrollbar:horizontal {
	height: 11px;
	background: gray;
}

.medialistselector::-webkit-scrollbar:vertical {
	width: 0px;
}

.medialistselector::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.medialistselector::-webkit-scrollbar-track { 
	background-color: silver; 
	border-radius: 0px; 
}

.medialistselector::-webkit-scrollbar-corner { 
	background-color: silver; 
}

.searchmessage{
	font-size: 18px;
	color: #444;
	margin: 0 auto;
	text-align: center;
	max-width: 450px;
	background: transparent;
	padding: 10px;
	box-sizing: border-box;
	font-weight: bold;
}

.imgcolcont{
	display: block;
	cursor: pointer; 
	position: relative;
	overflow: hidden;
	box-sizing: border-box; /*important*/
	border-style: solid;
	border-color: transparent;
	border-radius: 8px;
}

.imgcolcont:hover{
	border-color:  #FC4A1A;
}

.imgcolcont img{
	display: block;
	margin: 0px;
	background: #E3E3E3;
}
.userdiv{
	position: absolute;
	display: none; 
	bottom: 0px; 
	left: 0px; 
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	font-size: 10px;
	max-width: 90%;
}
.userdiv a{
	color: white;
	text-decoration: none;
	background: rgba(0,0,0,.3);
	padding-left: 3px;
	padding-right: 3px; 
	box-sizing: border-box; 
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom; 
	text-align: left;
}

.helpcontent {
	text-align: left; 
	font-size: 18px; 
	margin-top: 0px; 
	margin-bottom: 0px;  
	padding: 0px 10px; 
	width: 100%; 
	max-height: calc(75vh - 100px); 
	box-sizing: border-box; 
	min-height: 100px; 
	overflow-y: scroll; 
	overflow-x: hidden; 
	-webkit-overflow-scrolling: touch; 
	pointer-events: auto;
}
.helpcontent p{
	margin: 10px 0px;
}
.helpcontent::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 3px;
}

.helpcontent::-webkit-scrollbar:horizontal {
	height: 0px;
	background: transparent;
}

.helpcontent::-webkit-scrollbar:vertical {
	width: 3px;
}

.helpcontent::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.helpcontent::-webkit-scrollbar-track { 
	background-color: transparent; 
	border-radius: 0px; 
}

.helpcontent::-webkit-scrollbar-corner { 
	background-color: transparent; 
}

.helpcrumbs{
	font-size: 14px;
}

.helptext{
	display: inline-block; 
	width: calc(100% - 40px);
	max-width: 800px;
	padding: 20px 80px;
	margin: 20px 0px;
	font-size: 18px;
	line-height: 200%;
	background: #fff;
	text-align: left;
	box-shadow: 0 3px 8px 0 rgb(0 0 0 / 3%);
}

.morediv{
	margin-top: 20px; 
	margin-bottom: 20px;
	text-align: center;
}

.spinnerdiv{
	position: relative; 
	min-width: 100px; 
	width: 100%;
	min-height: 100px;
}
.timeline{
	position: relative;
	font-size: 12px; 
	color: #ffffff; 
	background: transparent;
	background-image: linear-gradient(to right, #444, #787878, #444);
	text-align: center; 
	vertical-align: middle; 
	padding: 0px;
	margin: 0px;
}
.timelineselect{
	background: rgb(74, 189, 172);
	background-image: none;
}
.sortable-placeholder {
  	display: inline-block;
	height: 1px; 
	width: 112px;
	background: #eeeeee;
}
.sortable-square-placeholder {
  	display: inline-block;
	height: 1px; 
	width: 63px;
	background: #eeeeee;
}
.thumblist{
	display: inline-block;
	background: #E3E3E3;
/*	background-image: linear-gradient(#969696, #444 18px); */
	width: 100%;
	text-align: left; 
	margin: 0px;
/*	margin-top: 5px; */
/*	margin-bottom: 20px; */
	overflow-x: scroll;
  	-webkit-overflow-scrolling: touch;
	overflow-y: hidden; 
/*	height: 99px; */ 
/*	background: #eeeeee; */
/*	border: 1px solid silver; */
	white-space: nowrap;
	vertical-align: top;
	user-select:  none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;  
}
.thumblist::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.thumblist::-webkit-scrollbar:horizontal {
	height: 11px;
	background: gray;
}

.thumblist::-webkit-scrollbar:vertical {
	width: 11px;
}

.thumblist::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.thumblist::-webkit-scrollbar-track { 
	background-color: silver; 
	border-radius: 0px; 
}

.thumblist::-webkit-scrollbar-corner { 
	background-color: silver; 
}

.backdroplist{
	display: inline-block;
	background: #444;
/*	background-image: linear-gradient(#969696, #444 18px); */
	width: 100%;
	text-align: left; 
	margin: 0px;
/*	margin-top: 5px; */
/*	margin-bottom: 20px; */
	overflow-x: scroll;
  	-webkit-overflow-scrolling: touch;
	overflow-y: hidden; 
/*	height: 99px; */ 
/*	background: #eeeeee; */
/*	border: 1px solid silver; */
	white-space: nowrap;
	vertical-align: top;
	user-select:  none;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;
  	-webkit-touch-callout: none;
}
.backdroplist::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.backdroplist::-webkit-scrollbar:horizontal {
	height: 10px;
	background: gray;
}

.backdroplist::-webkit-scrollbar:vertical {
	width: 10px;
}

.backdroplist::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.backdroplist::-webkit-scrollbar-track { 
	background-color: silver; 
	border-radius: 0px; 
}

.backdroplist::-webkit-scrollbar-corner { 
	background-color: silver; 
}

.thumbinfo {
	position: absolute;
	bottom: 0px;
	left: 5px;
/*	padding: 5px; */
	border-radius: 3px;
	display: inline-block;
/*	border: 1px solid white; */
	color: #444;
	text-align: left;
	font-size: 12px;
	line-height: 12px;
	vertical-align: middle;
}

.thumbfunc{
	position: absolute;
	bottom: 0px;
	right: 5px;
	padding: 0px;
	display: inline-block;
	color: white;
	text-align: right;
	font-size: 14px;
	line-height: 14px;
	vertical-align: middle;
}
.playercontrols {
	font-size: 14px; 
	font-weight: bold; 
	font-family: Open Sans; 
	width: 100%; 
	height: auto; 
	text-align: center;  
	background-color: rgba(0,0,0,0.5); 
	background: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); 
	background: -o-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); 
	background: -moz-linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); 
	background: linear-gradient(rgba(0,0,0,0), rgba(0, 0, 0, 0.7)); 
	padding-top: 0px; padding-bottom: 8px; 
	color: white;
	white-space: nowrap;
	overflow: hidden;
}

/* ── Video editor frame (desktop, videodesigner.js adds body.ved) ─────────────────
   The top bar, left rail and timeline in the redesigned site's dark teal (#0e3b45, the footer's color)
   instead of #444, so the editor reads as the same product as the pages that link to it. One orange
   action (Publish); Save is outlined, Help and Share are quiet. The phone layout (smallmobile) has no
   .ved and is untouched. The object panel on the right is not part of this block. 2026-09-18. */
.ved { --ved-chrome: #0e3b45; --ved-deep: #0a2f37; --ved-line: rgba(255,255,255,.08); --ved-ink: rgba(255,255,255,.82); }
.ved .header { background: var(--ved-chrome); } /* no hairline: over the rail (same teal) it read as a line under the logo */
.ved #centercontent { background: #eef3f4; }
.ved #headerlinks + div { font-family: Poppins, sans-serif; font-weight: 600; font-size: 16.5px !important; color: #fff; }
/* Top bar: pills in the site's button shape. Size and spacing live here, not in the inline styles. */
.ved .ved-top { height: 34px; line-height: 32px; margin: 13px 0 13px 8px; padding: 0 15px; vertical-align: top; border-radius: 999px;
                border: 1px solid transparent; font-family: Poppins, sans-serif !important; font-weight: 600; font-size: 13.5px;
                color: #fff; background: transparent; transition: background-color .15s, border-color .15s; }
.ved .ved-top > div:not(.bubbledialog) { font-size: 13.5px !important; vertical-align: top !important; }
.ved .ved-top > div:not(.bubbledialog) + div:not(.bubbledialog) { margin-left: 7px !important; }
.ved .ved-top > div:first-child { font-size: 12.5px !important; }
.ved .ved-quiet { color: var(--ved-ink); padding: 0 12px; }
.ved .ved-quiet:hover:enabled { background: rgba(255,255,255,.1); color: #fff; }
.ved .ved-save { border-color: rgba(255,255,255,.55); }
.ved .ved-save:hover:enabled { background: rgba(255,255,255,.12); border-color: #fff; }
.ved .ved-publish { background: #fc4a1a; border-color: #fc4a1a; margin-left: 10px; box-shadow: 0 4px 12px rgba(252,74,26,.28); }
.ved .ved-publish:hover:enabled { background: #e33d0f; border-color: #e33d0f; }
.ved .ved-top:focus-visible, .ved .ved-addbtn:focus-visible, .ved .ved-play:focus-visible, .ved #controls .iconbutton:focus-visible {
                outline: 2px solid rgba(247,183,51,.9); outline-offset: 2px; }
/* Signed out: the header's sign-in box as a pill beside Publish (videodesigner.js sets the one-line label). */
/* projoptions is placed 80px from the right for the avatar; the pill is wider than the old 60px box, so both leave room. */
.ved .ved-projoptions { right: 92px !important; }
.ved #signincontent { padding: 0 16px 0 0 !important; }
.ved #signinbutton { height: 34px !important; width: auto !important; margin: 13px 0 !important; padding: 0 12px !important; border-radius: 999px;
                     border: 1px solid rgba(255,255,255,.55); font: 600 13.5px/32px Poppins, sans-serif !important; color: #fff; }
.ved #signinbutton:hover:enabled { background: rgba(255,255,255,.12) !important; border-color: #fff; }
/* Delete, undo, redo and the tools menu: round hover targets. */
/* getIconButton() sets an inline text-align: left, which put each icon in the left half of its round hover. */
.ved #controls .iconbutton { height: 34px; width: 34px; padding: 0; margin: 0 1px; text-align: center !important; border-radius: 50%;
                             color: var(--ved-ink); font-size: 16px; line-height: 32px; }
.ved #controls .iconbutton:hover:enabled { background: rgba(255,255,255,.1); color: #fff; }
.ved #controls .iconbutton:disabled { color: rgba(255,255,255,.3); }
/* Project type label: a pill before the project name, teal for video editors and indigo for image editors, the AI video
   and AI image pages' colors (ai.php / imageai.php). /projects/ labels its cards with the same pair. The owner preferred this
   to coloring the editor's edges (tried 2026-09-19, removed). */
.ved-video { --ved-type: "Video"; --ved-type-bg: #1a6b7a; --ved-type-ink: #fff; } /* same pills as /projects/ (.pj-type) */
.ved-image { --ved-type: "Image"; --ved-type-bg: #3c5bc7; --ved-type-ink: #fff; }
.ved-video:not(.ved-phone) #headerlinks + div::before, .ved-image:not(.ved-phone) #headerlinks + div::before {
        content: var(--ved-type); display: inline-block; vertical-align: 3px; margin-right: 10px; padding: 0 10px; border-radius: 999px;
        background: var(--ved-type-bg); color: var(--ved-type-ink); font: 600 11px/21px Poppins, sans-serif; letter-spacing: .02em; }
/* BubbleMenu section headings (ui.js, item.section): Tools is Edit / Adjust / export / Older features (Filter). */
.bm-section { padding: 8px 10px 3px; font: 600 11.5px/16px Poppins, sans-serif; color: #7a9299; letter-spacing: .01em; cursor: default; }
.bm-section:not(:first-child) { margin-top: 5px; padding-top: 9px; border-top: 1px solid #e6eef0; }
/* Tools palette (ToolPalette, ui.js, 2026-10-23): edit buttons and Help along the top, then tiles in a grid under each
   section heading. Colors follow the restyled menu (.ved .addmenu, .bm-section). */
.bubbledialog .tp { width: 300px; padding: 4px; box-sizing: border-box; text-align: left; background: transparent; border: 0; }
.tp-top { display: flex; align-items: center; gap: 4px; padding: 2px 2px 10px; border-bottom: 1px solid #e6eef0; }
.tp-edit { display: flex; gap: 4px; flex: 1 1 auto; }
.tp .tp-edit-btn, .tp .tp-corner { width: 40px; height: 36px; margin: 0; padding: 0; border: 1px solid #dbe6e9; border-radius: 8px; background: #fff; color: #2f3437; font-size: 15px; line-height: 34px; cursor: pointer; }
.tp .tp-corner { width: 36px; border-radius: 50%; color: #5a6468; font-size: 17px; }
.tp .tp-edit-btn:hover:enabled, .tp .tp-corner:hover:enabled { background: #eef7f8; color: #0e3b45; border-color: #c7dde2; }
.tp .tp-edit-btn:disabled { color: #c3cdd0; background: #fff; cursor: default; }
.tp-section { display: flex; align-items: center; gap: 8px; padding: 14px 4px 6px; font: 700 12.5px/16px Poppins, sans-serif; color: #0e3b45; letter-spacing: .01em; cursor: default; } /* darker, with a rule after it: the grey headings read as tile labels (owner, 2026-10-23) */
.tp-section::after { content: ""; flex: 1 1 auto; height: 1px; background: #dbe6e9; }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tp .tp-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 10px 4px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #2f3437; font: 12px/1.25 'Open Sans', sans-serif; text-align: center; cursor: pointer; }
.tp .tp-tile i { font-size: 20px; color: #1d7f8c; }
.tp .tp-tile:hover:enabled { background: #eef7f8; border-color: #d3e6ea; color: #0e3b45; }
.tp .tp-tile:disabled { opacity: .45; cursor: default; }
.tp .tp-tile .rf-beta { display: block; width: max-content; margin: 3px auto 0; }
/* The round play button (the timeline's left corner, videodesigner.js .ved-timeplay). */
.ved #editoptions { box-shadow: inset -1px 0 0 var(--ved-line); } /* phones' button column */
.ved .ved-play { width: 56px; height: 56px; padding: 0 0 0 4px; border: 0; border-radius: 50%; cursor: pointer; background: #fc4a1a; color: #fff;
                 font-size: 21px; line-height: 56px; box-shadow: 0 6px 16px rgba(252,74,26,.35); transition: transform .15s, background-color .15s; }
.ved .ved-play:hover { background: #e33d0f; transform: scale(1.06); }
.ved .ved-play:active { transform: scale(.97); }
/* Timeline: a flat deep strip; the selected second keeps the brand teal. */
.ved .thumbarea, .ved .thumblist { background: var(--ved-deep); }
.ved .timeline { background: var(--ved-deep); background-image: none; color: rgba(255,255,255,.6); font-family: Poppins, sans-serif; font-size: 11px; }
.ved .timeline > div { color: inherit !important; font-family: inherit !important; }
.ved .timeline > div:first-child { color: rgba(255,255,255,.3) !important; }
.ved .timeline > div[style*="border-right"] { border-right-color: rgba(255,255,255,.22) !important; }
.ved .timeline.timelineselect { background: #4abdac; color: #fff; }
.ved .timeline.timelineselect > div:first-child { color: rgba(255,255,255,.7) !important; }
.ved .thumblist { scrollbar-color: rgba(255,255,255,.28) var(--ved-deep); }
.ved .thumblist::-webkit-scrollbar:horizontal { background: var(--ved-deep); }
.ved .thumblist::-webkit-scrollbar-track { background-color: var(--ved-deep); }
.ved .thumblist::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.28); border: 3px solid var(--ved-deep); border-radius: 8px; }
.ved .thumblist::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.45); }
.ved .thumblist::-webkit-scrollbar-corner { background-color: var(--ved-deep); }
/* ── end video editor frame */
/* Phone layout (.ved-phone, smallmobile): the action row under the header becomes part of the same teal bar, with the
   desktop top bar's roles -- quiet icon buttons, outlined Save, one orange Publish/Download -- and the play button is
   the desktop's orange circle on the dark timeline. getVertButton() sets gray/orange inline styles, hence !important. */
.ved-phone #editoptions { background: var(--ved-chrome) !important; box-shadow: none; }
.ved-phone .vp-btn { width: 38px !important; height: 36px !important; padding: 0 !important; margin: 7px 0 0 6px !important; border-radius: 10px !important;
                     background: transparent !important; border: 1px solid transparent !important; color: var(--ved-ink) !important;
                     font-size: 17px !important; line-height: 34px !important; text-transform: none; box-shadow: none !important; }
.ved-phone .vp-btn:active { background: rgba(255,255,255,.12) !important; }
.ved-phone .vp-add { color: #fff !important; background: rgba(255,255,255,.12) !important; }
.ved-phone .vp-save { border-color: rgba(255,255,255,.55) !important; border-radius: 999px !important; width: 40px !important; }
.ved-phone .vp-publish { background: #fc4a1a !important; border-color: #fc4a1a !important; border-radius: 999px !important; color: #fff !important; width: 44px !important; }
.ved-phone .vp-play { display: inline-flex; align-items: center; justify-content: center; vertical-align: top; border: 0; padding: 0; cursor: pointer; background: var(--ved-deep); }
.ved-phone .vp-playdot { width: 42px; height: 42px; border-radius: 50%; background: #fc4a1a; color: #fff; display: inline-flex; align-items: center;
                         justify-content: center; font-size: 16px; padding-left: 3px; box-sizing: border-box; box-shadow: 0 4px 12px rgba(252,74,26,.35); }
.ved-phone .vp-duration { height: 20px; line-height: 20px; font-size: 11.5px; z-index: 2; border-radius: 0 8px 0 0; box-shadow: none; }
.ved-phone .thumbarea, .ved-phone .thumblist { background: var(--ved-deep); }
/* Object panel (objectinspector.js; class hooks .oi*). One white card like the site's cards instead of a teal
   title bar and teal frame on gray; list items as bordered rows with an orange border for the selection. Only under
   .ved: the image editor and the phone layout keep the inline styles. The header height stays inside the 34px
   the script subtracts for it (closeHeight + border). */
.ved .oi { background: transparent !important; }
.ved .oi-head { background: #fff !important; border: 1px solid #dde8eb !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important;
                text-align: left !important; height: 34px; padding: 0 20px !important; }
.ved .oi-head span { color: #0e3b45 !important; font: 600 15.5px/34px Poppins, sans-serif !important; vertical-align: top !important; }
.ved .oi-body { background: #fff !important; border: 1px solid #dde8eb !important; border-top: 0 !important; border-radius: 0 0 16px 16px !important;
                padding: 8px 20px 20px !important; box-shadow: 0 12px 30px rgba(14,59,69,.07); }
.ved .oi-item { border: 2px solid #e6eef0 !important; border-radius: 12px; overflow: hidden; margin-bottom: 8px !important;
                transition: border-color .15s, background-color .15s, box-shadow .15s; }
.ved .oi-item:hover { border-color: #9fc9d1 !important; background: #f6fafb !important; }
/* Selected: orange, matching the object's selection box on the canvas (owner's choice 2026-09-18). One 2px
   border on every row, only its color changing: a 1px border plus a 1px outer shadow rendered uneven at
   fractional positions, and changing the width would nudge the row. */
.ved .oi-item.oi-active, .ved .oi-item.oi-active:hover { border-color: #fc4a1a !important; background: #fff6f3 !important; }
/* The thumbnail's corners follow the row's inner rounding (12px less the 2px border). */
.ved .oi-item > canvas { border-radius: 10px 0 0 10px; }
.ved .oi-info { font-size: 13.5px; color: #5a6468; }
.ved .oi-info .paramlabel { font: 600 13.5px/1.35 Poppins, sans-serif; color: #0e3b45; }
/* The Backdrop row's info is a plain inline-block with line-height centering, which the label's own line-height defeats. */
.ved .oi-bgitem .oi-info { display: inline-flex !important; align-items: center; }
/* Empty second. */
.ved .oi-empty { margin-top: 4px; padding: 22px 16px 18px; border: 1.5px dashed #c9dbe0; border-radius: 14px; background: #f6fafb; text-align: center; }
.ved .oi-empty-title { font: 600 15px/1.35 Poppins, sans-serif; color: #0e3b45; }
.ved .oi-empty-text { margin: 4px 0 16px; font-size: 13.5px; line-height: 1.5; color: #5a6468; }
.ved .oi-empty-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ved .oi-empty-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1px solid #dde8eb; border-radius: 10px;
                     background: #fff; color: #0e3b45; font: 600 13.5px Poppins, sans-serif; cursor: pointer; transition: border-color .15s, background-color .15s; }
.ved .oi-empty-btn i { color: #1a6b7a; font-size: 14px; }
.ved .oi-empty-btn:hover { border-color: #1a6b7a; background: #eef7f8; }
.ved .oi-empty-btn:focus-visible { outline: 2px solid rgba(26,107,122,.5); outline-offset: 2px; }
/* Editing one object. */
.ved .oi-edithead { border-bottom: 1px solid #e3edf0 !important; height: 38px !important; line-height: 34px !important; margin-top: 2px !important;
                    font: 600 15px/34px Poppins, sans-serif; color: #0e3b45; }
/* Title left-aligned right after the back arrow (owner, 2026-09-18), on the same left edge as "Second N" above. */
.ved .oi-edithead { text-align: left !important; padding-left: 34px !important; box-sizing: border-box; }
/* left: 0, not -6: the round hover ran past the panel's edge and was clipped. */
.ved .oi-back { width: 30px; height: 30px !important; top: 2px !important; left: 0 !important; border-radius: 50%; color: #1a6b7a !important; }
.ved .oi-back:hover { background: #eef3f4 !important; }
.ved .oi-body .selectbutton { border-color: #dbe5e8; border-radius: 8px; }
.ved .oi-body .selectbutton:hover, .ved .oi-body .selectbutton:hover:enabled { border-color: #4abdac; }
.ved .oi-body .selectbutton:disabled { background: #f3f6f7; border-color: #e3edf0; }
.ved .oi-body .captioninput { border-color: #dbe5e8; border-radius: 8px; padding: 8px 10px; line-height: 1.45; transition: border-color .15s, box-shadow .15s; }
.ved .oi-body .captioninput:hover:enabled { border-color: #4abdac; }
.ved .oi-body .captioninput:focus { border-color: #4abdac; box-shadow: 0 0 0 3px rgba(74,189,172,.2); }
.ved .oi-body .selecttext .paramlabel { font-weight: 600; color: #5a6468; }
.ved .oi-body .rowcontainer .banner { font: 600 11.5px/1.2 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5a6468; margin: 0 0 7px; }
/* Timing sits apart from the look controls above it. */
.ved .oi-body .part:has(> div > .part > .banner) { border-top: 1px solid #e3edf0; padding-top: 16px !important; }
/* Sectioned panels (textpanel.js adds .oi-sectioned): a small uppercase heading with a hairline per section, a caption
   above each control, labels moved out of the buttons. Other panels keep the older layout until they are converted. */
.ved .oi-sectioned { row-gap: 8px !important; }
.ved .oi-sectioned .oi-sechead { width: 100%; box-sizing: border-box; margin-top: 8px; padding-top: 12px; border-top: 1px solid #e3edf0;
                                 font: 600 11px/1.2 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5a6468; }
.ved .oi-sectioned .oi-cap, .ved .oi-sectioned [data-label=effectscontainer] .banner { font: 12px/1.3 'Open Sans', sans-serif; letter-spacing: 0; text-transform: none;
                                 color: #7b888c; margin: 0 0 4px; }
.ved .oi-sectioned .part:has(> div > .part > .banner) { border-top: 0; padding-top: 0 !important; }
/* Every captioned control fills its column. Several buttons carry an inline width (BubbleDialog's 40px, the align
   selector's), hence !important; only a part's own button is matched, never buttons inside its popups. */
.ved .oi-sectioned .row > .part > .selectbutton, .ved .oi-sectioned .row > .part > .part > .selectbutton { width: 100% !important; max-width: none !important; }
.ved .oi-sectioned .row > .part > .part { display: block; width: 100%; margin: 0 !important; } /* the shadow picker's own wrapper */
.ved .oi-sectioned .row > .part > .selectbutton > .selecttext, .ved .oi-sectioned .row > .part > .part > .selectbutton > .selecttext { width: auto !important; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Center a button's content (swatch, value, font name) on the whole button, not on the space left of the caret: the
   caret is pinned to the right edge and the content gets equal padding on both sides. */
.ved .oi-sectioned .row > .part > .selectbutton, .ved .oi-sectioned .row > .part > .part > .selectbutton { position: relative; }
.ved .oi-sectioned .row > .part > .selectbutton > .selectarrow, .ved .oi-sectioned .row > .part > .part > .selectbutton > .selectarrow {
                position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0; }
.ved .oi-sectioned .row > .part > .selectbutton > .selecttext, .ved .oi-sectioned .row > .part > .part > .selectbutton > .selecttext {
                padding: 0 15px !important; box-sizing: border-box; text-align: center; justify-content: center; }
/* Labels now sit above the swatches, so the ones inside the color buttons go. */
.ved .oi-sectioned .row .selecttext .paramlabel { display: none; }
.ved .oi-sectioned .oi-sizing { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; color: #2f3437; }
.ved .oi-sectioned .oi-sizing i { font-size: 12px; color: #1a6b7a; }
.ved .oi-sectioned .selecttext > span { margin-left: 6px; vertical-align: middle; }
.ved .oi-sectioned .selecttext > i, .ved .oi-sectioned .selecttext > .layericon { color: #1a6b7a; vertical-align: middle; }
/* Effect delay note on the Enter/Exit caption line (effecttimingselector.js setDelayNote): caption left, note right. */
.ved .oi-body [data-label=effectscontainer] .banner { display: flex; justify-content: space-between; align-items: baseline; }
.effectdelaynote { font: 12px/1.3 'Open Sans', sans-serif; letter-spacing: 0; text-transform: none; color: #8a979b; }
.effectdelaynote i { font-size: 11px; margin-right: 3px; }
/* The editing view (objectinspector.js editnode, a .rowcontainer) had no height limit: on a short window it ran past
   the card and over the timeline. It now fills the card's body and scrolls inside it, like the list view. Popups are
   portaled to <body>, so the overflow does not clip them. The fixed 316px width becomes the body's width so a
   scrollbar cannot push the rows sideways; the 10px right padding (pulled back out by the negative margin) is the
   scrollbar's lane -- a macOS overlay bar otherwise sits on top of the controls' right edge. */
.ved .oi-body > .rowcontainer { width: 100%; max-height: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden;
                                 align-content: flex-start; padding-right: 10px; margin-right: -10px; }
/* the panel inside keeps .rowcontainer's fixed 316px, which the scrollbar would clip at the right edge */
.ved .oi-body > .rowcontainer .rowcontainer { width: 100%; box-sizing: border-box; }
/* getReplace() (dialogutil.js) hangs a CSS pointer arrow off the Replace button's left side. Against a pill it no
   longer meets the button's edge, so in the panel the pill stands alone beside its thumbnail. */
.ved .oi-body .arrow { display: none; }
.ved .oi-body .arrow + .actionbutton { margin-left: 12px !important; }
/* Scroll cues (objectinspector.js updateScrollCues): a fade over whichever edge has more content past it, and a
   scrollbar that stays visible -- the styled ::-webkit-scrollbar is always shown, where the standard
   scrollbar-width/color would give macOS's auto-hiding overlay bar. */
.ved .oi-body { position: relative; }
.ved .oi-body::before, .ved .oi-body::after { content: ""; position: absolute; left: 12px; right: 18px; height: 34px; pointer-events: none;
                                              opacity: 0; transition: opacity .2s; z-index: 2; }
.ved .oi-body::before { top: 8px; background: linear-gradient(#fff 15%, rgba(255,255,255,0)); }
.ved .oi-body::after { bottom: 20px; background: linear-gradient(rgba(255,255,255,0), #fff 85%); }
.ved .oi-body.oi-more-above::before, .ved .oi-body.oi-more-below::after { opacity: 1; }
.ved .oi-list, .ved .oi-body > .rowcontainer { scrollbar-width: auto; scrollbar-color: auto; }
.ved .oi-list::-webkit-scrollbar, .ved .oi-body > .rowcontainer::-webkit-scrollbar { width: 8px; }
.ved .oi-list::-webkit-scrollbar-track, .ved .oi-body > .rowcontainer::-webkit-scrollbar-track { background: #eef3f4; border-radius: 8px; }
.ved .oi-list::-webkit-scrollbar-thumb, .ved .oi-body > .rowcontainer::-webkit-scrollbar-thumb { background: #9fb6bc; border-radius: 8px; border: 2px solid #eef3f4; }
/* The item list gets the editing view's scrollbar lane: 10px of right padding pulled back out by a negative margin,
   so the bar sits beside the rows rather than against them, and rows end on the same edge as the editing view's
   controls. overflow auto (the inline style says scroll), so the track only appears when the list is longer. */
.ved .oi-list { overflow-y: auto !important; padding-right: 10px !important; margin-right: -10px; box-sizing: border-box; }
/* ── end object panel */
/* Editor popups and dialogs (bubbledialog.js, modialog.js and the pickers inside them), matching the frame and object
   panel: white cards with a hairline and a soft teal-tinted shadow instead of an orange 2px frame on gray; selection
   in popups in teal rather than orange (the selected object in the panel and on the canvas stays orange). Popups
   and dialogs portal to <body>, which carries .ved, so they are all in scope; the image editor is not.
   bubbledialog.js draws its arrow from the popup's computed border width, border color and background, so the arrow
   follows these values -- keep the border a solid color. */
.ved .bubbledialog { background: #fff; border: 1px solid #cfdde1; border-radius: 12px; box-shadow: 0 14px 36px rgba(14,59,69,.18), 0 2px 6px rgba(14,59,69,.08); }
.ved .addmenu { background: transparent; color: #2f3437; line-height: 30px; border-radius: 7px; padding: 0 8px !important; font-family: 'Open Sans', sans-serif; }
.ved .addmenu:hover:enabled { background: #eef7f8; color: #0e3b45; }
.ved .addmenu i { color: #1a6b7a; }
/* Disabled rows (Update Project before a save, Cut/Copy/Paste with nothing selected). .ved .addmenu above
   outranks the base .addmenu:disabled, so the gray has to be restated here or disabled rows look live. */
.ved .addmenu:disabled, .ved .addmenu:disabled:hover { color: #b3bcbf; background: transparent; cursor: default; }
.ved .addmenu:disabled i, .ved .addmenu:disabled img { color: #c9d1d4; opacity: .55; }
.ved .selectitem { border-radius: 6px; }
/* Timing lists underline the video's last second with an inline orange border-bottom; on a rounded row that line
   bends up at both ends, so marked rows stay square and the line runs straight across. */
.ved .selectitem[style*="border-bottom"], .ved .selectitem[style*="border-top"] { border-radius: 0; }
.ved .selectitem:hover { background: #eef7f8; color: #0e3b45; }
.ved .selecteditem, .ved .selecteditem:hover { background: #1a6b7a; color: #fff; }
.ved .selectheader { background: #eef3f4; color: #5a6468; font: 600 11px/20px Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 6px; }
.ved .fontbutton { border-radius: 6px; }
.ved .fontbutton:hover { background: #eef7f8; }
.ved .selectedfontbutton, .ved .selectedfontbutton:hover { border-color: #1a6b7a; background: #eef7f8; }
.ved .popupselected { background: #1a6b7a; }
/* The base .selector is overflow-y: scroll, which reserves a track even for a three-item list; now that the track
   is visible that shows on every menu. Scroll only when the list is actually longer than its box. */
.ved .selector { overflow-y: auto !important; }
.layericon { display: inline-block; vertical-align: middle; }
/* Short popup lists (font Style, effect category, sort order...) and the font list keep a scrollbar showing at rest,
   so options below the fold are visibly there. Chrome drops the ::-webkit-scrollbar styling -- and falls back to
   macOS's auto-hiding overlay bar -- whenever scrollbar-width or scrollbar-color is set, and the base .selector
   sets scrollbar-width: thin. Both go back to auto here so the always-visible styled bar applies. */
.ved .selector, .ved .fontsearchcontainer { scrollbar-width: auto; scrollbar-color: auto; }
.ved .selector::-webkit-scrollbar, .ved .fontsearchcontainer::-webkit-scrollbar { -webkit-appearance: none; width: 9px; }
.ved .selector::-webkit-scrollbar-track, .ved .fontsearchcontainer::-webkit-scrollbar-track { background-color: #eef3f4; border-radius: 8px; }
.ved .selector::-webkit-scrollbar-thumb, .ved .fontsearchcontainer::-webkit-scrollbar-thumb { background-color: #9fb6bc; border: 2px solid #eef3f4; border-radius: 8px; }
.ved .selector::-webkit-scrollbar-thumb:hover, .ved .fontsearchcontainer::-webkit-scrollbar-thumb:hover { background-color: #6f9099; }
.ved .fontsearchcontainer::-webkit-scrollbar-corner { background-color: transparent; }
.ved .bubbledialog .banner { color: #5a6468; letter-spacing: .05em; }
/* Buttons: pills in sentence case, like the site. */
.ved .actionbutton { border-radius: 999px; text-transform: none; font-family: Poppins, sans-serif !important; font-weight: 600; padding-left: 16px; padding-right: 16px; }
.ved .actionbutton:hover:enabled { background: #e33d0f; border-color: #e33d0f; }
.ved .actionbutton.secondarybutton:hover:enabled { background: #eef7f8; color: #0e3b45; border-color: #1a6b7a; }
.ved .actionbutton:focus-visible { outline: 2px solid rgba(252,74,26,.45); outline-offset: 2px; }
.ved .sp-container button { border-radius: 999px; font-family: Poppins, sans-serif !important; font-weight: 600; padding: 5px 12px; }
.ved .sp-container button:hover { background-color: #e33d0f; border-color: #e33d0f; }
.ved .sp-cancel { color: #5a6468 !important; }
/* Tabs (image, video and music sources; color picker; animation categories): quiet text, teal underline on the open one. */
/* Inactive tabs light gray in regular weight, the open one teal and bold with the underline. */
.ved .tab, .ved .atab { font-family: Poppins, sans-serif !important; font-weight: 400; color: #a3aeb1; border-bottom: 2px solid transparent; padding-bottom: 3px; transition: color .15s; } /* underline closer to the label (owner, 2026-09-20) */
.ved .tab:hover:enabled, .ved .atab:hover { color: #5a6468; }
.ved .tab:disabled, .ved .atabdisabled { color: #1a6b7a; font-weight: 700; border-bottom: 2px solid #1a6b7a; }
/* Dialog frame. The title bar stays 30px (the search dialogs' resize math uses it). */
/* Every page, not only the editors (was scoped to .ved until 2026-09-19): the white card, teal-tinted backdrop,
   teal title and hairline. The 1px border from the base .dialog rule stays -- MoDialog's resize math measures it. */
.fixedoverlay { background-color: rgba(10,47,55,.55); }
.dialog { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(8,40,48,.35), 0 2px 8px rgba(8,40,48,.12); }
.dialogtitlediv { box-shadow: inset 0 -1px 0 #e3edf0; }
.dialogtitle { color: #0e3b45; font-size: 18px; }
.dialogclosediv .closebutton:hover { background-color: #eef3f4; color: #0e3b45; }
/* Select Size (aspectdialog.js): three equal-width rows rather than boxes sized to their text, the whole row clickable. */
.ved .aspectopt { width: 100%; border: 1px solid #dde8eb !important; border-radius: 12px !important; overflow: hidden; transition: border-color .15s; }
.ved .aspectopt:hover { border-color: #1a6b7a !important; }
.ved .aspectoptbtn { display: flex !important; align-items: center; width: 100%; height: auto !important; box-sizing: border-box; text-align: left; line-height: normal !important; background: none !important; }
.ved .aspectoptbtn:hover { background: #f6fafb !important; }
.ved .aspectshape { border-color: #1a6b7a !important; border-radius: 3px; background: #eef7f8; }
.ved .aspectlabel { color: #5a6468; font-size: 14.5px !important; }
.ved .aspectlabel b { font: 600 16px Poppins, sans-serif; color: #0e3b45; }
/* Shadow picker presets (shadowselector.js): chips like the font styles. They are one-shot actions, so no selected state. */
.ved .shadowpresets .selectbutton { height: 30px; padding: 0 12px !important; border-radius: 999px; border-color: #d5e2e6; font-size: 13px; margin-right: 4px !important; }
.ved .shadowpresets .selectbutton:hover { border-color: #1a6b7a; background: #eef7f8; }
/* Effect tiles (effectlist.js getEffectTile): the effect's name in HTML, with the one shared preview canvas laid over
   the hovered tile while it plays. */
.effecttile { display: inline-flex !important; align-items: center; justify-content: center; position: relative; overflow: hidden; vertical-align: middle;
              text-align: center; line-height: .96; color: #444; font-family: 'Open Sans', sans-serif; background: #fff; user-select: none; }
/* .96 measured against the canvas preview's own layout (Text1 lineHeight .8): at 1.05 the text jumped up 1.5px when a
   preview ended; .96 lands within half a device pixel. */
.effecttile.popupselected { color: #fff; }
.effecttile > span { white-space: pre; }
.effecttile .effectpreview { position: absolute; left: 0; top: 0; }
.effecttile.ep-playing > span { visibility: hidden; }
.effectpicker .effecttile.popupselected { color: #0e3b45; }
/* Effect picker (effectlist.js, desktop video editor): categories listed on the left, preview tiles on the
   right, "Fade as it moves" in the header; four tiles across (72x48) because many categories come as down/up/right/left sets. */
.effectpicker { display: flex; width: 474px; max-width: calc(100vw - 48px); height: 320px; text-align: left; }
.effectpicker .ep-cats { flex: 0 0 132px; overflow-y: auto; border-right: 1px solid #e3edf0; padding-right: 6px; margin-right: 12px;
                         scrollbar-width: thin; scrollbar-color: #cfdde1 transparent; }
.effectpicker .ep-cat { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; border: 0;
                        background: none; padding: 6px 8px; margin: 0 0 1px; border-radius: 7px; font: 13px/1.3 'Open Sans', sans-serif; color: #2f3437;
                        cursor: pointer; text-align: left; }
.effectpicker .ep-cat:hover { background: #eef7f8; }
.effectpicker .ep-cat.ep-on { background: #1a6b7a; color: #fff; }
.effectpicker .ep-count { font-size: 12px; color: #8a979b; }
.effectpicker .ep-cat.ep-on .ep-count { color: rgba(255,255,255,.75); }
.effectpicker .ep-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.effectpicker .ep-head { display: flex; justify-content: space-between; align-items: center; min-height: 30px; margin-bottom: 8px; }
.effectpicker .ep-title { font: 600 14px Poppins, sans-serif; color: #0e3b45; }
.effectpicker .ep-head .part { margin: 0; font-size: 13px; }
.effectpicker .ep-fade-off { opacity: .4; pointer-events: none; } /* Appear/Disappear: the switch stays, inactive */
.effectpicker .effectlist { flex: 1 1 auto; width: auto; height: auto; margin: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfdde1 transparent; }
.effectpicker .effectlist > div { display: grid; grid-template-columns: repeat(4, 74px); gap: 6px; padding: 2px; }
.effectpicker .effectcanvas { margin: 0; border: 1px solid #dde8eb !important; border-radius: 8px; transition: border-color .15s; }
.effectpicker .effectcanvas:hover { border-color: #9fc9d1 !important; }
.effectpicker .effectcanvas.popupselected { background: #e3f1f3 !important; border-color: #1a6b7a !important; box-shadow: 0 0 0 1px #1a6b7a; }
/* Shape tiles in the shapes-and-icons dialog (objectselector.js): rounded, with the picker's teal hover. The script
   sets a gray hover background inline, hence !important. */
.ved .os-shape { border-radius: 10px; transition: background-color .15s; }
.ved .os-shape:hover { background: #eef7f8 !important; }
/* Media search (imagesearch.js setupStockSearch): one big search box, Filters and Source in a header over the tabs. */
.ms-panel .ms-norc { display: none !important; }
.ms-switch { flex: 0 0 auto; display: flex; gap: 2px; padding: 3px; border: 1px solid #d5e2e6; border-radius: 999px; height: 42px; box-sizing: border-box; }
.ms-sw { border: 0; background: none; border-radius: 999px; padding: 0 14px; font: 600 13px Poppins, sans-serif; color: #7b888c; cursor: pointer; }
.ms-sw:hover { color: #0e3b45; }
.ms-sw.ms-on { background: #1a6b7a; color: #fff; cursor: default; }
.ms-panel .searchresults { text-align: center; } /* centers the photo columns in the wider dialog */
@media (max-width: 700px) { /* phones: the search box gets its own line, the switch and menus wrap under it */
  .ms-header { flex-wrap: wrap; }
  .ms-searchwrap { flex: 1 0 100%; }
  .ms-header .ms-filterbutton, .ms-header .ms-source, .ms-switch { height: 36px; }
}
.ms-header { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ms-searchwrap { position: relative; flex: 1 1 auto; min-width: 0; }
.ms-searchwrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #8a979b; font-size: 14px; pointer-events: none; }
.ms-search { width: 100%; height: 42px; box-sizing: border-box; border: 1px solid #d5e2e6; border-radius: 999px; padding: 0 16px 0 40px;
             font: 15px 'Open Sans', sans-serif; color: #2f3437; background: #fff; }
.ms-search:focus { outline: none; border-color: #4abdac; box-shadow: 0 0 0 3px rgba(74,189,172,.2); }
.ms-header .ms-filterbutton, .ms-header .ms-source { flex: 0 0 auto; width: auto !important; height: 42px; padding: 0 12px 0 14px; border-radius: 999px; border-color: #d5e2e6; }
.ms-header .ms-filterbutton .selecttext, .ms-header .ms-source .selecttext { width: auto !important; }
.ms-filterbutton .selecttext i { color: #1a6b7a; margin-right: 6px; }
.ms-filterbox { width: 300px; text-align: left; }
.ms-frow { margin: 0 0 12px; }
.ms-ftitle { font: 600 11px/1.2 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5a6468; margin: 0 0 6px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-chip { height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid #d5e2e6; background: #fff; color: #2f3437; cursor: pointer; font: 13px 'Open Sans', sans-serif; }
.ms-chip:hover { border-color: #1a6b7a; }
.ms-chip.ms-on { background: #1a6b7a; border-color: #1a6b7a; color: #fff; }
.ms-fnote { font-size: 12px; line-height: 1.45; color: #8a979b; }
/* Video results (videoselector.js .vs-grid): rows of one height where each card takes its clip's own shape (--ar,
   set per card), so vertical and horizontal clips sit together without the white gaps of the old 16:9 boxes. The
   duration and play control are one pill on the thumbnail. Phones keep the one-column list. */
@media (min-width: 701px) {
  /* only the showing tab: SearchTab hides the others with an inline display: none */
  .vs-grid:not([style*="display: none"]) { display: flex !important; flex-wrap: wrap; gap: 8px; align-content: flex-start; padding: 2px; }
  .vs-grid::after { content: ""; flex: 1000 1 0; } /* keeps a short last row from stretching */
  .vs-grid > .card { --ar: 1.778; margin: 0 !important; width: auto !important; min-width: 0; height: 150px;
                     flex: var(--ar) 1 calc(150px * var(--ar)); max-width: calc(270px * var(--ar)); border-radius: 8px; }
  .vs-grid > .card .projectvid { height: 100%; }
  .vs-grid > .card .projectvid:after { padding-top: 0; }
  .vs-grid > .card .projectvidcont { background: #eef3f4 !important; }
  .vs-grid > .card .projectvidcont img, .vs-grid > .card video { object-fit: cover !important; }
  .vs-grid > .searchmessage, .vs-grid > .morediv, .vs-grid > .spinnerdiv { flex: 1 0 100%; }
}
.vs-grid .vs-dur, .vs-grid .vs-play { background: rgba(0,0,0,.55) !important; color: #fff; font: 600 11px/1 'Open Sans', sans-serif; padding: 4px 7px !important; margin: 0 !important; }
.vs-grid .vs-dur { border-radius: 999px; } /* a whole pill: the play half beside it is gone (owner, 2026-10-19) */
.vs-grid .vs-play { border-radius: 0 999px 999px 0; }
.vs-grid .vs-play i { font-size: 9px; }
/* ── end editor popups and dialogs */
/* ── NumberInput with an inline slider (numberinput.js, class .ni-inline) ─────────────
   Shadow offsets/blur, stroke, font spacing and the other inline-slider fields: a rounded value box beside the
   slider, which slider.js now draws with a teal fill and a rounded track (numberinput.js passes those colors). A
   list word such as "Auto" gets .ni-word: muted box, muted slider. Inline styles set by numberinput.js (height,
   border, the gray focus background) are overridden here, hence !important. */
.ni-inline .numberinput { height: 28px !important; box-sizing: border-box; border: 1px solid #d5e2e6 !important; border-radius: 6px; background: #fff !important;
                          font: 600 13px 'Open Sans', sans-serif; color: #0e3b45; text-align: center; vertical-align: middle; }
.ni-inline .numberinput:focus { outline: none; border-color: #4abdac !important; box-shadow: 0 0 0 3px rgba(74,189,172,.2); }
.ni-inline.ni-word .numberinput { color: #8a979b; font-weight: 400; }
.ni-inline .ni-minmax { font-size: 11.5px; color: #8a979b; vertical-align: middle; }
.ni-inline canvas { vertical-align: middle !important; }
/* numberinput.js fixes the row to the slider height (20px in most callers); the 28px box needs room, so the row
   grows to fit instead of clipping the box and the slider button. */
.ni-inline { height: auto !important; min-height: 30px; overflow: visible !important; }
.ni-inline .selecttext { display: flex !important; align-items: center; height: auto !important; line-height: normal !important; overflow: visible !important; }
.ni-inline .selecttext > div { display: inline-flex !important; align-items: center; }
/* ── end NumberInput */

/* ── Font popup (fontdialog.js, class .fd) ────────────────────────────────────
   One column: search, category chips, a tall list, style chips, two sliders. Not scoped to .ved: the same popup
   opens in the image editor and the animation tools. Width and list height give way on a phone or a short window --
   the popup sits inside a bubble with 10px padding and must clear the screen edges, and the list gives up height
   (the rest of the popup is ~360px) before the controls under it do. A popup that still does not fit is capped and
   scrolls inside itself (bubbledialog.js positionBubble); a page scroll closes popups, so it must never need one. */
.fd { display: block; width: 364px; max-width: calc(100vw - 48px); text-align: left; white-space: normal; font: 14px/1.4 'Open Sans', sans-serif; }
.fd .fd-searchwrap { position: relative; }
.fd .fd-searchwrap i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #8a979b; pointer-events: none; }
.fd .fd-search { height: 36px; line-height: 34px; padding: 0 10px 0 32px; border: 1px solid #d5e2e6; border-radius: 8px; background: #fff; font-size: 14px; color: #2f3437; }
.fd .fd-search:focus { border-color: #4abdac; box-shadow: 0 0 0 3px rgba(74,189,172,.2); }
.fd .fd-cats { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.fd .fd-cat { height: 26px; padding: 0 8px; border-radius: 999px; border: 1px solid #d5e2e6; background: #fff; color: #2f3437; cursor: pointer;
              font: 600 12px/24px Poppins, sans-serif; transition: border-color .15s, background-color .15s; }
.fd .fd-cat:hover { border-color: #1a6b7a; }
.fd .fd-cat.fd-on { background: #1a6b7a; border-color: #1a6b7a; color: #fff; }
.fd .fd-list { height: 300px; max-height: max(120px, min(38vh, calc(100vh - 380px))); border: 1px solid #e3edf0; border-radius: 10px; padding: 2px 4px 6px; }
.fd .fontbanner { background: transparent; text-align: left; cursor: default; padding: 10px 8px 4px; font: 600 11px/1.2 Poppins, sans-serif; letter-spacing: .06em;
                  text-transform: uppercase; color: #7b888c; }
.fd .fontbutton { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: #fff; }
.fd .fontbutton:hover, .fd .fontbutton.fd-kb { background: #eef7f8; }
.fd .fontbutton.fd-kb { border-color: #9fc9d1; }
.fd .fontbutton.selectedfontbutton { background: #e3f1f3; border-color: #1a6b7a; }
.fd .fontimg { height: 25px; max-width: 72%; object-fit: contain; object-position: left center; }
.fd .fd-rowcat { font-size: 11.5px; color: #8a979b; }
.fd .fd-nomatch { padding: 24px 10px; text-align: center; color: #5a6468; }
.fd .fd-loaderror { margin: 0 10px 8px; padding: 8px 10px; border-radius: 8px; background: #fdecea; color: #a52a1e; font-size: 13px; line-height: 18px; } /* a picked font that did not load (fontdialog.js) */
.mo-tool .fs-loaderror { margin-top: 14px; padding: 8px 10px; border-radius: 8px; background: #fdecea; color: #a52a1e; font-size: 13px; line-height: 18px; } /* Swap fonts (fontswapper.js) */
.fd .fd-part { margin: 12px 0 0; }
.fd .fd-slider.fd-part { margin: 6px 0 0; }
.fd .banner { font: 600 11px/1.2 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #5a6468; }
.fd .fd-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fd .fd-style { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #d5e2e6; background: #fff; color: #2f3437; cursor: pointer; font-size: 13px; }
.fd .fd-style:hover { border-color: #1a6b7a; background: #eef7f8; }
.fd .fd-style.selecteditem, .fd .fd-style.selecteditem:hover { background: #1a6b7a; border-color: #1a6b7a; color: #fff; }
/* Letter spacing and line height rows: label, then the NumberInput (typed value + inline slider). */
.fd .fd-sliders { margin-top: 12px; }
.fd .fd-slider { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; }
.fd .fd-sliderhead { flex: 0 0 104px; }
.fd .fd-slider .ni-inline { width: auto; justify-content: flex-start; }
@media (max-width: 480px) { .fd .fd-list { height: 240px; max-height: 34vh; } }
/* ── end font popup */




/* ── Video player controls (playercontrols.js, class .mvpc) ─────────────────────
   The editor's Project Preview player, restyled 2026-09-18 to match the AI page's inline preview: always on
   screen over the video -- round play/pause and a time pill bottom-left, a labelled sound pill bottom-right,
   and a thin progress bar inset from the corners. Under 480px of player width (.mvpc-compact) the buttons
   shrink to round icons and the time pill hides. Sizes are set here because the preview dialog sets
   font-size: 0 on its container. */
.mvpc-area { top: 0; left: 0; right: 0; pointer-events: none; }
.mvpc { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; font-family: 'Open Sans', sans-serif;
        font-size: 13.5px; line-height: 1; text-align: left; }
.mvpc > * { pointer-events: auto; }
.mvpc-btn { position: absolute; bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px;
            padding: 0 14px; margin: 0; border: none; border-radius: 18px; background: rgba(14,59,69,.78); color: #fff;
            font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; cursor: pointer; -webkit-appearance: none; }
.mvpc-btn:hover { background: rgba(14,59,69,.92); }
.mvpc-btn i { font-size: 15px; width: 16px; text-align: center; }
.mvpc-play { left: 12px; width: 36px; padding: 0; }
.mvpc-sound { right: 12px; }
.mvpc-time { position: absolute; left: 56px; bottom: 28px; padding: 4px 9px; border-radius: 12px; background: rgba(14,59,69,.78);
             color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.mvpc-bar { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 16px; cursor: pointer; touch-action: none; }
.mvpc-bar::before, .mvpc-fill { content: ""; position: absolute; left: 0; bottom: 4px; height: 4px; border-radius: 2px; transition: height .12s; }
.mvpc-bar::before { right: 0; background: rgba(255,255,255,.35); }
.mvpc-fill { width: 0; background: #FC4A1A; }
.mvpc-bar:hover::before, .mvpc-bar:hover .mvpc-fill, .mvpc-drag .mvpc-bar::before, .mvpc-drag .mvpc-fill { height: 7px; }
.mvpc-bar:focus { outline: none; }
.mvpc-bar:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: -2px; }
.mvpc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mvpc-compact .mvpc-time { display: none; }
.mvpc-compact .mvpc-btn { bottom: 18px; height: 32px; width: 32px; padding: 0; }
.mvpc-compact .mvpc-play { left: 8px; }
.mvpc-compact .mvpc-sound { right: 8px; }
.mvpc-compact .mvpc-sound span { display: none; }
.mvpc-compact .mvpc-bar { left: 10px; right: 10px; bottom: 2px; }

.captioninput{
	font-size: inherit;
	font-family: Open Sans, Noto Color Emoji; 
	border: 1px solid #E3E3E3; 
	padding: 5px; 
	color: #444; 
	background: white;
	width: 100%;
	border-radius: 5px;
	box-sizing: border-box;
}
.captioninput:hover:enabled {
	border: 1px solid #FC4A1A; 
}
.captioninput:focus {
	outline:0;
}

.sp-palette span[title="rgb(128, 128, 128)"]{
	border: 1px solid #FC4A1A;
}
.sp-container button {
	font-family: 'Open Sans', sans-serif !important; 
	background-color: #FC4A1A;
	border: 1px solid #FC4A1A;
	border-radius: 3px;
  	background-image: none;
  	color: white;
  	font-size: 14px;
  	line-height: 1;
  	padding: 5px 4px;
  	text-align: center;
  	vertical-align: middle;
  	text-shadow: none;
}
.sp-container button:hover {
	background-color: #FC4A1A;
    border: 1px solid #444;
    background-image: none;
    text-shadow: none;
}
.sp-container button:active {
}
.sp-cancel {
    font-size: 14px;
    color: #FC4A1A !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    text-decoration: underline;
}
.sp-replacer {
    background: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 5px;
    padding: 4px;
}
.sp-replacer:hover:enabled {
	border: 1px solid #FC4A1A; 
}
.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;
/*    background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2) 5px, transparent 5px, transparent 5px); */
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, 5px 5px;
    background-size: 10px 10px, 10px 10px;
}
.sp-clear-display {
/*	background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .2) 5px, transparent 5px, transparent 5px); */
	background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), #eeeeee;
    background-repeat: repeat, repeat;
    background-position: 0px 0px, 5px 5px;
    background-size: 10px 10px, 10px 10px;
}
.sp-clear.sp-clear-display {
    background-position: 0px 0px, 5px 5px;
}
.sp-preview{
	width: 18px;
	height: 18px;
	border: 1px solid silver;
}
.sp-dd{
	font-size: 18px;
}
.fontbutton{
	display: block;
	width: 100%;
	border-radius: 0px;
	text-align: left;
	margin: 0px;
	padding: 0px;
	border: 1px solid #fff;
	cursor: pointer;
	background: #fff;
	height: 27px;
	outline: 0;
}
.fontbutton:hover {
	background: #eee; 
}
.selectedfontbutton{
	border: 1px solid #FC4A1A;
}
.fontimg{
	height: 25px;
	cursor: pointer;
/*	display: block; */
}
.fontbanner{
	text-align: center;
	background: #F8F8F8;
	color: #888;
	width: 100%;
	padding: 0px;
	padding-top: 4px;
	padding-bottom: 5px;
	box-sizing: border-box;
	font-size: 11px;
	line-height: 11px;
	vertical-align: middle;
	font-weight: bold;
	margin-bottom: 0px;
	cursor: not-allowed;
}
.fontsearch{
	display: block;
	width: 100%;
	padding: 5px;
	margin: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	outline: 0px;
	border: none;
	border-bottom: 1px solid #e3e3e3;
	font-size: 14px;
	line-height: 30px;
	height: 30px;
	box-sizing: border-box;
	font-family: Open Sans, sans-serif;
	vertical-align: middle;
}
.fontsearchcontainer{
	display: block;
	background: #fff;
	text-align: left;
	white-space: normal;
	width: 100%;
	overflow-y: scroll;
	height: 180px;
/*	border-bottom: 1px solid #e3e3e3; */
	box-sizing: border-box;
	font-size: 14px;
}
.fontsearchcontainer::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.fontsearchcontainer::-webkit-scrollbar:vertical {
	height: 7px;
}

.fontsearchcontainer::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid gray; /* should match background, can't be transparent */
	background-color: gray;
}

.fontsearchcontainer::-webkit-scrollbar-track { 
	background-color: silver; 
	border-radius: 0px; 
}

.fontsearchcontainer::-webkit-scrollbar-corner { 
	background-color: silver; 
}

.selectbutton{
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	align-self: flex-start;
	flex-grow: 0;
	font-size: 14px; 
	background: #ffffff; 
	color: #444;
	padding: 4px; 
	border: 1px solid #E3E3E3; 
	height: 30px;
	line-height: 20px;
	border-radius: 5px;
	box-sizing: border-box;
	cursor: pointer;
	user-select: none;
	margin: 0px;
	position: relative;
	font-family: Open Sans, sans-serif;
	width: 100%;
}
.selectbutton:hover{
	border-color: #FC4A1A; 
}
.selectbutton:hover:enabled {
	border-color: #FC4A1A; 
}
.selectbutton:hover:disabled {
	border-color: #E3E3E3; 
}
.selectbutton:focus {
	outline:0;
}
.selectbutton:disabled {
	color: silver;
	background: #E3E3E3;
	cursor: default;
}
.selecttext{
/*	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	align-self: flex-start;
	flex-grow: 0;
	*/
	flex: 1 1 auto;
	padding: 0px;
	width: calc(100% - 14px);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	height: 20px;
	line-height: 20px;
	vertical-align: top;
	font-size: 14px;
	text-align: center;
	margin-right: 4px;
/*	line-height: normal; */
} 

.selectarrow{
	flex: 0 1 auto;
	display: inline-block;
	padding: 0px;
/*	height: 20px;
	line-height: 17px;
	padding-top: 3px; */
	width: 9px;
	vertical-align: top;
/*	line-height: normal; */
}

.rightmargin{
	margin-right: 5px;
}

.leftmargin{
	margin-left: 5px;
}

.effectrow{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	align-self: flex-start;
}

.effectindex{
	flex: 0 1 auto;
	width: 50px;
}

.effecttime{
	flex: 0 1 auto;
	width: 85px; 
}

.effect{
	flex: 1 1 auto;
	width: calc(100% - 145px);
}
.numberinputcont{
	display: inline-block;
	width: 50px;
	font-size: 14px; 
	text-align: center;
	background: #fff;
	padding: 4px 0px;
	border: 1px solid #E3E3E3;
	border-radius: 5px;
	vertical-align: middle;
	outline: 0;
	font-weight: normal;
	margin: 0px;
	height: 30px;
	box-sizing: border-box;
	position: relative;
/*	-webkit-appearance: none; */
}
.numberinputcont:hover:enabled {
	border: 1px solid #FC4A1A; 
}
.numberinput{
	width: 100%; 
	border: none;
	font-size: inherit;
	text-align: center;
	background: #fff;
	padding: 0px 0px;
	box-sizing: border-box;
	color: #444;
	height: 20px;
	line-height: 20px;
	vertical-align: top;
	-webkit-appearance: none;
}

.numberinput:focus {
	outline:0;
}
.part{
	text-align: left;
	margin-bottom: 10px;
}
.inlinepart{
	vertical-align: top;
	display: inline-block;
	white-space: nowrap;
	margin-right: 10px;
}
.paramlabel{
	display: inline-block;
	vertical-align: top;
	margin-right: 4px;
	font-weight: bold;
	color: #333;
}
.dialogcontent .paramlabel{
	display: none;
}
/* A bubble-button's own inner label (e.g. StrokeSelector's "Stroke:") is redundant when the button
   sits inside a popup whose columns already carry .banner labels (the object/item selector's
   OBJECT/FILL/STROKE headers). .dialogcontent .paramlabel used to hide it, but popups now portal to
   <body> (escaping .dialogcontent) so that rule stopped matching -- mirror it on .bubbledialog. Kept
   ABOVE .rowcontainer .paramlabel so rowcontainer layouts (shapepanel, getPart(null), no banner) still
   re-enable their sole label. Only hits labels INSIDE a popup, never a standalone trigger button. */
.bubbledialog .paramlabel{
	display: none;
}
.banner{
	font-size: 11px;
	line-height: normal;
	font-weight: bold;
	color: #333;
	user-select: none;
	text-transform: uppercase;
}
.rowcontainer{
	display: inline-flex;
	flex-direction: row;
	row-gap: 20px;
	column-gap: 5px;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
	width: 316px;
	text-align: left;
	font-family: Open Sans;
	font-size: 14px;
	margin-top: 0px;
}
.row{
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	align-content: flex-start;
  	justify-content: space-between;
  	width: 100%;
	text-align: left; 
	margin-bottom: 0px;
	column-gap: 5px;
}
.rowcontainer .paramlabel{
	display: inline-block;
}
.rowcontainer .part{
	margin-bottom: 0px;
}
.rowcontainer .inlinepart{
	margin-right: 0px;
}
.rowcontainer .inlinepart:last-child{
	margin-right: 0px;
}
.rowcontainer .banner{
	font-size: 14px;
	text-transform: capitalize;
}

.animui {
	width: auto;
	text-align: center;
	background: #fff;
	display: none;
	margin: 40px 0px;
	padding: 30px;
	box-shadow: 5px 5px 20px #555;
	border-radius: 10px;
}
.animui h1{
	margin: 0px;
	margin-bottom: 20px;
	line-height: 100%;
}

.animuicontrols {
	width: 320px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 20px 20px;
	padding: 20px;
	margin: 0px;
	margin-left: 20px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid silver;
	vertical-align: middle;
	text-align: left;
	font-size: 18px;
	max-height: 460px;       /* ~= the preview's 480px max (animationdialog.js), so the panel matches the preview height and a taller control list scrolls instead of growing the modal */
	overflow-y: auto;        /* dropdowns portal to <body> (see bubbledialog.js), so this scroll container never clips them */
	overflow-x: hidden;
/*	box-shadow: 2px 2px 5px #777; */
}

.animuicontrolsrow {
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 20px 20px;
	padding: 0px;
	margin: 0px;
	vertical-align: middle; 
	text-align: left;
	font-size: 18px;
}

.animuicontrols .part{
	margin-right: 0px; 
	margin-bottom: 0px;
}

.animuicontrols .banner{
/*	font-size: 14px; */
}

.animuicontrols .selectbutton{
/*	border: 1px solid transparent; */
}

.animuicontrols .actionbutton{
	font-size: 14px;
}
.animplayer{
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
}
.lightborder{
	background: #fff;
	border: 1px solid #E3E3E3;
	border-radius: 5px;
	-webkit-appearance: none;
}
.lightborder:hover:enabled {
	border: 1px solid #FC4A1A; 
}
.lightborder:focus {
	outline:0;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
.inputfile + label {
/*
	padding: 5px;
	height: 30px;
	margin: 0px;
    color: white;
    background-color: #444;
    border: 1px solid #E3E3E3;
    font-size: 14px;
    line-height: 18px !important;
    display: inline-block;
    width: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    vertical-align: bottom;
    border-radius: 5px;
    box-sizing: border-box;
    -webkit-appearance: none;
    user-select: none;
*/
}

.inputfile:focus + label,
.inputfile + label:hover {
/*    border: 1px solid #FC4A1A; */
}
.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}
.inputfile:focus + label {
/*	outline: 1px dotted #FC4A1A; */
/*	outline: -webkit-focus-ring-color auto 5px; */
outline: 0;
}
.inputfile:focus + label,
.inputfile.has-focus + label {
/*    outline: 1px dotted #000; */
/*    outline: -webkit-focus-ring-color auto 5px; */
outline: 0;
}

.slideoptions{
	position: absolute;
	z-index: 5000;
	font-family: 'Open Sans', sans-serif !important; 
	font-size: 18px;
	background: transparent;
	width: 121px;
	height: auto;
	overflow: none;
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
}

.slidelist{
	background: white;
	width: 100%;
	height: auto;
	overflow: none;
	padding: 0px;
	border: 3px solid #FC4A1A; 
	border-radius: 3px;
	box-sizing: border-box;
	display: inline-block;
}
.slidelist:after {
    content:'';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-top: solid 10px #FC4A1A;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
}

.slideitem{
	padding: 10px;
	width: 100%;
	color: #444;
	line-height: 150%;
	cursor: pointer;
	box-sizing: border-box;
}

.slideitem:hover{
	background: #eeeeee;
}

.croplist{
	float: left; 
	display: inline-block; 
	border: 1px solid silver; 
	height: 385px; 
	width: 210px; 
	font-size: 24px; 
	font-family: 'Open Sans'; 
	text-align: center; 
	color: #FC4A1A;
	overflow-y: scroll;
	margin: 0 auto;
}

.croplist::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.croplist::-webkit-scrollbar:vertical {
	height: 11px;
}

.croplist::-webkit-scrollbar-thumb {
	border-radius: 0px;
	border: 1px solid white; /* should match background, can't be transparent */
	background-color: gray;
}

.croplist::-webkit-scrollbar-track { 
	background-color: silver; 
	border-radius: 0px; 
}

.croplist::-webkit-scrollbar-corner { 
	background-color: silver; 
}
@media only screen and (max-width: 1400px) {
/*
.tempcard{
	width: calc(33.33% - 20px);
}
*/
}
@media only screen and (max-width: 1150px) {
.splashtitle{
	font-size: 50px; 
}
h1{
	font-size: 40px;
}
h2{
	font-size: 32px;
}
h3{
	font-size: 24px;
}
.splashbyline{
	font-size: 22px; 
}
.splashbutton{
	font-size: 22px;
}
}
@media only screen and (max-width: 1088px) {
.templeft{
	max-width: 100%;
	width: 100%;
	padding: 0px;
	padding-bottom: 30px;
	min-width: 352px;
}
.tempright{
	max-width: 770px;
	width: 100%;
	padding: 0px;
	padding-bottom: 30px;
	min-width: 352px;
}
.templateheader{
	padding: 50px 20px;
}
.templatefullcont{
	padding: 50px 10px;
}
.splashlearnmore{
	padding: 0px 20px;
}
.paddedlearnmore{
	padding: 0px 20px;
}
.infobox{
	flex: 100%;
}
}
@media only screen and (max-width: 960px) {
.splashtitle{
	font-size: 38px; 
}
h1{
	font-size: 38px;
}
h2{
	font-size: 30px;
}
h3{
	font-size: 22px;
}
.splashbyline{
	font-size: 20px; 
}
.splashbutton{
	font-size: 20px;
}
.splashbuttonrow{
	margin-bottom: 20px;
}
.splashsection{
	margin-top: 80px;
}
.splashtblleft{
	float: none;
	max-width: 100%; 
	height: auto; 
	width: 100%; 
	padding: 0px; 
	padding-right: 0px;
	padding-bottom: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
.splashtblright{
	float: none;
	height: auto;
	max-width: 100%;  
	width: 100%; 
	padding: 0px; 
	padding-right: 0px;
	padding-bottom: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
.splashimgright{
	display: block;
	width: 100%;
/*	max-width: 100%; */
	text-align: left;
	height: auto;
	float: none;
	padding-left: 0px;
	margin: 0 auto;
}
.splashimgleft{
	display: block;
	width: 100%;
/*	max-width: 100%; */
	text-align: left;
	height: auto;
	float: none;
	padding-right: 0px;
	margin: 0 auto;
}
/*
.tempcard{
	width: calc(50% - 20px); 
}
*/
}
@media only screen and (max-width: 930px) {
.blogimgcont{
	width: calc(40% - 10px);
}
.bloginfo{
	width: 60%;
}
}
@media only screen and (max-width: 800px) {
.headerlinksicon {
    display: inline-block;
    margin-left: 20px;
    font-size: 30px;
}
.headerlinks a{
    display: inline-block;
    width: 100%;
    margin: 0px;
    padding: 10px;
    vertical-align: middle;
    background: white;
    color: #444;
    box-sizing: border-box;
    white-space: nowrap;
    text-transform: uppercase;
}
.headerlinks a:hover {
	color: white !important;
	background: #444 !important;
}
.headerlinks a:active {
	color: white !important;
	background: #444 !important;
}
.headerlinks-content {
    display: none;
    position: absolute;
    right: -10px;
	left: auto;
	width: 250px;
    top: 50px;
    padding: 10px;
    background: white;
    color: #444;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0.5,0.5);
    z-index: 99;
    font-size: 14px; 
    max-width: calc(100vw - 20px);
    overflow: hidden;
    text-align: left; 
    line-height: normal;  
    white-space: normal;
    border-radius: 5px;
} 
.headerlinks:hover .headerlinks-content {
	display: inline-block;
}
.splashlearnmore{
	padding: 0px 10px;
}
.paddedlearnmore{
	padding: 0px 10px;
}
}
@media only screen and (max-width: 745px) {
.templateheaderrighthalf{
	padding-left: 120px;
	box-sizing: border-box;
	height: auto;
	margin-top: 10px;
	padding-top: 0px;
	text-align: left;
}
}
@media only screen and (max-width: 700px) {
.bloglist{
	text-align: center;
}
.blog{
	display: inline-block;
	width: 350px;
	max-width: 100%;
	margin: 10px 0px;
	padding: 20px;
	text-align: center;
}
/* Same shape as the .footerlists bug: a hard px width with nothing to cap it. .blog is
   border-box 350px/max-width:100%, so at 320px its content box is 260px -- but these two
   stayed 310px and pushed 20px of every blog card past the right edge, widening the page.
   max-width:100% costs nothing above 350px, where 310px is already the smaller value. */
.blogimgcont{
	width: 310px;
	max-width: 100%;
	padding-right: 0px;
}
.bloginfo{
	margin-top: 10px;
	width: 310px;
	max-width: 100%;
}
.bloginfo h3{
	font-size: 18px;
	margin-top: 0px;
}
.blogtitle{
	font-size: 18px;
}
.blogdesc{
	font-size: 14px;
}
}
@media only screen and (max-width: 550px) {
/*
.tempcard{
	margin-right: 10px;
	margin-left: 10px;
}
*/
}
@media only screen and (max-device-width: 820px) {
body {
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	-webkit-text-size-adjust: 100%;
}
.page {
	width: 100%;
	max-width: 100%;
	margin:0 auto;
	padding: 0px;
	text-align: center;
	position: relative;
/*  		min-height: 100%;*/
}
.content {
	margin: 0px;
	min-width: 0px;
	width: 100%;
	padding: 5px; 
	background: white; 
	border-radius: 0px;
    border: 2px solid #FC4A1A; 
    box-shadow: none;
    box-sizing: border-box;
}
.greentored{
	padding: 10px;
	margin: 10px 0px;
}
.infobox{
	margin: 5px;
}
.splash{
/*	height: calc(100vh - 150px);*/
/*	min-height: 350px; */
}
.bigsplash{
	height: auto;
	min-height: none;
}
.splashlearnmore{ 
	padding: 10px; 
}
.paddedlearnmore{
	padding: 10px; 
}
.splashlearnmoretitle{
	font-size: 20px; 
}
.splashlearnmorebyline{
	font-size: 20px;
}
.templatevideocont{
	padding: 0px 5px;
}
.gradientbanner{
	padding: 10px;
	font-size: 18px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.splashtitle{
	font-size: 38px; 
}
.splashsection{ 
	margin-top: 50px; 
}
.bigsplashsection{ 
	padding: 40px 10px; 
}
h1{
	font-size: 32px; 
}
h2{
	font-size: 28px;
}
h3{
	font-size: 24px;
}
.splashbyline{
	font-size: 20px; 
}
.splashbutton{
	font-size: 20px;
}
.splashimgright{
	width: 100%;
/*	max-width: 100%; */
	height: auto;
	line-height: normal;
	float: none;
	padding-left: 0px;
	margin: 0 auto;
}
.bigsplashimgright{
	width: 100%;
	max-width: 100%;
	height: auto;
	line-height: normal;
	float: none;
	padding-left: 0px;
	margin: 0 auto;
}
.splashimgleft{
	width: 100%;
/*	max-width: 100%; */
	height: auto;
	line-height: normal;
	float: none;
	padding-right: 0px;
	margin: 0 auto;
}
.splashtblleft{
	float: none;
	line-height: normal;
/*	max-width: 100%; */
	height: auto; 
	width: 100%; 
	padding: 0px; 
	padding-right: 0px;
	padding-bottom: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
.bigsplashtblleft{
	float: none;
	line-height: normal;
/*	max-width: 100%; */
	height: auto; 
	width: 100%; 
	padding: 0px; 
	padding-right: 0px;
	padding-bottom: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
.splashtblright{
	float: none; 
	line-height: normal;
/*	max-width: 100%; */
	height: auto; 
	width: 100%; 
	padding: 0px; 
	padding-left: 0px;
	padding-bottom: 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
.splashtexttitle{
	font-size: 28px; 
}
.splashtbltext h1{
	font-size: 18px; 
	font-weight: bold;
	margin: 10px 0px;
	font-family: 'Open Sans';
	text-transform: uppercase;
	color: #444;
	line-height: 28px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.splashtbltext h1::first-line{
	font-size: 28px; 
	font-family: 'Poppins';
	line-height: 28px;
}
.splashtbltext h2{
	margin-bottom: 10px;
}
.tab{
font-size: 14px;
margin-right: 0px;
}
.searchterm {
	width: 90px;
}
.inputfile + label {
	font-size: 14px;
	padding: 5px 5px;
}
.dialog{
	max-width: calc(100% - 10px);
}
.dialogcontent{
	background: transparent; /* was #f2f2f2, the old gray card; dialogs are white on every page now */
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-top: 10px;
}
.dialogresizecontent{
	max-height: 75vh;  /*This may be a safer option as window size is not fixed on mobile*/
	overflow-y: auto;
}
.dialogresizeheight{
	height: 75vh;   /*This may be a safer option as window size is not fixed on mobile*/
}
.dialogscrollcontainer {
	padding: 10px 10px;
}
.progresslabel {
	max-width: 100%;
	padding: 2px;
	font-size: 20px;
	text-align: center;
	font-family: 'Open Sans';
	white-space: nowrap;
	user-select: none;
}
.progressbar {
	max-width: 100%;
	height: 20px;
}
.displayslim{
	position: relative;
	display: inline-block; 
	margin-top: 20px; 
	margin-bottom: 20px;
/*	border: 1px solid silver; */
/*	box-shadow: 0px 0px 5px silver; */
	width: auto; 
	height: auto;
}
.bigcard {
	width: calc(100% - 40px);
	max-width: 352px;
	margin: 20px;
	box-sizing: border-box; 
}
.card {
	width: calc(100% - 10px);
	margin: 5px;
}
.searchresults::-webkit-scrollbar:vertical {
	width: 0px;
}
.helpcontent {
	font-size: 14px; 
	max-height: calc(75vh - 120px);
}
.helpcrumbs{
	font-size: 14px;
}
.helptext{
	padding: 10px 10px;
	margin: 10px 0px;
}
.project{
	display: inline-block; 
	padding: 20px 10px; 
	border: 0; 
	width: 100%; 
	max-width: 372px; 
	box-sizing: border-box;
}
/*
.tempcard{
	margin-left: 0px;
	margin-right: 0px;
	box-sizing: border-box; 
}
*/
.templatesearch{
	font-size: 16px;
	line-height: 22px;
	height: 22px;
}
.rowcontainer{
	row-gap: 10px;
}
.animui {
	margin: 5px;
	padding: 5px;
	box-shadow: none;
	border-radius: none;
}
.animui h1{
	font-size: 24px;
	margin: 0px 0px;
	margin-bottom: 10px;
}
.animuicontent {
	/* !important: animationdialog.js sets an inline display:inline-block on this element, which would otherwise beat these rules. */
	display: flex !important;
	flex-direction: column-reverse !important;  /* controls (2nd child in DOM) sit ABOVE the preview on mobile, so a control's popup opens DOWNWARD into the canvas area with room, instead of flipping up over the other controls / into the keyboard */
	align-items: center !important;
}
.animuicontrols {
	/* On a phone the container is viewport-constrained (~343px on a 375px screen). The desktop 320px + 40px padding is a
	   360px+ CONTENT-box that overflows that container and runs edge-to-edge. Fit it: fill the container with the padding
	   INSIDE the width (border-box), capped so it doesn't stretch huge on a tablet. */
	width: 100%;
	max-width: 360px;
	box-sizing: border-box;
	margin: 0px;
	margin-left: 0px;
	margin-top: 10px;
	padding: 20px;
	gap: 10px 20px;
	box-shadow: none;
	max-height: 40vh;        /* tighter than desktop: stacked layout subtracts controlsHeight from the preview, so keep the panel short and let it scroll (animationdialog.js:63) */
}
.animplayer{
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
}
}
/* ── Create dropdown — desktop ────────────────────────────────────────────── */
.create-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
/* Explicitly show the trigger link on desktop */
.create-dropdown > a:first-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.create-dropdown > a::after {
    content: '';
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .8;
}
.create-menu {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    min-width: 250px;
    z-index: 9999;
    padding-top: 10px; /* transparent hover bridge — keeps mouse connected */
}
.create-menu-inner {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    padding: 8px;
}
.create-menu-inner::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}
.create-menu-inner {
    position: relative;
}
.create-dropdown:hover .create-menu,
.create-dropdown:focus-within .create-menu {
    display: block;
}
.create-menu a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100% !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    border-radius: 6px;
    font-size: 14px !important;
    color: #333 !important;
    background: transparent !important;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    text-transform: none !important;
    line-height: normal !important;
    transition: background .15s;
}
.create-menu a + a {
    margin-top: 2px !important;
}
.create-menu a:hover {
    background: #f0fafc !important;
    color: #1a6b7a !important;
}
.create-menu .menu-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.create-menu .menu-text {
    flex: 1;
    min-width: 0;
}
.create-menu .menu-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
}
.create-menu .menu-text span {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
}
.create-menu .menu-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    color: #fff;
    letter-spacing: .3px;
}

/* ── Create dropdown — mobile (≤800px matches existing nav breakpoint) ─────── */
@media only screen and (max-width: 800px) {
    /* Hide the Create trigger entirely on mobile */
    .create-dropdown > a:first-child { display: none !important; }
    .create-dropdown > a::after { display: none; }

    /* Wrapper: full width, static, no overflow */
    .create-dropdown {
        display: block !important;
        position: static !important;
        width: 100% !important;
    }

    /* Menu panel: static, no box, no transform, no min-width */
    .create-menu {
        display: block !important;
        position: static !important;
        -webkit-transform: none !important;
        transform: none !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .create-menu::before { display: none !important; }

    /* Each link: plain block, matches existing .headerlinks a on mobile exactly */
    .create-menu a {
        display: block !important;
        -webkit-box-sizing: border-box !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 0 !important;
        background: white !important;
        color: #444 !important;
        font-size: 14px !important;
        font-weight: normal !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* Kill the flex layout from desktop */
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .create-menu a + a { margin-top: 0 !important; }
    .create-menu a:hover,
    .create-menu a:active {
        color: white !important;
        background: #444 !important;
    }
    .create-menu .menu-text strong { display: inline; font-size: 14px; font-weight: normal; }
    .create-menu .menu-text span   { display: none; }
    .create-menu .menu-icon        { display: inline; margin-right: 6px; }
    .create-menu .menu-badge       { display: inline-block; margin-left: 6px; vertical-align: middle; font-size: 9px; padding: 1px 5px; }
}
/* Below 720px a 300px footer column inside 50px of padding needs 400px, which is wider
   than a phone -- that was the sideways scroll on every page. Desktop is untouched. */
@media only screen and (max-width: 720px){
	.footerlists{padding:40px 20px;gap:30px;}
	.footerlistcontainer{max-width:100%;}
}

/* The card title. mov.css sets 14px with 28px leading, which is nearly double-spaced and
   made every card taller than its content once the listing went to two cards per row on a
   phone. Lives here rather than being overridden on templates.php and template.php
   separately -- .tempcard is one component and both pages render it. */
@media only screen and (max-width: 820px){
	/* 18px, not 20. Desktop is 14px on 20px leading (1.43); 12px on 20px here was 1.67, looser
	   than the larger type above it, which is backwards. This block was written while desktop
	   was still 28px and 20 looked tight by comparison. Two lines now measure 36px. */
	.tempcard .tempcardtitle{font-size:12px;line-height:18px;}
	.tempcard .tempcardtitle::first-line{font-size:14px;line-height:18px;}
}


/* ===========================================================================
   Template listing and browse facets -- /templates/ and /templates/<facet>/
   ---------------------------------------------------------------------------
   Moved here from the <style> block templates.php used to build inline. That
   shipped ~5.7KB on all 28 listing and facet pages, uncached, re-sent on every
   request; here it is fetched once with the rest of the stylesheet. Nothing in
   it was ever dynamic -- no PHP variable was ever interpolated -- so the move
   is verbatim, and none of these 59 selectors is defined anywhere else in this
   file, so nothing changes hands in the cascade by arriving later.
   =========================================================================== */
/* One control, not two. The input and button were separate boxes with a gap -- a pale
   outlined field next to a loud orange pill, reading as unrelated. Joined into a single
   bordered pill they read as one search affordance, and the button stops competing with
   the field for attention.
   The form sits on its own row rather than floating beside the intro. Floated, it left a
   dead gap to the right of the paragraph and put three elements on three different
   alignments; stacked, the band reads text -> controls -> grid down one left edge.
   Browse and search as two columns with a rule between them. The form used to float
   right and the chips simply wrapped underneath it, so the hairline divided the first
   chip row from the search and nothing else -- below that the two zones interleaved.
   align-self:stretch runs the border the full height of whatever the chips occupy. */
	.tbrowse{display:flex;align-items:flex-start;margin:0 auto 28px;max-width:1666px;}
	.tchips{flex:1 1 auto;min-width:0;}
	.tsearchcol{flex:0 0 auto;align-self:stretch;margin-left:30px;padding-left:30px;border-left:1px solid #dcdcdc;}
	@media only screen and (max-width:820px){.tbrowse{display:block;}.tsearchcol{margin:0;padding:0;border-left:0;}}
	.tsearchform{display:inline-flex;align-items:stretch;height:38px;border:1px solid #E3E3E3;border-radius:19px;overflow:hidden;background:#fff;margin:0 0 12px 18px;}
/* focus-within puts the orange on the whole control, matching the border-colour cue
   .selectbutton and friends already use across the app. */
	.tsearchform:focus-within{border-color:#FC4A1A;}
	.tsearchinput{border:0;outline:0;background:transparent;height:100%;width:200px;padding:0 8px 0 16px;font-family:Open Sans,sans-serif;font-size:15px;color:#444;box-sizing:border-box;}
/* The WebKit clear button is kept, not suppressed -- it is wired in templates.js to
   navigate back to the unfiltered listing. Only the decoration is dropped, and it is
   given room so it does not sit flush against the Search button. */
	.tsearchinput::-webkit-search-decoration{-webkit-appearance:none;}
	.tsearchinput::-webkit-search-cancel-button{cursor:pointer;margin-right:2px;}
	.tsearchbtn{border:0;border-radius:0;height:100%;padding:0 20px;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:.02em;background:#FC4A1A;color:#fff;cursor:pointer;font-family:Open Sans,sans-serif;}
	.tsearchbtn:hover{background:#e33d0f;}
	.tsearchbtn i{margin-right:7px;}
/* Aspect sizes, under the search box. Deliberately the same pill the template page uses for
   its own Wide / Square / Vertical row -- #efebe4 ground, #333 when active -- so the control
   reads as the same idea in both places rather than a new one. A step smaller (13px against
   14px) because there it is a primary choice and here it is a view preference.
   Centred under the search rather than left-aligned to it. .tsearchcol shrink-wraps to its
   widest child, and .tsizes carries the same 18px left margin as the form, so the two end up
   with identical content boxes -- justify-content:center therefore centres the pills across
   exactly the form's width, not the page's. That equality is what makes this work; keep the
   two margins in step if either changes. */
/* Export Options dialog, shared by the blob maker and the wavy design maker.
   It used to be four identically-styled orange buttons stacked in a 230px box, where the one
   action that led into the product looked exactly like a file format. The handoffs now live on
   each tool's toolbar, so this dialog does one job -- take a file away -- and can look like it.
   The label is the site's .banner turned down: at 14px bold #333 it competed with the buttons
   under it, when its job is to caption them. */
	.mexpdlg{text-align:left;min-width:252px;}
	.mexpsect{margin:0 0 22px;}
	.mexpsect:last-child{margin-bottom:0;}
	.mexplabel{font-size:11px;letter-spacing:.09em;color:#8a837c;margin:0 0 9px;}
/* gap rather than a margin hung off each button: the last one in a row used to need a different
   inline style from its siblings, which is how "padding: 5px; margin-right: 5px" and
   "padding: 5px" ended up side by side doing almost the same thing. */
	.mexpbtns{display:flex;flex-wrap:wrap;gap:8px;}
	.mexpbtns .actionbutton{padding:6px 0;font-size:13px;letter-spacing:.04em;min-width:66px;
		text-align:center;}
	.mexpbtns .actionbutton:hover{background:#e33d0f;border-color:#e33d0f;}

/* Jump link to the questions at the foot of the page. Same treatment as .ntjump on the template
   page -- muted, underlined on a hairline, orange on hover -- because it is the same affordance
   in the same role, and two different-looking "skip down to the detail" links across two pages
   would read as two different things. */
/* Same treatment as .tjump and .ntjump -- the third member of the same family, so the way down
   and the way back read as one idea. Centred because it closes the block rather than labelling
   it, and centring is what says "this is the end" without a rule across the page. */
	.tbacktotop{margin:30px 0 0;text-align:center;font-size:12.5px;line-height:1.4;}
	.tbacktotop a{color:#8a837c;text-decoration:none;border-bottom:1px solid #e0dbd4;padding-bottom:1px;}
	.tbacktotop a:hover{color:#FC4A1A;border-bottom-color:#FC4A1A;}
	.tjump{margin:12px 0 0;font-size:12.5px;line-height:1.4;}
	.tjump a{color:#8a837c;text-decoration:none;border-bottom:1px solid #e0dbd4;padding-bottom:1px;}
	.tjump a:hover{color:#FC4A1A;border-bottom-color:#FC4A1A;}
	.tsizes{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0 12px 18px;}
	.tsize{font-size:13px;font-weight:600;line-height:1.35;padding:5px 12px;border-radius:100px;
		background:#efebe4;color:#4a4540;text-decoration:none;transition:background .12s,color .12s;}
	.tsize:hover{background:#e6e1db;color:#231f1c;}
	.tsize.on,.tsize.on:hover{background:#333;color:#fff;cursor:default;}
/* On a phone the control should own the row rather than hugging the right edge. */
/* Between the .tbrowse stack (820px) and the full-width form (700px) the column stops being a
   shrink-wrapped flex item and runs the full page width, while the form keeps its intrinsic
   width -- that breaks the equality above and would pull the pills to the middle of the PAGE
   rather than under the search. Restore the shrink-wrap on the column instead of special-casing
   the pills: the column hugs the form again, .tsizes fills it, and the same centring applies at
   every width. */
	@media only screen and (min-width:701px) and (max-width:820px){.tsearchcol{width:max-content;}}
	@media only screen and (max-width:700px){.tsearchform{display:flex;width:100%;margin:0 0 14px;}.tsearchinput{width:auto;flex:1 1 auto;}
		/* The form loses its 18px indent here, so the size row loses it too or the two stop
		   sharing a left edge. */
		.tsizes{margin-left:0;}}
/* Browse chips. These replace the Recommendations menu, whose items looked like filters
   and only ever revealed a paragraph -- four of them named templates.type values exactly.
   .templateheader is font-size:0 -- it previously held nothing but floated controls --
   so anything textual placed in it has to restate its size.
   A centred content column, with everything left-aligned inside it. The page is
   full-bleed, so on a wide monitor the intro/search/chips started at the band padding
   while the card grid centred itself -- two different left edges. 1760px is chosen to
   still fit four 394px cards plus their 30px gaps inside the 40px band padding. */
	.templatefullcont.tband,.templateheader.tband{max-width:1760px;margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;}
/* Text and showcase side by side, the shape template.php uses for its summary block.
   The two columns are both capped -- text at 70ch, media at 520px -- so on a wide band
   they came to about 1160px inside 1660px and sat hard left with the slack trailing off
   the right edge. Centring the pair balances the panel without stretching either column.
   One content width, shared and centred. The panel is capped by its own contents -- a
   70ch text column beside a 520px collage -- so left-aligned it filled about 1240px of a
   1680px band while the browse row and the grid filled the whole thing, which read as the
   middle bulging. Stating the width once and centring both stops them disagreeing.
   Two widths, both centred. The panel stays at its natural size -- a readable text
   measure beside the collage -- while the browse row and the grid take the wider column
   so the cards keep four per row. The two lower blocks share one value so they cannot
   drift out of line with each other, which is what produced the bulge. */
	.tlead{display:flex;gap:42px;align-items:center;margin:0 auto 52px;max-width:1242px;}
/* With two columns, centring balances them and the text stays left. With one -- a search,
   or leadmedia=none -- a 70ch block pinned left leaves most of the band empty beside it,
   so the panel becomes a centred hero and its text centres with it. */
	.tleadsolo{justify-content:center;text-align:center;}
	.tleadsolo .tleadtext{max-width:62ch;}
	.tleadsolo .tintro{text-align:center;}
/* ?leadmedia=strip, the default: the AI pages' filmstrip in the column the collage used. The
   carousel is built as a full-bleed band, so in here it gives up the bleed, gets a shorter scene
   height (a 430px wide clip is 764px across, wider than the whole column) and narrower edge
   fades, and rounds its corners into a panel. The column is wider than the collage's 38% because
   a filmstrip needs room to show more than one clip. */
	.tleadmedia.tleadstripcol{flex:0 0 50%;max-width:660px;min-width:0;}
	.tleadstripcol .vg-carousel{--sceneh:270px;margin:0;max-width:100%;border-radius:10px;}
	.tleadstripcol .vg-carousel.vg-more-left{--fadeL:56px;}
	.tleadstripcol .vg-carousel.vg-more-right{--fadeR:56px;}
	@media only screen and (max-width:960px){.tleadmedia.tleadstripcol{max-width:none;}}
/* The phone dots sit at the very bottom of the carousel, which is fine on the AI pages' open
   gradient but flush against this panel's dark edge. */
	.tleadstripcol .vg-dots{margin-bottom:16px;}
/* Under the dark panel, on the white page, in the same muted family as .tjump. The panel has no
   bottom margin here, so nothing to pull up into. */
	.tleadstripcol .vg-more{margin:8px 2px 0 auto;color:#a8a29b;}
	.tleadstripcol .vg-more:hover,.tleadstripcol .vg-more:focus-visible{color:#FC4A1A;}
	.temptyresults{flex:1 1 100%;text-align:center;padding:70px 20px 90px;color:#8a837c;font-size:16px;line-height:1.6;}
	.temptyresults i{display:block;font-size:34px;color:#dcd7d0;margin-bottom:18px;}
	.temptysug{margin-top:14px;font-size:14px;}
	.temptysug a{color:#FC4A1A;margin:0 8px;white-space:nowrap;}
/* The search page h1. Small because it is a status line, not a banner -- but it is still
   the document heading, so the page is not left without one.
   The card grid. .tempcard is a hard 394px with every responsive rule in mov.css
   commented out, so a phone got one card per row over 417 rows -- 164 screens, unchanged
   from the old page even after desktop went from two per row to four. Two per row halves
   it. Sized by percentage rather than a fixed width so the pair always fills the row. */
	@media only screen and (max-width:820px){
		#alltemplatescontent .tempcard{width:calc(50% - 8px);max-width:none;padding:10px;}
		#alltemplatescontent{gap:16px;}
/* The 12px/20px card title that used to be overridden here now lives in mov.css, beside
   the .tempcard rule it corrects, so template.php gets it too without a second copy. */
	}
/* Still two per row -- this only tightens the padding and the gap. An earlier comment here
   claimed one card per row, which the rule has never done: calc(50% - 6px) is two, measured
   at 174px each on a 400px screen. Kept at two because a 16:9 still is legible at that size
   and one-per-row would put a 417-card listing on a very long scroll.
   The width no longer carries !important. It never needed it: #alltemplatescontent .tempcard
   is (1,1,0) and beats the bare .tempcard (0,1,0) on specificity wherever it sits. The
   original reason was source order against movidmo.css, which stopped applying when this
   block moved into the stylesheet itself. */
	@media only screen and (max-width:420px){
		#alltemplatescontent .tempcard{width:calc(50% - 6px);padding:8px;}
		#alltemplatescontent{gap:12px;}
	}
/* .templatefullcont is padding:50px 10px on mobile while .templateheader is 50px 20px, so
   the cards sat 10px left of everything above them. One value for both bands.
   .templatefullcont.tband is (0,2,0) and beats the bare .templatefullcont on specificity,
   so it holds wherever it sits in the sheet. That was written to survive being parsed
   BEFORE movidmo.css, back when this lived in a page <style>; it costs nothing now that
   the rules are in the stylesheet itself, and it keeps the rule independent of position. */
	@media only screen and (max-width:820px){.templatefullcont.tband,.templateheader.tband{padding-left:20px;padding-right:20px;}}
	#alltemplates{max-width:1666px;margin-left:auto;margin-right:auto;}
/* Centred, and the actions on their own line beneath. They used to sit inline inside the h1,
   which put navigation in the heading text and hung a small grey clause off the end of a bold
   20px line. On their own line the count reads as the answer to the search and the two links
   read as what to do next.
   white-space:nowrap goes with the move: it existed to stop the pair breaking away from the
   heading they trailed, and on their own line breaking is what should happen on a phone. */
/* Common questions, under the grid. The pill heading is template.php's .ntsect > h2 treatment
   -- 14px uppercase at .13em on #efebe4 -- because that is already what a labelled section
   looks like on this site, and a new one would just be a second dialect.
   Answers are capped near 70ch. The band is full width so it sits on the page's own rhythm,
   but running text across 1666px would be unreadable. */
/* The questions as a tinted card, matching the how-to panel on template.php: same #faf8f5, same
   8px radius, same inner padding. Scoped to .tfaqband so it does NOT reach template.php, whose
   how-to reuses .tfaq inside its own panel and would end up with a card inside a card.
   The 40px band padding puts the card's edges on the grid's own 40/1240 column -- aligning the
   EDGE is what makes a card look placed, the lesson from the template page.
   Two columns via column-count, which is right HERE and was wrong there: the how-to is a
   sequence and columns fill downwards, so 1,2 / 3,4 read as 1,3,2,4. Questions are a set with
   no order to break, and five of them balance across two columns on their own. */
	.tfaqband{padding-top:0;padding-left:40px;padding-right:40px;}
	.tfaqband .tfaq{max-width:1666px;margin:0 auto 48px;background:#faf8f5;border-radius:8px;
		padding:30px 36px;}
/* Grid, not column-count -- row-wise, matching the how-to on template.php. Columns fill
   DOWNWARDS (1-3 left, 4-5 right); a grid fills across each row, so the numbers read 1,2 / 3,4 /
   5 the way an English reader scans. Same reasoning that made the how-to a grid, and the same
   reason the numbers matter: in two columns the reader needs telling where to look next.
   Row spacing is the grid gap rather than item margins, so the final row needs no special case.
   Same marker as that panel -- 23px, white on #FC4A1A -- because it is the same device. */
	.tfaqband .tfaqlist{display:grid;grid-template-columns:1fr 1fr;gap:26px 54px;
		align-items:start;counter-reset:tfq;}
	.tfaqband .tfaqitem{counter-increment:tfq;position:relative;padding-left:38px;margin:0;}
	.tfaqband .tfaqitem:before{content:counter(tfq);position:absolute;left:0;top:0;
		font-size:11px;font-weight:700;color:#fff;background:#FC4A1A;
		width:23px;height:23px;border-radius:50%;display:flex;
		align-items:center;justify-content:center;}
	@media only screen and (max-width:900px){
		.tfaqband{padding-left:0;padding-right:0;}
		.tfaqband .tfaq{padding:26px 22px;}
		.tfaqband .tfaqlist{grid-template-columns:1fr;}
		.tfaqband .tfaqitem{padding-left:32px;}
		.tfaqband .tfaqitem:before{width:20px;height:20px;font-size:10px;}
	}

	.tfaq{max-width:760px;margin:0 auto;text-align:left;padding:8px 0 48px;}
	.tfaq > h2{display:inline-block;font-size:14px;letter-spacing:.13em;text-transform:uppercase;
		font-weight:700;color:#4a443e;background:#efebe4;border-radius:100px;padding:8px 16px;
		margin:0 0 28px;}
	.tfaqitem{margin:0 0 26px;}
	.tfaqitem:last-child{margin-bottom:0;}
	.tfaqitem h3{font-size:17px;line-height:1.35;font-weight:700;color:#333;margin:0 0 7px;}
	.tfaqitem p{font-size:15.5px;line-height:1.6;color:#5a544e;margin:0;max-width:70ch;}
	.tfaqitem a{color:#FC4A1A;}
	.tfaqitem b{color:#333;font-weight:600;}
	@media only screen and (max-width:820px){
		.tfaq{padding-bottom:32px;}
		.tfaqitem h3{font-size:16px;}
		.tfaqitem p{font-size:15px;}
	}
	.tresultline{font-size:20px;line-height:1.4;font-weight:bold;color:#333;margin:0 0 6px;text-align:center;}
	.tresultacts{display:block;font-size:14px;font-weight:normal;color:#8a837c;margin:0 0 22px;text-align:center;}
	.tresultacts a{color:#FC4A1A;}
	.temptyacts{margin-top:26px;}
	.temptyact{display:inline-block;text-decoration:none;font-size:14px;padding:9px 20px;border-radius:4px;margin:0 6px;}
	.temptyactalt{background:#fff;color:#FC4A1A;}
	.temptyactalt:hover{background:#fff5f2;}
/* The h1 and the Start-from-scratch CTA live here now. The hero band they came from was
   ~220px of viewport -- padding:50px around a 120px title block -- spent on a title and
   one button, above a page whose entire purpose is browsing 417 templates.
   font-size is not optional here. .templateheader is font-size:0, and a ch unit resolves
   against the element's own font size -- so max-width:70ch on a wrapper that inherits 0
   computes to 0px and collapses the column to nothing. It only worked while the cap sat
   on .tintro, which declares its own size on the same element. */
	.tleadtext{flex:1 1 auto;min-width:0;font-size:18px;max-width:70ch;}
	.tleadtitle{font-family:Poppins,Open Sans,sans-serif;font-size:38px;line-height:1.12;font-weight:bold;color:#333;margin:0 0 16px;}
/* 18px/1.62 matches .ntsummary p on the template page. The two pages are read one after
   the other, so body copy that changes size between them reads as a mistake. */
	.tintro{font-size:18px;line-height:1.62;color:#5a544e;text-align:left;margin:0 0 22px;}
/* The CTA previously appeared with nothing introducing it, so it read as a stray button
   after the paragraph rather than an offer. This says what it is for: /app/ opens an
   empty project, which is the one thing the whole page of templates does not give you. */
	.tleadmeta{font-size:14px;color:#8a837c;margin:-6px 0 18px;}
	.tleadmeta a{color:#FC4A1A;}
	.tleadcue{font-size:15px;line-height:1.5;color:#8a837c;margin:0 0 12px;}
	.tleadcta{display:inline-block;text-decoration:none;font-size:15px;padding:9px 20px;border-radius:4px;}
	@media only screen and (max-width:700px){.tleadtitle{font-size:30px;}}
	.tleadmedia{flex:0 0 38%;max-width:520px;}
	.tcollage{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
	.tcollageitem{position:relative;display:block;border-radius:6px;overflow:hidden;background:#f2f2f2;line-height:0;}
	.tcollagevid{display:none;position:absolute;top:0;left:0;width:100%;height:100%;}
	.tcollagevid video{display:block;width:100%;height:100%;object-fit:cover;}
	.tcollageitem img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .18s;}
	.tcollageitem:hover img{transform:scale(1.05);}
/* Below this the two columns are too narrow to be worth keeping apart. */
	@media only screen and (max-width:960px){.tlead{display:block;}.tintro{max-width:none;}.tleadmedia{max-width:520px;margin-top:24px;}}
	.tintro a{color:#FC4A1A;}
	.tchips{font-size:14px;text-align:left;margin:0;}
/* One row per facet with its own label. Dividers inside a single wrapping row stopped
   meaning anything the moment 28 chips spilled onto a second line -- types and occasions
   ran together mid-row. Separate labelled rows survive wrapping. */
	.tchiprow{display:block;}
	.tchiprow:last-child{margin-bottom:0;}
/* 12px/.12em is what .ntback and .ntfacet use on the template page. */
/* The long tail of occasions is hidden until asked for. 23 of them at once is a wall,
   and the bottom half have 1-4 templates each.
   Qualified with .tchip rather than relying on source order. .tchip also sets display,
   at the same specificity, and it is declared further down the sheet -- so a bare
   .tchipmore{display:none} lost to it and the tail never collapsed at all. */
	.tchip.tchipmore{display:none;}
	.tchipsopen .tchip.tchipmore{display:inline-block;}
	.tchipmorebtn{display:inline-block;background:none;border:0;padding:7px 6px;margin:0 0 8px;color:#8a837c;font-size:13px;cursor:pointer;text-decoration:underline;font-family:Open Sans,sans-serif;vertical-align:middle;}
	.tchipmorebtn:hover{color:#FC4A1A;}
/* Horizontal scroll only where the screen genuinely cannot hold the row. On desktop it
   would hide most of the browse options behind an invisible affordance. */
	@media only screen and (max-width:700px){.tchiprow{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}.tchip{margin-bottom:0;}}
	.tchip{display:inline-block;padding:7px 15px;margin:0 7px 8px 0;border-radius:100px;background:#f2f2f2;color:#444;text-decoration:none;white-space:nowrap;line-height:18px;vertical-align:middle;transition:background .12s;}
	.tchip:hover{background:#e4e4e4;}
/* Types read as a different kind of choice from occasions. The tint is drawn from the
   teal in the page header rather than introducing a new colour. */
	.tchiptype{background:#e4f2f1;color:#2f6b67;}
	.tchiptype:hover{background:#d3e9e7;}
/* Industry is the third family in the row. A warm sand rather than a second cool hue: the
   page already runs on warm greys (#6c6660, #8a837c, #a8a29b) and the teal is the one cool
   note in it, so another blue or green beside it would have read as a second kind of type
   chip. #6f5c3f on #f3ece1 is 5.4:1, which clears AA for the 14px chip text. */
	.tchipind{background:#f3ece1;color:#6f5c3f;}
	.tchipind:hover{background:#eadfcc;}
	.tchipon,.tchiptype.tchipon,.tchipind.tchipon{background:#FC4A1A;color:#fff;}
	.tchipon:hover{background:#e33d0f;}
	.tchipn{opacity:.55;margin-left:6px;font-size:12px;}


/* One full-width card per row on a phone, on the pages that nest #templatelist inside
   .templatelistcont -- index, marketing and the four ad-maker pages.
   .templatelistcont is display:flex, so #templatelist is a flex item, and a flex item's
   automatic minimum size is its min-content width. That is one .tempcard, which is a hard
   394px, so the list refused to shrink below 394 inside a 355px container and pushed the
   whole document 9px wide at 375 and 37px at 320. .tempcard's own max-width:100% could not
   help: the parent it resolves against was itself sized by the card. Exactly the .footerlists
   bug in a different place. min-width:0 releases the floor, max-width:100% supplies the cap.
   Deliberately NOT applied to template.php's related grid: there the element IS the container
   (<div id=templatelist class=templatelistcont>), so it is never a child of one, and
   .ntrelated already lays it out as a 12-column grid two-up. The child combinator is what
   keeps these apart.
   420px, matching the breakpoint the listing already uses: a 394px card fits any viewport at
   or above ~414px, so above this width there is nothing to fix and a stretched card would
   only make a 16:9 thumbnail absurdly wide on a tablet. */
@media only screen and (max-width: 420px){
	.templatelistcont > #templatelist{min-width:0;max-width:100%;}
	.templatelistcont > #templatelist .tempcard{width:100%;max-width:100%;}
}


/* ===========================================================================
   Below-the-app type, phones only.

   The explanatory sections under the card are set at 20px with a 175% leading, which reads well
   in a 780px column on a desktop and is simply too big on a 375px screen -- about thirty
   characters to a line, so every paragraph becomes a column of fragments. Headings scale (they
   are clamps); the body copy never did.

   Lives here rather than in either page because BOTH pages carry their own inline copy of these
   rules and they have already drifted apart -- the two blocks differ today. One override in the
   shared stylesheet is one thing to keep true instead of two.

   The selectors carry an extra class on purpose: this file is loaded before each page's inline
   <style>, so at equal specificity the page wins and a media query adds none of its own.
   =========================================================================== */
@media (max-width: 620px) {
    .vg-how .vg-step p,
    .vg-faq .vg-step p { font-size: 16.5px; line-height: 1.6; }
    .vg-how .vg-step h3,
    .vg-faq .vg-step h3 { font-size: 18.5px; }
    .vg-how .vg-faq h3,
    .vg-faq h3 { font-size: 17.5px; }
    /* The examples lead sits inside a .vg-step, so it takes the body size above; it just needs
       its own leading back, being a single short paragraph rather than running text. */
    .vg-how .vg-step p.vg-exlead { line-height: 1.5; }
}

/* ===========================================================================
   AI showcase carousel -- the scroll-snap strip of description/result pairs.

   Lived inline in ai.php AND imageai.php, which meant every change had to be
   made twice and the two had already drifted. Moved here 2026-09-11 so a third
   page can use it: the markup and the script are already shared, in
   includes/aigallery.php (aiShowcaseCarousel / aiCarouselScript), so including
   that file is now the whole cost of putting the strip on another page.

   Deliberately NOT moved: .vg-shapecap, whose color differs on purpose between
   the two pages (#7a9299 on the video page, #8496b8 on the image page). It
   stays inline in each. Everything below was byte-identical in both copies and
   is unchanged by the move -- note that includes the teal palette, which the
   image page was already using for its carousel despite being bluer elsewhere.
   =========================================================================== */

/* One prompt and one video per scene, one scene in view. Bleeds the same 40px each side as
   .vg-shapes so the two sections line up. The track is a scroll-snap strip: a touch screen
   swipes it natively and the arrows drive the same scrollLeft, so there is no second position
   model to fall out of step with it. */
/* Bleed to the edge of the WINDOW rather than a fixed 40px, capped at 140. The strip was ending
   inside the card with teal to spare on both sides, which read as the film being cut short rather
   than running on. max() picks whichever bleed is smaller in magnitude, so a narrow window gets
   exactly the room it has and can never overflow into a horizontal scrollbar -- and at around
   900px it lands on -40 by itself, which is where this started. */
/* ===== ?strip=even -- the evenly weighted variant, off by default =====================
   Every clip the same weight: no scale on the centre, every title shown, every visible clip
   playing. The heights are uniform in BOTH modes -- that is what --sceneh does
   -- so what this really tests is whether singling one out helps or just makes the other five
   look like they are waiting their turn. The lift stays on the centre: with nothing at all to
   mark it, the arrows and the snap have no visible subject. */
.vg-even .vg-scene .vg-scenevid,
.vg-even .vg-scene.vg-cur .vg-scenevid { transform: none; }
.vg-even .vg-scene:not(.vg-cur) .vg-scenetitle { visibility: visible; }
/* A shadow on EVERY clip, not just the centre one. Two reasons it changed. The band is gone in
   the hero, so the clips sit straight on the page's teal with nothing but their own edge -- a
   little lift is what separates a picture from a coloured rectangle painted on the background.
   And a shadow on one clip alone is emphasis, which is the one thing even weighting is not: it
   left the middle looking picked out on a strip whose whole claim is that none of them is.
   Both selectors because the centre still carries .vg-cur, and the plain rule further down the
   file would otherwise win it back on specificity. */
/* video AND img. Every shadow rule here named `video`, so the image page -- whose scenes render
   <img> because a still has nothing to play -- had no shadow on any clip at all. The band is gone
   in the hero, so without it the stills sat flat on the page's own colour while the videos beside
   them on the other page were lifted off it. */
.vg-even .vg-scene video, .vg-even .vg-scenevid > img,
.vg-even .vg-scene.vg-cur video { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30); }
/* Nothing is scaled, so the chip needs no room above the clip beyond its own half. The gap grows
   though: with one clip raised above the rest, 12px reads as the others tucked in behind it, but
   with every clip on the same plane they simply butt together and the strip becomes one long
   picture with seams. Even weighting needs even air. */
/* Both paddings stated, not just the top. Overriding one and inheriting the other is how even
   mode ended up 24 above and 44 below: the default's bottom padding is sized to clear a scale-up
   that does not happen here. */
/* Snapped to the START in even mode. scroll-snap-align: center is the ring's rule; a shelf rests
   with a clip against the left edge. */
.vg-even .vg-scene { scroll-snap-align: start; }
/* No snapping on the desktop shelf. Not mandatory, not proximity -- none.
   Snap points here sit as much as 790px apart, because a wide clip is 764 wide, and a snap always
   resolves to the NEAREST one. So any gesture travelling less than half that distance was dragged
   straight back where it came from: measured, twelve separate 200px scrolls left the strip at
   zero, having moved nowhere at all. On a phone that showed up as the first swipe bouncing back
   to the clip before it.
   There is nothing a snap buys this layout. Clips are different widths, so there is no grid to
   hold; there is no "current" to rest on, since even mode singles out nothing; and the thing a
   reader wants -- to push the film sideways and look -- is what snapping was preventing. The
   phone keeps mandatory below, where one clip fills the view and a swipe really does mean
   "the next one". */
.vg-even .vg-track { scroll-snap-type: none; }
/* The edge fade. Where there is more film in a direction, the strip dissolves into the page on
   that side; where there is not, it ends cleanly. A mask rather than a gradient overlay because
   the page behind it is a teal GRADIENT -- any solid overlay would be a slightly wrong colour at
   one end of itself. Both variables are 0 when everything fits, and the gradient is then opaque
   from end to end, so a short strip gets no fade at all. */
.vg-carousel { --fadeL: 0px; --fadeR: 0px; }
.vg-carousel.vg-more-left  { --fadeL: 165px; }
.vg-carousel.vg-more-right { --fadeR: 165px; }
.vg-track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fadeL),
                        #000 calc(100% - var(--fadeR)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fadeL),
                        #000 calc(100% - var(--fadeR)), transparent 100%);
}
/* No arrows on the shelf at all. They were drawn ON TOP of the clips to say the strip moves --
   covering the evidence in order to describe it -- and the wide dissolve at each edge now says
   the same thing using the film itself. What is left underneath is a plain scroll container:
   trackpad, touch, drag, and the arrow keys once it has focus. The focus-mode ring keeps its
   arrows, because a ring has no edges to dissolve -- it is always full at both ends. */
.vg-even .vg-arrow { display: none; }
/* The focus variant keeps them, revealed on approach. */
.vg-arrow { opacity: 0; transition: opacity 0.18s ease; }
.vg-carousel:hover .vg-arrow,
.vg-arrow:focus { opacity: 1; }
@media (hover: none) { .vg-arrow { opacity: 1; } }
/* The strip takes focus now, so it needs to show it -- and inside, not outside, or the outline
   is cropped by the scroller's own overflow. */
.vg-track:focus { outline: none; }
.vg-track:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: -3px; }

/* Says it can be pushed. The scene-level pointer cursor is a focus-mode idea -- there a click
   centres that clip -- and on a shelf it promises something clicking does not do. */
/* Hidden by default: the desktop shelf says "there is more" with the film itself, running off
   both edges behind a fade. Shown at the phone breakpoint below, where neither of those exists. */
.vg-dots { display: none; gap: 7px; justify-content: center; margin: 14px 0 0; }
.vg-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
          background: var(--vg-strip-dot, rgba(255, 255, 255, 0.34)); transition: background 0.2s, transform 0.2s; }
.vg-dot.on { background: #fc4a1a; transform: scale(1.25); }
/* The desktop counterpart of the dots: a quiet link-style button under the strip's right end that
   pages it along. It follows .vg-carousel rather than living inside it, and is pulled up into the
   carousel's 20px bottom margin so it still reads as the strip's. Deliberately faint: it is there
   for the visitor who goes looking, not to compete with the clips. Light, because the AI pages and
   the home page put it on teal. font-size is stated because .templateheader is font-size:0. */
.vg-more { display: block; margin: -12px 26px 14px auto; padding: 2px 0; border: 0; background: none;
           font: inherit; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.55);
           cursor: pointer; }
.vg-more:hover, .vg-more:focus-visible { color: #fff; text-decoration: underline; }
@media (max-width: 900px) { .vg-more { display: none; } }

.vg-even .vg-track { cursor: grab; }
.vg-even .vg-scene { cursor: inherit; }
.vg-even .vg-track { padding: 20px 0 24px; gap: 26px; }
/* Air at both ends, so the first and last clip do not butt against the window. Spacers rather
   than padding-left/right, because this is a flex scroll container and Chrome drops the trailing
   padding on those -- the left would have held and the right would silently not have, which is
   the kind of asymmetry nobody finds by reading the CSS. Sized to the gap between clips so the
   ends and the middle are the same distance apart. */
.vg-even .vg-track::before,
.vg-even .vg-track::after { content: ""; flex: 0 0 26px; }
/* scroll-padding, or the snap undoes the spacer. scroll-snap-align: start aligns a clip to the
   CONTAINER's edge, so from a rest at 0 the nearest snap point was the first clip at 52 and the
   browser quietly pulled the inset away -- measured, it settled at scrollLeft 52 with the clip
   flush. scroll-padding moves the line a clip snaps to inwards by the same amount, so the inset
   survives a snap and every clip navigated to rests at it.
   52 = the 26px spacer plus the track's own 26px gap, which also falls between the spacer and
   the first clip. */
.vg-even .vg-track { scroll-padding-left: 52px; scroll-padding-right: 52px; }
/* Was here to give the end of the shelf a resting place the snapping would accept. With no
   snapping on desktop the scroller simply stops at the end, with the trailing spacer providing
   the same inset as the head -- and on the phone, where snapping remains, a scene is the full
   width of the view so its start and its end are the same position. Kept for the phone, where
   it costs nothing and states the intent. */
.vg-even .vg-scene:last-of-type { scroll-snap-align: end; }
.vg-even .vg-arrow { bottom: calc(var(--sceneh) / 2 + 24px); }

/* ===== ?place=hero|below -- the strip outside the card ==============================
   Everything in the showcase is coloured for a white card. On the page's teal ground the lead
   line was #1a6b7a on teal and the caption was grey on teal -- both nearly invisible. Only the
   type changes; the band brings its own dark ground with it wherever it sits.
   The band also stops needing a negative margin out here: its parent is already the full-width
   section, so calc(50% - 50vw) resolves to roughly zero on its own and the rule does no harm. */
/* The h1 when it sits outside the card, on the page's own teal. The card's h1 is #1a6b7a, which
   is the one colour that disappears against that ground. Centred because it is now heading the
   whole band rather than labelling a panel, and larger for the same reason -- out here it is the
   page's opening line, not the card's. */
.vg-hoisted { color: #fff; text-align: center; max-width: 900px; margin: 0 auto 16px;
              font-size: clamp(27px, 4.2vw, 42px); line-height: 1.14; font-weight: 700;
              letter-spacing: -0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); }
.vg-hoisted .vg-kicker { color: #fff; opacity: 0.72; }
/* `.vg-hero h1 { margin: 0 0 14px }` lives in ai.php's INLINE stylesheet, which the browser reads
   after this file -- equal specificity, later sheet wins, so the auto side margins above were
   being dropped and the heading sat as a 900px box pinned to the left with its text centred
   inside it. One more class out-specifies it from here. */
/* More air under the heading than over the strip's own top padding. At 6px the title sat almost
   on the film; the band that used to separate them is gone, so the gap has to do that work now. */
.vg-hero h1.vg-hoisted { margin-left: auto; margin-right: auto; margin-bottom: 22px; }
@media (max-width: 620px) { .vg-hero h1.vg-hoisted { margin-bottom: 16px; } }
/* Tucked under the banner's rule, inside the panel. */
.vg-bannerlink { text-align: center; margin: -8px 0 16px; }
.vg-bannerlink .vg-doclink { margin: 0; }
/* The banner the lead line becomes when it moves onto the panel. Same treatment as .vg-showlead
   had on white, since that is exactly what it is -- only its address changed. */
.vg-cardbanner { text-align: center; font-family: Poppins, sans-serif; font-size: 19px;
                 font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #1a6b7a;
                 margin: 2px auto 18px; max-width: 620px; }
.vg-cardbanner::after { content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
                        background: #9fd6e0; margin: 9px auto 0; }
@media (max-width: 620px) { .vg-cardbanner { font-size: 16.5px; } }
.vg-showcase-out { margin: 0 0 26px; }
/* As a hero the strip is evidence, not a catalogue. The chip and the bar are both there to help
   someone CHOOSE -- the chip names a neighbour worth crossing to, the bar answers "is this stuck
   or playing" during a slow scene. Up here nobody is choosing: they are being shown, once, before
   they have decided anything, and the two pieces of chrome make a reel look like a widget.
   The doubt the bar answered is also smaller here, because several clips are moving at once.
   Both are one line each to put back; the descriptions and the format labels still exist in the
   examples section further down, which is where a reader who wants to choose ends up anyway. */
/* The chip goes; the bar stays. They were hidden together on the reasoning that both help someone
   CHOOSE, but the bar is not really a chooser's tool -- it is the only thing on screen that says
   the picture is running rather than stuck, which matters more in a hero, not less, because the
   reader has not decided to pay attention yet.
   It was also half-hidden by accident: this rule is (0,2,0) and the even-mode rule that shows a
   bar on every non-centre clip is (0,4,0), so the neighbours kept theirs and only the middle one
   lost it -- the inverse of the intent, and visible as bars under some clips and not others. */
/* The chips are back. They came off on the reasoning that a hero is evidence rather than a
   catalogue and nobody up there is choosing -- which held right up until the examples section
   below started saying "these are the descriptions that produced the examples at the top, same
   names, same order". That sentence is only true to a reader who can see the names. The chip is
   what makes the two halves of the page one argument instead of two lists that happen to match. */
/* The caption and the two links go too. In the panel they closed the showcase off; as a hero they
   sit in the one place that should be empty -- between the film and the tool -- and ask the reader
   to go somewhere else at the exact moment the page has finally shown them what it does.
   Nothing is orphaned. /templates/ is in the site nav. The How-it-works section is the next thing
   down the page under its own heading. The descriptions are still one click away inside step 1,
   which is now directly below this, via "See example descriptions". And the claim the caption
   carried -- that these are generated, not templates -- is what the panel's banner says: "Make an
   MP4 video like the ones above". */
.vg-place-hero .vg-shapecap,
.vg-place-hero .vg-showlinks { display: none; }
/* No band up here. It was earning its keep when the strip sat INSIDE the white card and crossed
   its edge -- the dark ground was what made that crossing look deliberate rather than like
   content escaping. As a hero the page's own teal is already the ground, and the band just lays
   a hard-edged stripe across it and cuts the header off from the clips. The clips bring their
   own dark with them. */
.vg-place-hero .vg-carousel { background: none; }
.vg-showcase-out .vg-showlead { color: #fff; }
.vg-showcase-out .vg-showlead::after { background: rgba(255, 255, 255, 0.45); }
.vg-showcase-out .vg-shapecap { color: rgba(255, 255, 255, 0.72); }
.vg-showcase-out .vg-doclink { color: rgba(255, 255, 255, 0.82); }
.vg-showcase-out .vg-doclink:hover { color: #fff; }

/* A band, running the full width of the window. The strip was already bleeding past the card and
   it read as content escaping rather than as a section of its own -- clips half on the white card
   and half on the page behind it, with no edge anywhere to say which was intended. On its own dark
   ground the whole thing becomes one object: the card stops at its edges, the reel crosses it, and
   the clips sit against a colour that flatters them rather than against white.
   max-width/overflow-x guard the classic 100vw trap, where vw counts the scrollbar and the page
   gains a few pixels of sideways scroll. */
.vg-carousel { --sceneh: 320px; position: relative; margin: 0 0 20px;
               margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
               max-width: 100vw; overflow-x: hidden;
               background: var(--vg-strip-bg, #0e3b45); padding: 4px 0 0; }
/* --vg-strip-bg and --vg-strip-dot let a page recolor the band without restating the rules: the
   templates page's ?hero=fx panel runs a light strip on the teal hero. Defaults are the dark band. */
@media (min-width: 1080px) { .vg-carousel { --sceneh: 380px; } }
@media (min-width: 1360px) { .vg-carousel { --sceneh: 430px; } }
/* No scroll-behavior: smooth. With scroll-snap-type mandatory it drops the animation and
   snaps back to 0, so an arrow click moved nothing; without snap it under-shoots. A direct
   scrollLeft is exact, and snapping still governs the touch swipe. */
/* The one line of copy above the strip. It replaced two sentences set at 17px across the full
   width, which read as a paragraph of marketing standing between the reader and the tool. Kept
   here rather than inline in the two AI pages because it belongs to the showcase, and the whole
   point of moving this block was that a third page should get the component whole. */
.vg-showlead { text-align: center; font-family: Poppins, sans-serif; font-size: 20px;
               font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #1a6b7a;
               margin: 4px auto 18px; max-width: 620px; }
/* The 6px this replaced was fine against white. Against the band's hard top edge it read as the
   heading being crowded off the card by it. */
/* The same short rule that sits under every section heading on these pages, so this reads as the
   showcase's own heading rather than a sentence that happens to be bold. */
.vg-showlead::after { content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
                      background: #9fd6e0; margin: 9px auto 0; }
@media (max-width: 620px) { .vg-showlead { font-size: 17px; } }

/* position: relative so a scene's offsetLeft is measured against the track itself -- the script
   centers by offsetLeft now rather than by multiplying the track width, because a scene is no
   longer as wide as the track. */
/* 12px, not 20: the clips are the content now and the line reads as a strip of film rather
   than a row of cards. */
/* The vertical padding is what the enlarged centre grows INTO. Without it the track clips it or
   raises a scrollbar: overflow-x:auto computes overflow-y to auto too, so neither axis is visible. */
.vg-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; position: relative;
            scrollbar-width: none; -ms-overflow-style: none; gap: 12px; padding: 40px 0 44px; }
/* 40 and 44 -- unequal numbers producing equal GAPS, which is the only thing anyone sees. Three
   things offset the two edges differently: the band carries 4px of its own padding at the top
   only, the playing clip is scaled about its centre so it reaches past its box both ways, and the
   title chip rides up out of the top and needs to stay inside the band. Measured at every step
   rather than derived -- it began at 59 above against 43 below, and the obvious trim then put
   both at 9 and pushed the chip 5px OUT of the band's top edge. These give 27 and 27 with the
   chip 13 inside. The arrow offset below must match the bottom padding or it drifts off the
   clip's centre. */
.vg-track::-webkit-scrollbar { display: none; }
/* The two edge slivers do the job the spacers used to: they give the first and last scene enough
   room in front of and behind them to reach the middle, AND they show the wrapped-around neighbour
   instead of a blank gutter. 360px now rather than 170: with scenes sized to their own clips the
   narrowest scene is a 180px vertical, and centring THAT leaves (900-180)/2 = 360px to fill on
   each side. Sized for the worst case, because a sliver narrower than the gap puts the blank
   gutter straight back. */
/* .vg-scene.vg-ghost, not .vg-ghost: it carries .vg-scene for the layout, and a bare
   single-class selector loses the flex-basis to .vg-scene further down the file. */
/* calc(50% - 90px), not a fixed 360: the room beside a centred scene is (trackWidth - sceneWidth)/2,
   and the narrowest scene is a 180px vertical, so the worst case is half the track less 90. A fixed
   number was right for one track width and left a blank gutter at every other. */
.vg-scene.vg-ghost { flex: 0 0 calc(50% - 90px); overflow: hidden; pointer-events: none;
                     scroll-snap-align: none; cursor: default; }
/* Pushed against the INNER edge. Centred like a real scene, a square or vertical poster would sit
   in the middle of a 170px sliver and the peek would show empty box -- which is the whole bug. */
/* Present for its height, never read: it reserves exactly the space the real title takes so the
   sliver's picture lines up with the picture beside it. */
.vg-scene.vg-ghost .vg-scenetitle { visibility: hidden; }
.vg-ghost.vg-lead  .vg-scenevid { justify-content: flex-end; }
.vg-ghost.vg-trail .vg-scenevid { justify-content: flex-start; }
/* max-width:none so the poster keeps its own width and is clipped by the sliver's overflow --
   constrained to 100% it would shrink to fit and stop filling the height. */
.vg-ghost img { height: 100%; width: auto; max-width: none; display: block; border-radius: 8px; }
/* A strict line: every scene is exactly as wide as its own clip. The fixed 570px width existed to
   hold a description panel under the media; with that gone, a uniform width only pads a vertical
   out with empty space on both sides -- the dead band this strip has been fighting all along. At
   `auto` a vertical takes 180px and a wide takes 569px and they sit shoulder to shoulder, so what
   shows either side of the middle is always picture. Nothing in the script cares: centerOf() has
   always measured offsetLeft and offsetWidth per scene rather than assuming a common width, which
   is what makes a variable-width filmstrip work without a second position model. */
/* position+z-index because the playing clip is scaled past its own box and overlaps whatever is
   beside it. Flex items paint in DOM order, so the scene to its RIGHT -- a later sibling -- was
   drawing on top of the very thing being emphasised, cutting its edge and its progress bar. */
.vg-scene { flex: 0 0 auto; margin: 0; scroll-snap-align: center; cursor: pointer;
            position: relative; z-index: 1; }
.vg-scene.vg-cur { z-index: 3; }
/* No dimming. The neighbours were held at 0.32 to say which scene was live, but over a white card
   that reads as a wash laid over them -- they look disabled rather than next. The signal was
   already there and stronger: the middle scene is the only one PLAYING, and motion against two
   still frames says "this one" far better than opacity does. Being clipped by the card edge says
   the rest just as plainly. .vg-cur stays because the cursor below depends on it. */
.vg-scene.vg-cur { cursor: default; }

/* Emphasis on the one that is playing, built by ADDING to it rather than by laying anything over
   the others -- the 0.32 wash did the second and made the neighbours look disabled. Three cues,
   all quiet on their own:
     1. the playing clip is lifted off the card by a shadow;
     2. the ones beside it sit back 6%, which is depth rather than a veil -- and because it is a
        transform it changes nothing about layout, so centerOf() still measures the same offsets;
     3. their titles drop to the muted grey, so the only teal name is the one you are watching.
   Scaled DOWN, never the centre up: the track resolves overflow-y to auto, so a centre scaled past
   its 320px box would either clip or raise a vertical scrollbar across the strip. */
.vg-scene .vg-scenevid { transform: scale(0.92); transition: transform 0.3s ease; }
/* Up past its own box, not merely back to it -- this is the gap above and below the strip being
   spent on the thing worth looking at. It has to be a transform: the boxes are sized from the
   format classes, so changing the real height would change the scene WIDTHS, and go() writes
   scrollLeft before sync() moves the .vg-cur class -- every advance would centre against widths
   that were about to change. A transform paints outside the layout and leaves all that alone. */
.vg-scene.vg-cur .vg-scenevid { transform: scale(1.08); }
/* The ring is a box-shadow spread, not a border: a real border would add 6px to the clip's box
   and every scene is sized to its own clip, so the playing one would grow and shove the strip
   sideways each time it advanced. A spread paints outside the box and costs the layout nothing,
   and it follows the 8px radius on its own. The white ring under the teal one reads as a mount
   on the white card -- it separates the frame from a clip whose own edge may be any color. */
/* Hugging the clip, not floating off it. The 4px white gap underneath read as a frame hung
   BESIDE the video rather than a border ON it. #fc4a1a is the page's action colour -- the same
   orange as the Describe button -- so the marked clip and the thing to click share a colour
   against a page that is otherwise entirely teal. */
/* The static ring is gone -- the SVG below draws it now, and draws it as a progress track. What
   is left here is the lift, which is depth rather than state. */
.vg-scene.vg-cur video { box-shadow: 0 8px 22px rgba(11, 58, 68, 0.26); }
.vg-scenevid { position: relative; }
/* Loading cues, drawn by the browser -- no bytes on the wire. A clip's box is empty until its
   poster or first frame arrives (a video with neither paints nothing), which on a phone read as a
   blank gap. ::before is a slow shimmer BEHIND the media, so a poster or frame simply covers it;
   ::after is a small spinner ON TOP, shown only while .vg-wait is set -- the script adds it when a
   clip is told to play before it has enough data, and drops it on "playing" (or a pause). */
.vg-scenevid::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
                       background: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%) 0 0 / 250% 100%,
                                   rgba(14, 59, 69, .16);
                       animation: vg-shimmer 1.6s linear infinite; }
.vg-scenevid > video, .vg-scenevid > img { position: relative; z-index: 1; }
.vg-scenevid.vg-wait::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; pointer-events: none;
                              width: 40px; height: 40px; margin: -20px 0 0 -20px; box-sizing: border-box; border-radius: 50%;
                              /* on a dark translucent disc, so it reads on the pale /templates/ strip and the dark home band alike */
                              background: rgba(9, 34, 40, .55); background-clip: padding-box;
                              border: 4px solid rgba(255,255,255,.28); border-top-color: #fff;
                              animation: vg-spin .8s linear infinite; }
@keyframes vg-shimmer { from { background-position: 125% 0, 0 0; } to { background-position: -125% 0, 0 0; } }
@keyframes vg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .vg-scenevid::before { animation: none; }
    .vg-scenevid.vg-wait::after { animation-duration: 2.4s; }
}
/* A scene that opens something -- a template, on the home page and /templates/. Block so it takes
   the scene's box rather than wrapping the clip in an inline run with a baseline gap under it. */
.vg-scenelink { display: block; color: inherit; text-decoration: none; }
/* No progress bar under these clips, and do not re-add one without its driver. A bar was built
   here -- a translucent track with an orange fill, meant to be advanced from requestVideoFrameCallback
   -- but nothing was ever written to set the fill's width, so all six scenes rendered a permanently
   empty white track. The hero also plays up to three looping clips at once, where three bars sweeping
   at three different rates is noise, not information: a clip that is moving already says it is
   running, which is the only thing the bar was there to say. */
/* Only the playing scene is named. The strip bleeds past the card now, so a neighbour's title
   was rendering out on the teal, half of it cut by the card edge -- its own overflow was working
   fine, the card simply is not the clipping box. visibility, not display: the row still takes its
   height on every scene, so all six clips start at the same line and nothing shifts when the
   title moves with the film. Same reason the edge slivers carry a hidden one. */
.vg-scene:not(.vg-cur) .vg-scenetitle { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .vg-scene .vg-scenevid { transition: none; } }
/* Sized to the clip, not a box the clip sits inside. A fixed-height box with the media centred in
   it only ever fits the one shape tall enough to fill it; everything else floated in the middle
   with dead white above and below, which is the padding around the strip. Every scene already
   carries its format as a class, so the box can just BE 16:9, 1:1 or 9:16 of the height -- no
   centring, no slack, and the scene's width stops depending on when the video reports its
   intrinsic size. The clips grow with the window: 320 in a 1400px browser was the other half of
   "feels truncated" -- the strip was not short, it was small. */
.vg-scenevid { height: 320px; height: var(--sceneh); display: flex; }
.vg-swide     .vg-scenevid { width: calc(var(--sceneh) * 16 / 9); }
.vg-ssquare   .vg-scenevid { width: var(--sceneh); }
.vg-svertical .vg-scenevid { width: calc(var(--sceneh) * 9 / 16); }
/* cover, not contain: the box is already the clip's own ratio, so there is nothing to crop -- and
   if a render ever comes out a hair off-ratio, cover loses a pixel at the edge where contain would
   letterbox it and put the dead space straight back. */
/* No background colour behind the media. #0b3a44 was there as a placeholder while a clip loaded,
   but the poster does that job now, and an OPAQUE colour behind a frame is only ever seen when
   the frame fails to cover it exactly -- which happens, because these boxes are sized from a
   ratio and land on fractions: the wide clip measures 188.438px tall. A dark teal rim against
   a teal page is exactly the discolouration around the edges. Transparent means any sub-pixel
   sliver shows the page itself, which is invisible by definition. */
.vg-scenevid video { width: 100%; height: 100%; object-fit: cover; display: block;
                     border-radius: 8px; background: transparent; }
/* A still fills its box exactly the way a clip does -- the box is already its own ratio. */
.vg-scenevid > img { width: 100%; height: 100%; object-fit: cover; display: block;
                     border-radius: 8px; background: transparent; }
/* The prompt is the INPUT, and an unlabeled grey line centered under a picture always reads as
   a caption describing it -- the one thing this text is not. So it is labeled, paneled, and
   left-aligned like the box it will be pasted into. The left rule is a quotation mark that needs
   no glyph: this is the only quoted text on the page, and the panel is also the control, so the
   action line spells that out rather than leaving it to a hover state nobody on a touch screen
   will ever see. */
/* Sits above the clip. Quiet enough not to compete with the design inside the video -- the
   example is the loud thing and this is only its handle. */
/* width:0 with min-width:100% is the whole point of this rule. A scene is sized to its own clip
   (flex: 0 0 auto), so its width is the max-content of what it holds -- and a title longer than a
   narrow clip was quietly making the SCENE wider than the video. "Restaurant promo VERTICAL"
   measured 209px over a 180px vertical and pushed 29px of empty space into the strip, which looked
   like a rendering quirk in the clip rather than a caption overflowing. At width:0 the title
   contributes nothing to that calculation; min-width:100% then stretches it back across whatever
   width the clip decided. The title can never move the film again. */
/* Stacked, not side by side. Sharing one line, the format chip took 60-odd pixels off a name
   that on a 180px vertical had only 180 to begin with -- "Restaurant Promo" was one character
   from an ellipsis. Below it, the name gets the clip's whole width and the chip reads as a
   subtitle, which is what it is. */
/* Tight to the clip below it. The lead, the title and the film were each separated by enough air
   to read as three unrelated blocks stacked up the page rather than one labelled strip -- and the
   title, sitting between two gaps, floated worst of all. It labels the clip, so it belongs against
   the clip. */
/* The bottom margin has to clear the scale-up. The playing clip is transformed to 1.08 about its
   own centre, so its PAINTED top edge sits (sceneh * 0.08 / 2) above where layout put it, while
   the title stays where layout put IT -- at a 6px margin the two overlapped by 11px. The calc
   pays back exactly that overhang and leaves 9px of real air; the phone breakpoint sets a plain
   value because nothing is scaled there. */
/* A chip straddling the clip's top edge. Absolute, so it occupies no row and there is no height
   to reserve, no overhang to pay back against the scale-up, and nothing left between the heading
   and the film. Inside the media box on purpose: it then scales WITH the playing clip and stays
   welded to the edge it sits on. */
/* Dark glass, not a white pill. The white read as a form control -- the one white object on a
   page that is otherwise teal and film -- and a button shape sitting on a video is a thing people
   expect to press. Smoked instead, with a hairline and a blur behind it, it belongs to the clip
   the way a broadcast label does. Still straddling the top EDGE rather than sitting inside the
   frame, which is the part worth keeping: these clips put their own type in the corners -- "MEET
   THE COACHES", "01 / BOTANY" -- and a label inside would land on the design it is naming.
   6px rather than a full pill: a slight squareness reads as a caption, a full round reads as a
   control. */
.vg-scenetitle { position: absolute; left: 50%; top: 0; z-index: 3;
                 transform: translate(-50%, -50%);
                 display: flex; flex-direction: row; align-items: baseline; gap: 6px;
                 max-width: calc(100% - 24px); margin: 0; padding: 4px 12px 5px;
                 background: rgba(9, 34, 40, 0.82); border: 1px solid rgba(255, 255, 255, 0.18);
                 border-radius: 6px; white-space: nowrap; overflow: hidden;
                 -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
                 box-shadow: 0 3px 12px rgba(0, 0, 0, 0.38); }
/* Truncates rather than wraps: wrapping would make this row two lines on the narrow scenes only,
   and every clip beside it would start lower than its neighbours. min-width:0 because a flex item
   refuses to shrink below its content without it, which is what defeats ellipsis inside a flex row. */
.vg-scenename { font-size: 12.5px; font-weight: 600; color: #fff; min-width: 0;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                letter-spacing: 0.01em; }
/* flex-shrink 0: if something has to give on a 180px vertical it is the name, not the format --
   the format is the shorter string and the one the strip exists to demonstrate. */
/* No box of its own any more -- a bordered chip inside a chip is one frame too many. */
.vg-scenefmt { flex: 0 0 auto; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
               color: rgba(255, 255, 255, 0.62); border: 0; padding: 0; }
.vg-scenefmt::before { content: "\00b7"; margin-right: 6px; color: rgba(255, 255, 255, 0.3); }
.vg-useprompt { display: block; width: 100%; font: inherit; text-align: left; cursor: pointer;
                background: #f5fafb; border: 1px solid #d6e6ea; border-left: 3px solid #1a6b7a;
                border-radius: 4px 10px 10px 4px; padding: 11px 15px 10px; }
.vg-useprompt:hover { background: #e8f4f7; border-color: #9fd6e0; border-left-color: #1a6b7a; }
.vg-plabel { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
             text-transform: uppercase; color: #1a6b7a; margin: 0 0 6px; }
.vg-ptext  { display: block; font-size: 13.5px; line-height: 1.55; color: #3d565e; }
.vg-puse   { display: block; font-size: 12px; color: #1a6b7a; margin: 8px 0 0; }
.vg-useprompt:hover .vg-puse { text-decoration: underline; }
/* 46px, not 34: this is the only control on the strip and it has to be a thumb target rather
   than a decoration. Held off the edge instead of flush against it -- at left:0 they sat out in
   the bleed at the very rim of the card and read as page furniture rather than as controls
   belonging to the strip. The desktop inset matches the 40px bleed exactly, so they line up
   with the card's own content edge, which is where the eye already is. */
/* Anchored to the BOTTOM, not the top. The media box is the last thing in a scene, so its centre
   is always height/2 up from the bottom regardless of how tall the title above it grows -- and it
   just grew, twice. Measuring from the top meant the arrows sat a title-height above the middle
   of the clip, which is where they have quietly been. */
/* +20px for the track padding below the clips, which sits between them and the carousel's edge. */
.vg-arrow { position: absolute; top: auto; bottom: 180px;
            bottom: calc(var(--sceneh) / 2 + 44px); /* must equal the track's bottom padding */
            transform: translateY(50%); z-index: 2;
            width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
            border: 1px solid #d6e6ea; background: #fff; color: #1a6b7a; font-size: 26px;
            line-height: 1; box-shadow: 0 2px 6px rgba(11, 58, 68, 0.12); }
/* Above every scene, including the raised one. */
.vg-arrow { z-index: 6; }
.vg-arrow:hover:not(:disabled) { background: #e8f4f7; }
.vg-prev { left: 40px; }
.vg-next { right: 40px; }
@media (max-width: 900px) {
    /* Same point at which .vg-shapes drops its bleed: below here the card is shrinking. */
    .vg-carousel { margin-left: 0; margin-right: 0; }
    /* With the bleed gone the 40px inset would put the arrows deep inside the picture. */
    .vg-prev { left: 8px; }
    .vg-next { right: 8px; }
    /* No peek below here: there is not enough width for a neighbor AND a readable prompt, so
       the scene goes back to filling the strip. Same layout with the peek set to zero, not a
       second design -- the script centers by offsetLeft either way and needs no breakpoint. */
    /* No peek here, so nothing to peek AT: the slivers would just be two dead strips of poster
       eating width the description needs. */
    .vg-scene.vg-ghost { display: none; }
    .vg-track { gap: 0; }
    .vg-scene { flex-basis: 100%; cursor: default; }
    /* One scene in view at a time here, so there is nothing to distinguish it FROM. A ring that
       marks the only thing on screen is not a selection, it is just a frame -- and on a 299px
       card those 7px are width the clip would rather have. The lift stays; it is depth, not a
       selection, and it still separates the clip from the white card. */
    .vg-scene .vg-scenevid { transform: none; }
    /* 0,3,0 beats the rule above, so the centre would still scale to 1.08 -- on a scene that is
       already the full width of the card, which means straight over its edge. */
    .vg-scene.vg-cur .vg-scenevid { transform: none; }
    /* Exact-fit here too, but driven by WIDTH instead of height -- a 16:9 box at --sceneh 320
       would be 569px wide and hang half a card off the side. Wide and square take the full card
       width and get their height from the ratio; a vertical takes the strip's height and gets its
       width from the ratio, which is the only one that would otherwise run off the bottom.
       Letting the box float the clip inside it was worse than a dead band once the frame arrived:
       the progress border is drawn on the BOX, so it was an orange rectangle around white space
       with the video sitting loose in the middle of it.

       The three heights that produces (168, 299, 420) would make the page jump on every swipe, so
       the track holds one height and centres them. That is the fixed box again -- but around the
       whole strip, where nobody can see it, instead of around each clip where the frame is. */
    /* 320, not 420. One height for the strip means the tallest shape sets it and every other
       shape floats in the leftover -- at 420 a 16:9 clip sat in 126px of air, which is the same
       floating the chip was moved to cure. 320 makes a vertical 180 wide, the same width it has
       on the desktop strip, and caps the worst gap at 76px. There is no setting that removes it:
       9:16 and 16:9 in one fixed-height strip on a 299px card always leaves air somewhere, and
       the only choice is where to spend it. */
    .vg-track { height: 320px; align-items: center; }
    .vg-scenevid { max-width: 100%; }
    .vg-swide     .vg-scenevid { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    /* Capped at the strip's own 16:9. Full width is right on a phone, where 16:9 of 335px is 188
       tall, but this block runs to 900px: at a 702px window the clip came out 662x372 in a 320px
       track, cropped top and bottom with its title chip clipped off. Measured on ai.php as well. */
    .vg-swide     .vg-scenevid { width: min(100%, calc(320px * 16 / 9)); }
    /* Sized from HEIGHT, like the vertical -- not from width like the wide. A square taking the
       full 335px card width is 335px tall, and the strip is 320: it overflowed by 15px, which is
       what put a vertical scrollbar inside a horizontal carousel. Only the wide can be driven by
       width here, because it is the one shape whose height comes out shorter than the strip. */
    .vg-ssquare   .vg-scenevid { height: 320px; width: auto; aspect-ratio: 1 / 1; }
    .vg-svertical .vg-scenevid { height: 320px; width: auto; aspect-ratio: 9 / 16; }
    /* Belt and braces: nothing should exceed the strip's height now, and if something ever does
       it must not turn a horizontal carousel into a two-axis one. overflow-x:auto already makes
       the y axis auto by itself -- this says what was meant. */
    .vg-track { overflow-y: hidden; }
    /* Nothing to grow into here, so the track keeps its own height. */
    /* Room for the chip's top half only -- nothing is scaled up here. box-sizing so the height
       above is the whole strip rather than the strip plus padding. */
    .vg-track { padding: 16px 0 0; box-sizing: content-box; }
    /* No end spacers on a phone: a scene there is the full width of the track, and anything in
       front of it would push every clip off its own snap position. */
    .vg-even .vg-track::before,
    .vg-even .vg-track::after { flex-basis: 0; }
    /* .vg-even, not bare .vg-track. The plain rules further up this block were being beaten by
       the desktop even-mode ones -- two classes against one -- so the gap and padding meant for
       a phone never applied. The gap was the visible half of it: with the spacers at zero width
       the 26px still fell between the spacer and the first clip, pushing every scene 26px right
       and hanging it 26px off the other side. Measured at 26 left against -26 right, which is
       exactly the uneven padding. */
    .vg-even .vg-track { gap: 0; padding: 18px 0; scroll-padding-left: 0; scroll-padding-right: 0; }
    /* mandatory here, proximity on the desktop shelf. The two are different objects: a shelf is
       a row you push around and should rest where you leave it, but a phone shows exactly one
       clip at a time, so a swipe means "the next one" and resting between two is just a view of
       two half-clips. Proximity was the weird scrolling. */
    .vg-even .vg-track { scroll-snap-type: x mandatory; }
    /* Centre the clip in its scene. A scene is the full width of the card here while the clip is
       its own natural width, so a 180px vertical in a 335px scene sat hard against the left with
       155px of nothing beside it -- measured at inset 0 for every format, which is what made the
       padding look inconsistent from clip to clip. On the desktop strip the scene shrink-wraps
       the clip, so this never arose there. */
    .vg-scenevid { margin-left: auto; margin-right: auto; }
    /* The phone's only cue that the strip moves, now that it has no peek, no fade and no arrows.
       Tappable as well as indicative -- a dot is a target, which matters on the one device where
       the alternative gesture is a swipe someone has to guess at. */
    .vg-dots { display: flex; }
    /* Half the strip, not half --sceneh: the clips no longer all stand 320px tall here. */
    .vg-arrow { bottom: 160px; }
    /* No edge fade on a phone at all. It says "the film continues past here", which is true on
       the desktop shelf where clips really do run off both sides. Here one scene fills the view,
       so there is nothing continuing -- and worse, the treatment lands differently depending on
       the shape: a wide clip spans the full 335 and gets its own edges blurred, while a vertical
       is 180 centred in that 335 and the fade falls entirely on empty space beside it. The same
       rule dimming one format and not another is the inconsistency; the fade is what goes,
       because on this breakpoint it was never describing anything. */
    .vg-carousel.vg-more-left  { --fadeL: 0px; }
    .vg-carousel.vg-more-right { --fadeR: 0px; }
    .vg-scene:not(.vg-cur) .vg-scenetitle { visibility: visible; }
    /* A shadow scaled to the clip, not to the desktop one. 0 6px 20px at 30% black is a lift
       under a 764px clip; under a 335px one the same blur is a dark halo running a tenth of the
       way into the picture on every side. Both selectors, because the even-mode rule above is
       (0,3,0) and would otherwise win. */
    .vg-even .vg-scene video, .vg-even .vg-scenevid > img,
    .vg-even .vg-scene.vg-cur video { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22); }
}

/* ── Contact Us dialog ────────────────────────────────────────────────────
   js/mvmsrc/contactus.js, opened from the header, footer and several pages. Redesigned 2026-09-16 to
   match the redesigned pages: a deep teal header card with the mark, Poppins labels, roomy rounded
   fields with a teal focus ring, and errors shown beside the field they belong to. Inputs are 16px so
   iOS Safari does not zoom the page when one is focused. */
.cu { max-width: 440px; width: 100%; margin: 0 auto; padding: 2px 4px 0; box-sizing: border-box; text-align: left;
      font-family: 'Open Sans', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; color: #2f3437; white-space: normal; }
.cu-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 12px;
           background: #0e3b45; color: #fff; }
.cu-mark { flex: 0 0 44px; width: 44px; height: 44px; display: block; }
.cu-title { font-family: Poppins, sans-serif; font-weight: bold; font-size: 18px; line-height: 1.25; color: #fff; }
.cu-sub { margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.cu-field { margin: 0 0 14px; }
.cu-label { display: block; margin: 0 0 6px; font-family: Poppins, sans-serif; font-weight: bold; font-size: 13px; color: #2f3437; }
.cu .cu-input { display: block; width: 100%; min-height: 46px; box-sizing: border-box; margin: 0; padding: 10px 13px;
                font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; color: #2f3437;
                background: #fff; border: 1px solid #cfdde1; border-radius: 10px; outline: none; box-shadow: none;
                -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; }
.cu textarea.cu-input { min-height: 132px; resize: vertical; }
.cu .cu-input::placeholder { color: #8a949a; opacity: 1; }
.cu .cu-input:focus { border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26, 107, 122, .18); }
.cu .cu-bad .cu-input { border-color: #c9483b; box-shadow: 0 0 0 3px rgba(201, 72, 59, .14); }
.cu-err { margin-top: 5px; font-size: 13px; line-height: 1.4; color: #b83c30; }
.cu-err:empty { display: none; }
@media (max-width: 480px) {
    .cu-head { padding: 14px; gap: 12px; }
    .cu-title { font-size: 17px; }
}
/* ── end Contact Us dialog */

/* ── Site design kit ──────────────────────────────────────────────────────
   Shared by the redesigned pages (moved out of index.php 2026-09-16 so the tool, ad and help pages can
   use them): the soft feature panel (.splashsection.hm-pro), pill buttons (.hm-btn*), the closing band
   (#cta), the blog row (.hm-blog), the FAQ (.hm-faq) and the use-case section (.hm-uses). */
/* The first feature section as a soft panel with the editor's Shutter Grid pulsing inside it in pale
   brand colors -- see heroFxScript(..., "shutter", "#pro"). */
.splashsection.hm-pro { background: #f6fafb; border-radius: 24px; padding: 48px 40px; box-sizing: border-box; }
/* .splashlearnmore is min-height:100vh -- the home page fills the screen with a stack of panels. The
   redesigned pages carry one or two, so the wrapper was reserving a whole screen and leaving ~230px
   of white under a single short panel. The panels bring their own height here. */
.splashlearnmore.hm-panels { min-height: 0; }
@media (max-width: 700px) { .splashsection.hm-pro { padding: 28px 18px; border-radius: 16px; } }
/* Side by side, the video is centered on the text's height instead of hanging from the top. The
   columns are floats in mov.css; as flex items the floats are ignored, so the image-on-the-left
   section (#aifeature, text first in the source) moves its image back with order. At 960px and
   below mov.css stacks them, so this stays out of that range. */
@media (min-width: 961px) {
    .splashsection.hm-pro { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .hm-pro .splashimgleft { order: -1; }
}
/* The text block carries the panel's own color, so the pulses pass behind it rather than under the
   words. Padded out and pulled back by the same amount, so the text stays exactly where it was. */
.hm-pro .splashtbltext { background: #f6fafb; border-radius: 16px; padding: 18px 22px; margin: -18px -22px; }
/* ── Buttons ───────────────────────────────────────────────────────────────
   Pill buttons in the site's action orange, with a teal outline as the second choice. Replaces the
   square .splashbutton pair, whose second button carried a purple-to-blue gradient over an orange
   border that matched nothing else on the page. */
.hm-btnrow { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hm-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; border: 2px solid #fc4a1a;
          background: #fc4a1a; color: #fff; font-family: Poppins, sans-serif; font-weight: 600; font-size: 15.5px;
          line-height: 1.2; text-decoration: none; box-shadow: 0 6px 16px rgba(252, 74, 26, .22);
          transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.hm-btn:hover { background: #e33d0f; border-color: #e33d0f; color: #fff; text-decoration: none;
                transform: translateY(-1px); box-shadow: 0 8px 20px rgba(252, 74, 26, .3); }
.hm-btn-alt { background: #fff; color: #1a6b7a; border-color: #1a6b7a; box-shadow: none; }
.hm-btn-alt:hover { background: #1a6b7a; border-color: #1a6b7a; color: #fff; box-shadow: 0 8px 20px rgba(26, 107, 122, .25); }
/* On a colored band: white with teal text. */
.hm-btn-light { background: #fff; color: #1a6b7a; border-color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.hm-btn-light:hover { background: #e8f6f8; border-color: #e8f6f8; color: #1a6b7a; box-shadow: 0 8px 20px rgba(0, 0, 0, .24); }
/* On a colored band, the second choice: an outline in white. */
.hm-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); box-shadow: none; }
.hm-btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; box-shadow: none; }
.hm-btn:focus-visible { outline: 3px solid rgba(252, 74, 26, .45); outline-offset: 2px; }
@media (max-width: 620px) { .hm-btnrow { justify-content: center; } }
/* ── Closing band ─────────────────────────────────────────────────────────
   mov.css's .greentored runs #06beb6 to #fc4a1a, where white body text measured 2.3:1 at the teal
   end and under 4.5:1 across most of the band. Deeper ends, joined through a plum rather than
   straight across (teal to orange directly turns muddy brown in the middle), keep every point of the
   band at 5.6:1 or better, and at 4.8:1 or better under a passing ray. Scoped to #cta: .greentored
   is used on other pages. */
/* Starts in plum, not teal (2026-09-17): the teal end sat right on the dark teal footer and the two read as one block. */
#cta.greentored { background: linear-gradient(73deg, #3a1a52 0%, #763b69 50%, #b93b17 100%); }
#cta .hm-btnrow { justify-content: center; margin: 24px 0 22px; }
/* One thought per paragraph, each balanced across its lines, so no line ends on a lone word. */
#cta h2, #cta .hm-cta-p { text-wrap: balance; }
/* At 28px "Free for Commercial Use," is 360px on a 375px phone and broke into three lines; at 26px
   the headline sits on two. The band's phone padding, 10px in mov.css, goes to the page's 16px. */
@media (max-width: 600px) {
    #cta.greentored { padding-left: 16px; padding-right: 16px; }
    #cta h2 { font-size: 26px; }
}
#cta .hm-cta-p { max-width: 760px; margin: 0 auto; }
#cta .hm-cta-p + .hm-cta-p { margin-top: 12px; }
/* ── Blog row ─────────────────────────────────────────────────────────────
   Four across on a desktop, two on a tablet, a sideways scroller on a phone. */
.hm-blog { background: #fff; padding: 70px 20px 20px; text-align: center; }
.hm-blog h2 { font-size: clamp(24px, 3.6vw, 34px); color: #222; margin: 0 0 12px; letter-spacing: -0.01em; }
.hm-blog-lead { max-width: 720px; margin: 0 auto 44px; font-size: 16.5px; line-height: 1.6; color: #555; }
.hm-blog-lead a { color: #fc4a1a; }
/* minmax(0, 1fr), not 1fr: a column's minimum is otherwise its content's, and the one-line excerpt is
   white-space: nowrap, so every column stretched to the full length of its sentence. */
/* Three across on a desktop: at four, each card was 292px and cut its title and excerpt to a few words.
   The query still takes four, for the tablet's two-by-two and the phone's scroller. */
.hm-blog-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1180px; margin: 0 auto; text-align: left; }
.hm-post { display: block; color: inherit; text-decoration: none; min-width: 0; }
/* Sparkles pass behind the heading and the cards, never behind words: both are white like the section,
   the heading padded out and pulled back so nothing moves, the cards edged with a thin border. */
.hm-blog-head { display: inline-block; background: #fff; border-radius: 16px; padding: 8px 24px; margin: -8px -24px 0; max-width: 780px; }
.hm-blog .hm-post { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #dde8eb; transition: border-color .2s; }
.hm-blog .hm-post:hover { border-color: #9fc9d1; }
.hm-post-body { padding: 2px 22px 20px; }
@media (min-width: 961px) { .hm-blog-row .hm-post:nth-child(n+4) { display: none; } }
.hm-post-img { aspect-ratio: 16 / 9; overflow: hidden; background: #eef3f4; }
.hm-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.hm-post:hover .hm-post-img img { transform: scale(1.04); }
.hm-post h3 { font-family: Poppins, sans-serif; font-size: 17.5px; line-height: 1.4; color: #222; margin: 18px 0 8px;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-post:hover h3 { color: #1a6b7a; }
.hm-post-ex { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: #555;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-post-meta { font-size: 13px; color: #8a8f91; }
.hm-blog-more { margin-top: 44px; }
@media (max-width: 960px) { .hm-blog-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 700px) {
    .hm-blog { padding-top: 48px; }
    .hm-blog-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 -16px;
                   padding: 4px 16px 20px; scroll-padding: 0 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .hm-blog-row::-webkit-scrollbar { display: none; }
    .hm-post { flex: 0 0 78%; scroll-snap-align: start; }
}
/* ── FAQ ─────────────────────────────────────────────────────────────────
   Native <details>: opens without script, keyboard-accessible, and the answers stay in the HTML. */
.hm-faq { background: #fff; padding: 60px 20px 80px; }
.hm-faq h2 { font-size: clamp(24px, 3.6vw, 34px); color: #222; text-align: center; margin: 0 0 28px; letter-spacing: -0.01em; }
.hm-faq-list { max-width: 820px; margin: 0 auto; text-align: left; }
.hm-faq-item { border-bottom: 1px solid #e3edf0; }
.hm-faq-item summary { cursor: pointer; list-style: none; position: relative; padding: 18px 40px 18px 0;
                       font-family: Poppins, sans-serif; font-weight: 600; font-size: 17px; color: #222; }
.hm-faq-item summary::-webkit-details-marker { display: none; }
.hm-faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
                              font-size: 24px; font-weight: 400; color: #1a6b7a; }
.hm-faq-item[open] summary::after { content: "\2212"; }
.hm-faq-item summary:hover { color: #1a6b7a; }
.hm-faq-item p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: #555; }
/* ── Use cases ───────────────────────────────────────────────────────────
   Two columns of plain entries with hairline rules, on a deep teal ground with slow Balloons behind. */
/* Deep purple on the logo's hue (#b733f7, 281 degrees) rather than the page's teal -- darkened so the
   text panel and balloons read -- setting this section apart from the teal hero above. */
.hm-uses { margin-top: 90px; padding: 84px 20px 88px; text-align: center; color: #fff;
           background: linear-gradient(135deg, #250733 0%, #420c5b 55%, #601284 100%); }
.hm-uses h2 { color: #fff; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.01em; margin: 0 0 12px;
              text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.hm-uses-lead { max-width: 660px; margin: 0 auto 44px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.84); }
/* One frosted panel behind the whole list rather than a box per entry: the balloons stay visible
   around it and faintly through it, but the text sits on a steady dark ground instead of whatever
   happens to be drifting past. */
.hm-uses-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; max-width: 1000px; margin: 0 auto; text-align: left;
                box-sizing: border-box; padding: 10px 44px 18px; border-radius: 18px;
                background: rgba(28, 6, 40, 0.78); border: 1px solid rgba(255,255,255,.1);
                -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
                box-shadow: 0 16px 44px rgba(0,0,0,.28); }
.hm-use:nth-child(-n+2) { border-top: 0; }
.hm-use { padding: 22px 0 24px; border-top: 1px solid rgba(255,255,255,.18); }
.hm-use h3 { font-family: Poppins, sans-serif; font-size: 20px; margin: 0 0 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.hm-use p { margin: 0; font-size: 15.5px; line-height: 1.62; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.hm-use a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 2px; }
.hm-use a:hover { text-decoration-color: #fff; }
@media (max-width: 700px) {
    .hm-uses { padding: 60px 16px 64px; }
    .hm-uses-list { grid-template-columns: 1fr; padding: 6px 22px 12px; }
    .hm-use:nth-child(2) { border-top: 1px solid rgba(255,255,255,.18); }
}
/* Landing hero for the tool and ad pages (includes/sitekit.php): the home page's teal hero with a lead
   line, trust chips and buttons above the example strip. */
/* Deeper than the home hero's #1a6b7a/#3cb3c7/#2196a0: this hero carries a paragraph and chips, not just a
   headline, and white body text on the light middle of that gradient measured ~3:1. At these stops the lead
   measures ~5.4:1 median behind the moving effects (desktop), the chips ~7.7:1. 2026-09-17. */
.vg-hero.hm-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #0f4f5a 0%, #217f8d 50%, #16707b 100%);
                   padding: 100px 20px 110px; text-align: center; color: #fff; }
.hm-hero .hm-hero-lead { max-width: 760px; margin: -12px auto 18px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: rgba(255,255,255,.94);
                         text-shadow: 0 1px 2px rgba(0,0,0,.18); text-wrap: balance; }
.hm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; padding: 0; list-style: none; }
.hm-chips li { font-family: Poppins, sans-serif; font-weight: bold; font-size: 13px; letter-spacing: .02em; padding: 6px 13px; border-radius: 999px;
               background: rgba(6,40,48,.30); border: 1px solid rgba(255,255,255,.30); color: #fff; }
.hm-hero .hm-btnrow { justify-content: center; margin: 0 0 36px; }
@media (max-width: 620px) { .vg-hero.hm-hero { padding: 92px 16px 64px; } }
/* Numbered steps as soft cards. */
.hm-steps { --acc: #1a6b7a; background: #fff; padding: 70px 20px 60px; text-align: center; }
.hm-steps h2 { font-size: clamp(24px, 3.6vw, 34px); color: #222; margin: 0 0 12px; letter-spacing: -0.01em; }
.hm-steps-lead { max-width: 720px; margin: 0 auto; font-size: 16.5px; line-height: 1.6; }
.hm-steps-list { counter-reset: hmstep; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
                 max-width: 1180px; margin: 34px auto 0; padding: 0; list-style: none; text-align: left; }
/* Six steps: three and three, rather than the five-plus-one auto-fit gives at this width. */
.hm-steps-list.hm-steps-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .hm-steps-list.hm-steps-n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hm-steps-list.hm-steps-n6 { grid-template-columns: minmax(0, 1fr); } }
.hm-step { counter-increment: hmstep; position: relative; background: #f6fafb; border: 1px solid #e3edf0; border-radius: 16px; padding: 60px 22px 20px; }
.hm-step::before { content: counter(hmstep); position: absolute; top: 20px; left: 22px; width: 30px; height: 30px; border-radius: 50%;
                   background: #1a6b7a; color: #fff; font: bold 15px/30px Poppins, sans-serif; text-align: center; }
.hm-step h3 { font-family: Poppins, sans-serif; font-size: 18px; line-height: 1.3; color: var(--acc); margin: 0 0 8px; }
.hm-step p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; }
.hm-steps .hm-btnrow { justify-content: center; margin-top: 30px; }
/* Long-form copy in a readable column. */
.hm-article { background: #fff; padding: 56px 20px 40px; }
.hm-article-body { max-width: 780px; margin: 0 auto; text-align: left; font-size: 17px; line-height: 1.72; }
.hm-article-body h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.2; color: #222; margin: 44px 0 14px; letter-spacing: -0.01em; text-align: left; }
.hm-article-body h2:first-child { margin-top: 0; }
.hm-article-body h3 { font-family: Poppins, sans-serif; font-size: 20px; line-height: 1.3; color: #1a6b7a; margin: 30px 0 10px; }
.hm-article-body p, .hm-article-body li { margin: 0 0 14px; }
.hm-article-body ul, .hm-article-body ol { padding-left: 24px; margin: 0 0 18px; }
.hm-article-body a { color: #e0401a; }
.hm-article-body b, .hm-article-body strong { color: #222; }
@media (max-width: 620px) { .hm-article-body { font-size: 16.5px; } .hm-steps { padding: 52px 16px 44px; } }
/* Native template cards on a landing page (adLandingCards): real links and alt text for crawlers, hover
   to preview. Four across on a desktop, three on a tablet, two on a phone, for every shape. */
.hm-cards { background: #fff; padding: 64px 20px 56px; text-align: center; }
.hm-cards h2 { font-size: clamp(24px, 3.6vw, 34px); color: #222; margin: 0 0 12px; letter-spacing: -0.01em; }
.hm-cards-lead { max-width: 720px; margin: 0 auto 30px; font-size: 16.5px; line-height: 1.6; }
/* .templatelistcont is display:flex sitewide, which made #templatelist a flex item: it shrank to fit its
   content, and the cards' percentage widths then resolved against that shrunken box (four "25%" cards
   came out 213px inside a 1180px grid). Block layout here lets the inner flex row use the full width. */
.hm-cardgrid { max-width: 1180px; margin: 0 auto; display: block; }
.hm-cardgrid #templatelist { display: flex !important; flex-wrap: wrap; gap: 20px; justify-content: center; }
.hm-cardgrid > #templatelist .tempcard { width: calc(25% - 15px); max-width: none; margin: 0; }
.hm-cards-square .tempcardcont:after { padding-top: 100%; }
.hm-cards-square .tempimg { aspect-ratio: 1 / 1; }
.hm-cards-vertical .tempcardcont:after { padding-top: 177.78%; }
.hm-cards-vertical .tempimg { aspect-ratio: 9 / 16; }
.hm-cards .hm-btnrow { justify-content: center; margin-top: 30px; }
@media (max-width: 960px) { .hm-cardgrid > #templatelist .tempcard { width: calc(33.33% - 14px); } }
@media (max-width: 620px) { .hm-cardgrid #templatelist { gap: 12px; } .hm-cardgrid > #templatelist .tempcard { width: calc(50% - 6px); } .hm-cards { padding: 48px 12px 40px; } }
/* Wide cards are short, so four to a row left them smaller than the blog cards below them. Three across
   matches the blog row's rhythm. Capped at 352px: that is the width of the still every template already
   has on Cloudinary, so the card draws it 1:1 and the library needs no new derivation for 1x screens. */
.hm-cards-wide .hm-cardgrid > #templatelist .tempcard { width: calc(33.33% - 14px); max-width: 352px; }
@media (max-width: 960px) { .hm-cards-wide .hm-cardgrid > #templatelist .tempcard { width: calc(50% - 10px); } }
/* Three across, for a section whose set is a multiple of three (the Wavy page has six): at four across
   the last row is a ragged pair. */
.hm-cards-3up .hm-cardgrid > #templatelist .tempcard { width: calc(33.33% - 14px); max-width: 352px; }
@media (max-width: 620px) { .hm-cards-3up .hm-cardgrid > #templatelist .tempcard { width: calc(50% - 6px); } }
/* Vertical cards are tall, so more of them per row: 6 across on a desktop, 4 on a tablet, 3 on a phone. */
.hm-cards-vertical .hm-cardgrid > #templatelist .tempcard { width: calc(16.66% - 17px); }
@media (max-width: 960px) { .hm-cards-vertical .hm-cardgrid > #templatelist .tempcard { width: calc(25% - 15px); } }
@media (max-width: 620px) { .hm-cards-vertical .hm-cardgrid > #templatelist .tempcard { width: calc(33.33% - 8px); } }
/* The card's 20px padding was sized for wide thumbnails; around a 180px vertical card it left the picture 140px
   wide inside a heavy grey frame. Tighter padding, and titles wrap to two lines instead of cutting off. */
.hm-cards .hm-cardgrid > #templatelist .tempcard { padding: 0 0 10px; overflow: hidden; }
.hm-cards .tempcard .tempimg, .hm-cards .tempcard video { border-radius: 0; }
.hm-cards .tempcard .tempcardtitle { padding: 0 8px; }
/* The base title styles only its ::first-line (uppercase, bold, 18px), so a wrapped second line came out small
   and lowercase. Here the whole title carries that style, one size, and the first-line rule is neutralised. */
.hm-cards .tempcard .tempcardtitle { white-space: normal; text-overflow: clip; margin-top: 8px;
        text-transform: uppercase; font-weight: bold !important; font-size: 13px; line-height: 17px; letter-spacing: .03em;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-cards .tempcard .tempcardtitle::first-line { font-size: inherit; line-height: inherit; }
@media (max-width: 620px) { .hm-cards .hm-cardgrid > #templatelist .tempcard { padding: 0 0 8px; }
                            .hm-cards .tempcard .tempcardtitle { font-size: 11px; line-height: 14px; } }
/* The tool pages' one panel ran 752px tall around a 307px clip: the copy (the tool above has already
   made the case) was twice the height of the media beside it. Shortening the copy did most of it;
   widening the media column did nothing, because the clip caps at ~554px and the text column only
   grew taller as it narrowed. So: the original split, less padding. */
.tk-panel.splashsection { padding: 36px 32px; }
/* One line under the tool's title, inside #animuititle so the player's own sizing subtracts it (see
   blobmakerui.js). Small and gray: it is orientation for a first visit, not a pitch -- the tool below
   it is the pitch. */
.tk-lead { max-width: 660px; margin: 4px auto 0; font-size: 15.5px; line-height: 1.5; color: #5a6468; }
@media (max-width: 620px) { .tk-lead { font-size: 13.5px; margin-top: 2px; } }
/* Tool pages (Blob Maker, Wavy Designs): the tool card is the hero, on the teal ground with the header laid
   over it. #animui and #animuititle keep their ids and their own sizing -- blobmakerui.js and
   wavestackmakerui.js size the player from the viewport less the header, the card padding and the title,
   so nothing above the card may add height beyond the header's 60px. Phones lose the side padding because
   the player math assumes the card spans the viewport. */
/* Darker than the shared hero teal (#217f8d in the middle is only 4.7:1 bare, and a pale blob over it
   took the white title to 1.9:1). These three stops are 9.2, 7.2 and 10.3 against white, so the title
   clears 4.5:1 even where the lightest blob crosses it. The card on top gains contrast too. */
.vg-hero.tk-hero { padding: 76px 20px 120px;
                   background: linear-gradient(135deg, #0f4f5a 0%, #146070 50%, #0d4753 100%); }
.tk-hero .animui { position: relative; z-index: 1; box-shadow: 0 18px 50px rgba(8,40,48,.35); border-radius: 18px; margin: 0; }
/* The title and its line sit ON the ground now, above the card, the way every other page's hero does
   (owner, 2026-09-17). blobmakerui.js sizes the player from the viewport less #animuititle's height
   and finds it by id, not by position, so moving it out of .animui costs the player exactly what it
   costs the page and nothing overflows -- no change to the tool's JS. */
.tk-hero #animuititle { margin: 0 auto 18px; max-width: 900px; padding: 0 16px; }
.tk-hero #animuititle h1 { color: #fff !important; margin: 0 0 6px; }
.tk-hero #animuititle .tk-lead { color: rgba(255,255,255,.92); margin: 0 auto; }
.tk-hero .hm-chips { margin: 26px auto 0; }
@media (max-width: 620px) { .vg-hero.tk-hero { padding: 66px 0 60px; } .tk-hero .animui { border-radius: 12px; margin: 0 5px; padding-bottom: 12px; box-shadow: none; }
                            .tk-hero .hm-chips { padding: 0 16px; } }
/* The effects' base rules, also in herofx.php's heroFxHeadStyle(): pages without the transparent header
   (and so without that block) still use kit sections with animated backgrounds. */
.hfx-host { position: relative; overflow: hidden; }
.hfx-host > *:not(.hfx-canvas) { position: relative; z-index: 1; }
.hfx-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
/* Help center (includes/helpcenter.php). A shorter teal band than the landing hero, a searchable topic grid on
   the hub, and on an article a sticky topic list beside a readable column. */
.vg-hero.hm-hero.hc-band { padding: 96px 20px 100px; }
.hc-band h1.vg-hoisted { margin-bottom: 16px; }
#centercontent .hc-band h1.vg-hoisted { font-size: clamp(28px, 4vw, 48px); }
.hc-band .hm-hero-lead { margin-top: 0; }
.hc-crumbs { font-size: 14.5px; margin: 0 auto 12px; color: rgba(255,255,255,.9); }
.hc-crumbs a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); }
.hc-crumbs span { margin: 0 8px; }
.hc-search { position: relative; max-width: 620px; margin: 8px auto 12px; }
.hc-search i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #5f6b70; font-size: 17px; }
.hc-search input { width: 100%; box-sizing: border-box; height: 56px; border: 0; border-radius: 999px; padding: 0 22px 0 52px; font: 500 17px 'Open Sans', sans-serif;
                   color: #2f3437; background: #fff; box-shadow: 0 10px 30px rgba(8,40,48,.25); outline: none; -webkit-appearance: none; }
.hc-search input:focus { box-shadow: 0 10px 30px rgba(8,40,48,.25), 0 0 0 3px rgba(247,183,51,.85); }
.hc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hc-hub { background: #fff; padding: 56px 20px 30px; }
.hc-noresults { text-align: center; font-size: 17px; margin: 0 0 30px; }
.hc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 20px; max-width: 1180px; margin: 0 auto; text-align: left; }
.hc-cat { background: #f6fafb; border: 1px solid #e3edf0; border-radius: 16px; padding: 22px 24px 14px; }
.hc-cat[hidden], .hc-cat li[hidden] { display: none; }
.hc-cat-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.hc-cat-head i { flex: none; width: 42px; height: 42px; border-radius: 12px; background: #1a6b7a; color: #fff; font-size: 18px; line-height: 42px; text-align: center; }
.hc-cat h2 { font-size: 19px; line-height: 1.3; color: #222; margin: 0 0 4px; text-align: left; }
.hc-cat-head p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.hc-cat ul { list-style: none; margin: 0; padding: 0; }
.hc-cat li { border-top: 1px solid #e3edf0; }
.hc-cat li a { display: block; padding: 10px 2px; color: #1a6b7a; font-weight: 600; font-size: 15.5px; text-decoration: none; }
.hc-cat li a:hover { color: #e0401a; }
.hc-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 56px; max-width: 1180px; margin: 0 auto; padding: 52px 20px 40px; align-items: start; }
.hc-nav { text-align: left; position: sticky; top: 20px; font-size: 15px; max-height: calc(100vh - 40px); overflow: auto; }
.hc-nav details { border-bottom: 1px solid #e3edf0; }
.hc-nav summary { cursor: pointer; padding: 11px 0; font: bold 15px Poppins, sans-serif; color: #222; list-style: none; }
.hc-nav summary::-webkit-details-marker { display: none; }
.hc-nav summary::after { content: '+'; float: right; color: #1a6b7a; }
.hc-nav details[open] summary::after { content: '\2013'; }
.hc-nav ul { list-style: none; margin: 0 0 10px; padding: 0; }
.hc-nav li a { display: block; padding: 6px 10px; border-radius: 8px; color: #3d474b; text-decoration: none; line-height: 1.4; }
.hc-nav li a:hover { background: #f0f6f7; }
.hc-nav li a[aria-current] { background: #e4f1f3; color: #1a6b7a; font-weight: 600; }
.hc-article { max-width: 780px; margin: 0; }
.hc-article .hc-video { margin: 0 0 28px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.12); background: #1e272e; }
.hc-clip { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #1e272e; }
.helpcontent .hc-clip { margin: 8px 0 18px; border-radius: 10px; }
.hc-article img { max-width: 100%; height: auto; border-radius: 10px; }
.hc-article .hc-shot { margin: 18px 0 24px; border: 1px solid #e3edf0; }
.hc-article ol { padding-left: 26px; }
.hc-article .hc-tip { background: #f6fafb; border-left: 4px solid #4abdac; border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 18px 0; }
.hc-article kbd { font: 600 13px/1 Menlo, Consolas, monospace; background: #f2f4f5; border: 1px solid #d5dbde; border-bottom-width: 2px; border-radius: 5px; padding: 2px 6px; }
.hc-pager { display: flex; justify-content: space-between; gap: 16px; margin: 40px 0 0; padding-top: 24px; border-top: 1px solid #e3edf0; }
.hc-pager a { display: block; max-width: 48%; padding: 12px 16px; border: 1px solid #e3edf0; border-radius: 12px; color: #1a6b7a; font-weight: 600; text-decoration: none; line-height: 1.35; }
.hc-pager a span { display: block; font-size: 13px; font-weight: 500; color: #5f6b70; margin-bottom: 2px; }
.hc-pager a:hover { border-color: #4abdac; }
.hc-next { text-align: right; margin-left: auto; }
.hc-related { margin-top: 36px; }
.hc-related h2 { font-size: 22px !important; margin: 0 0 12px !important; }
.hc-related ul { list-style: none; padding: 0 !important; }
.hc-related li { margin: 0 0 12px; }
.hc-related li a { font-weight: 600; }
.hc-related li span { display: block; font-size: 15px; line-height: 1.5; color: #5f6b70; }
@media (max-width: 900px) { .hc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 36px; }
                            .hc-nav { position: static; max-height: none; order: 2; margin-top: 40px; } }
@media (max-width: 620px) { .vg-hero.hm-hero.hc-band { padding: 84px 16px 64px; } .hc-hub { padding: 40px 12px 20px; } .hc-cat { padding: 18px 16px 10px; }
                            .hc-search input { height: 50px; font-size: 16px; } .hc-pager { flex-direction: column; } .hc-pager a { max-width: none; } }
/* The same articles inside the editors' HELP dialog (help/helpcontent.php); .helpcontent sets the dialog's own 18px/200%. */
.helpcontent .hc-dialog { max-width: none; font-size: 16px; line-height: 1.65; padding-bottom: 20px; }
.helpcontent .hc-dialog h2 { margin-top: 6px; }
.helpcontent .hc-dialog h3 { font-size: 17px; }
.hc-video-head { margin-top: 38px !important; }
.hc-dialog-crumbs { font-size: 14px; }
.hc-dialog-contact { margin-top: 28px !important; padding-top: 16px; border-top: 1px solid #e3edf0; }
/* The note the dialog shows when it was opened from the image editor (help/helpcontent.php): these
   guides are written from the video editor, and it says so rather than pretending otherwise. */
.hc-dialog-note { background: #f1f7f8; border-left: 3px solid #1a6b7a; border-radius: 0 8px 8px 0;
                  padding: 12px 14px; margin: 0 0 18px !important; font-size: 15px; line-height: 1.5; color: #2f3437; }
/* One help set for two editors (help/helpdata.php). An article marks what belongs to one editor alone:
   .hc-only is the inline parenthetical for a sentence, a bullet or a heading, .hc-note the block call-out
   where a whole section differs, in .hc-dialog-note's treatment. .hc-forvideo / .hc-forimage say which editor it
   is about. helpcontent.php adds .hc-in-image to the dialog when it was opened from /appimage/: that reader
   is the one an unmarked video-only line would mislead, so there the video-only markers stop being
   footnotes and turn the site's orange. Everywhere else they stay quiet labels. */
.hc-article .hc-only { font-size: .86em; font-weight: 600; color: #6b7479; white-space: nowrap; }
.hc-article .hc-only::before { content: "("; }
.hc-article .hc-only::after { content: ")"; }
.hc-article h2 .hc-only, .hc-article h3 .hc-only { font-weight: 600; vertical-align: middle; }
.hc-article .hc-note { background: #f1f7f8; border-left: 3px solid #1a6b7a; border-radius: 0 8px 8px 0;
                       padding: 12px 16px; margin: 18px 0; font-size: 15.5px; line-height: 1.55; color: #2f3437; }
.hc-article .hc-note b:first-child { color: #1a6b7a; }
.hc-in-image .hc-only.hc-forvideo { color: #c33a12; }
.hc-in-image .hc-note.hc-forvideo { background: #fdf4f1; border-left-color: #e0401a; }
.hc-in-image .hc-note.hc-forvideo b:first-child { color: #c33a12; }
/* The link to the help clips' YouTube playlist ($HELP_PLAYLIST): a line under the hub's topic cards, and a
   small link tucked under each article's clip, on the site and in the editors' dialog. */
.hc-yt { max-width: 1180px; margin: 30px auto 0; text-align: center; font-size: 16.5px; color: #3d474b; }
.hc-yt i, .hc-yt-more i { color: #e62117; margin-right: 8px; }
.hc-yt a { font-weight: 600; }
.hc-article .hc-yt-more { margin: -14px 0 28px !important; font-size: 15px; }
.helpcontent .hc-yt-more { margin: -6px 0 18px !important; }
/* Hero grounds for pages that use a different herofx effect (includes/adlanding.php "hero" => class). Each
   keeps white lead text at 4.5:1 or better behind its effect. Plum + balloons: lead ~11.6:1 median. */
.vg-hero.hm-hero.hmh-plum   { background: linear-gradient(135deg, #2e1447 0%, #5e2466 50%, #862f55 100%); }
.vg-hero.hm-hero.hmh-indigo { background: linear-gradient(135deg, #1b1a4a 0%, #342a73 50%, #3f2f86 100%); }
.vg-hero.hm-hero.hmh-navy   { background: linear-gradient(135deg, #0c1c38 0%, #14315e 50%, #1d4a7a 100%); }
.vg-hero.hm-hero.hmh-teal   { background: linear-gradient(135deg, #07272e 0%, #0e3b45 50%, #155a63 100%); }
/* White kit sections that follow another white one: both paddings stacked to ~124px between the steps' button
   and the next heading, against 70px above the steps' own heading. Drop the second section's top padding so
   the gap matches. */
.hm-steps + .hm-cards, .hm-steps + .hm-article, .hm-cards + .hm-article, .hm-article + .hm-cards,
.hm-article + .hm-steps { padding-top: 10px; }
/* The designed guide (siteKitArticle(..., "hm-guide")): a wider column, the "why" beside stat cards, tips as icon
   cards, and a callout. Text stays real h2/h3/h4/p/ul for search engines. */
.hm-article.hm-guide { background: #f6f8fa; padding: 64px 20px 64px;
                       --acc: #5e2466; --acc-soft: #f3e8f4; --acc-tint: #faf6fb; --acc-grad: linear-gradient(135deg, #2e1447 0%, #5e2466 55%, #862f55 100%); }
/* The accent palettes, as classes any section can carry (the guide, the steps). A section without one keeps
   whatever its own rule sets: plum for a guide, the site's teal for the steps. */
.hmg-plum, .hm-article.hm-guide.hmg-plum { --acc: #5e2466; --acc-soft: #f3e8f4; --acc-tint: #faf6fb; --acc-grad: linear-gradient(135deg, #2e1447 0%, #5e2466 55%, #862f55 100%); }
.hmg-navy, .hm-article.hm-guide.hmg-navy { --acc: #14457a; --acc-soft: #e3ecf7; --acc-tint: #f4f8fc; --acc-grad: linear-gradient(135deg, #0c1c38 0%, #14315e 55%, #1d4a7a 100%); }
.hmg-teal, .hm-article.hm-guide.hmg-teal { --acc: #12626f; --acc-soft: #e0f1f2; --acc-tint: #f3fafa; --acc-grad: linear-gradient(135deg, #07272e 0%, #0e3b45 55%, #16636b 100%); }
.hmg-indigo, .hm-article.hm-guide.hmg-indigo { --acc: #3f2f86; --acc-soft: #e9e6f7; --acc-tint: #f6f5fc; --acc-grad: linear-gradient(135deg, #1b1a4a 0%, #342a73 55%, #4a3a99 100%); }
.hm-guide .hm-article-body { max-width: 1120px; }
/* The article body's h3 is the site's teal; inside a guide it has to follow the page's accent, or a
   plum/indigo section is headed in the colour of a different palette. */
.hm-guide .hm-article-body h3 { color: var(--acc); }
.hm-guide .hm-article-body > h2 { text-align: center; margin: 0 0 34px; }
.hm-guide-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.hm-guide-text h3 { margin-top: 0; }
.hm-stats { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 14px; }
.hm-stat { margin: 0 !important; background: #fff; border: 1px solid #e3e9ee; border-radius: 16px; padding: 18px 22px; display: grid;
           grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; box-shadow: 0 6px 18px rgba(20, 40, 60, .05); }
.hm-stat-num { grid-row: span 2; font: bold 34px/1 Poppins, sans-serif; color: var(--acc); min-width: 88px; }
.hm-stat-label { font-size: 16px; line-height: 1.4; color: #2f3437; font-weight: 600; }
.hm-stat-src { font-size: 12.5px; color: #6b7479; margin-top: 2px; }
.hm-guide-sub { text-align: center; margin: 58px 0 24px !important; font-size: 24px !important; color: #222 !important; }
.hm-tips { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-tip { margin: 0 !important; background: #fff; border: 1px solid #e3e9ee; border-radius: 16px; padding: 22px 22px 18px; }
.hm-tip i { width: 42px; height: 42px; border-radius: 12px; background: var(--acc-soft); color: var(--acc); font-size: 18px; line-height: 42px; text-align: center; }
.hm-tip h4 { font: bold 17px/1.3 Poppins, sans-serif; color: #222; margin: 14px 0 6px; }
.hm-tip p { font-size: 15.5px; line-height: 1.6; margin: 0; }
.hm-callout { margin-top: 44px; border-radius: 20px; padding: 32px 36px; color: #fff; text-align: center;
              background: var(--acc-grad); }
.hm-callout h3 { color: #fff !important; margin: 0 0 10px !important; font-size: 24px !important; }
.hm-callout p { max-width: 720px; margin: 0 auto 18px !important; color: rgba(255,255,255,.94); }
.hm-callout .hm-btnrow { justify-content: center; margin: 0 auto !important; }
.hm-article-body .hm-callout a.hm-btn { color: #fff; }
.hm-article-body .hm-callout a.hm-btn.hm-btn-light, .hm-article-body .hm-callout a.hm-btn.hm-btn-light:hover { color: var(--acc); }
.hm-cards + .hm-article.hm-guide, .hm-steps + .hm-article.hm-guide { padding-top: 64px; }
@media (max-width: 900px) { .hm-guide-intro { grid-template-columns: minmax(0, 1fr); gap: 26px; } .hm-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .hm-article.hm-guide { padding: 48px 16px; } .hm-tips { grid-template-columns: minmax(0, 1fr); gap: 10px; }
                            .hm-tip { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
                            .hm-tip i { width: 36px; height: 36px; line-height: 36px; font-size: 15px; border-radius: 10px; }
                            .hm-tip h4 { margin: 0 0 4px; align-self: center; font-size: 16px; }
                            .hm-tip p { grid-column: 2; font-size: 15px; }
                            .hm-stat-num { font-size: 28px; min-width: 70px; } .hm-callout { padding: 26px 20px; } }
/* Specs table inside the designed guide. Scrolls sideways on its own on a narrow phone rather than widening the page. */
.hm-specs-wrap { overflow-x: auto; background: #fff; border: 1px solid #e3e9ee; border-radius: 16px; }
.hm-specs { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; min-width: 560px; }
.hm-specs th, .hm-specs td { text-align: left; padding: 14px 18px; border-bottom: 1px solid #edf1f4; vertical-align: top; }
.hm-specs thead th { font: bold 13px Poppins, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--acc); background: var(--acc-tint); }
.hm-specs tbody th { font-weight: 700; color: #222; white-space: nowrap; }
.hm-specs tbody tr:last-child th, .hm-specs tbody tr:last-child td { border-bottom: 0; }
.hm-specs-note { font-size: 15px; margin: 14px 4px 0 !important; color: #3d474b; }
@media (max-width: 620px) {
  .hm-specs-wrap { overflow: visible; background: none; border: 0; }
  .hm-specs { min-width: 0; font-size: 15px; }
  .hm-specs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hm-specs, .hm-specs tbody, .hm-specs tr, .hm-specs th, .hm-specs td { display: block; }
  .hm-specs tbody tr { background: #fff; border: 1px solid #e3e9ee; border-radius: 14px; padding: 12px 16px; margin: 0 0 10px; }
  .hm-specs tbody th { padding: 0 0 6px; border: 0; font: bold 17px Poppins, sans-serif; color: var(--acc); }
  .hm-specs td { padding: 6px 0; border: 0; border-top: 1px solid #edf1f4; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .hm-specs td::before { content: attr(data-label); font-size: 12.5px; font-weight: 700; color: #6b7479; text-transform: uppercase; letter-spacing: .03em; padding-top: 2px; }
}
#cta .hm-cta-contact { margin-top: 34px; }
#cta .hm-btnrow-contact { margin: 16px 0 18px; }
/* ── end site design kit */

/* The library's own card grids -- /templates/ and its facets (#alltemplatescontent) and the "Related
   templates" row on every template page (.ntrelated) -- in the card format agreed on the landing pages
   (2026-09-17/18): the picture edge to edge instead of inside a 20px grey frame, and a bold uppercase name
   that wraps to two lines rather than cutting off. The library keeps the category line under the name
   ("Black Friday Video Ad"), which the landing pages dropped: there every card was an ad and the line said
   nothing, but the library mixes everything and the category is how a card is told apart. Scoped by
   container rather than by adding .hm-cards, which also brings landing-page section padding and headings. */
#alltemplatescontent .tempcard, .ntrelated .tempcard { padding: 0 0 10px; overflow: hidden; }
#alltemplatescontent .tempcard .tempimg, #alltemplatescontent .tempcard video,
.ntrelated .tempcard .tempimg, .ntrelated .tempcard video { border-radius: 0; }
#alltemplatescontent .tempcard .tempcardtitle, .ntrelated .tempcard .tempcardtitle {
        white-space: normal; text-overflow: clip; overflow: hidden; padding: 0 10px; margin-top: 8px;
        font-size: 13px; line-height: 17px; }
#alltemplatescontent .tempcard .tempcardtitle::first-line,
.ntrelated .tempcard .tempcardtitle::first-line { font-size: inherit; line-height: inherit; text-transform: none; font-weight: inherit; }
/* The name: bold, uppercase, up to two lines. */
.tempcardtitle .tcname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        text-transform: uppercase; font-weight: 700; letter-spacing: .03em; color: #2f3437; }
/* The category: one quiet line under it. */
.tempcardtitle .tccat { display: block; margin-top: 3px; font-size: 12.5px; line-height: 16px; font-weight: 500;
        color: #6b7479; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The related row is title-only (no category), so its heading is the name itself. */
.ntrelated .tempcard .tempcardtitle { text-transform: uppercase; font-weight: 700 !important; letter-spacing: .03em;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
@media (max-width: 620px) {
        #alltemplatescontent .tempcard, .ntrelated .tempcard { padding: 0 0 8px; }
        #alltemplatescontent .tempcard .tempcardtitle, .ntrelated .tempcard .tempcardtitle { font-size: 11px; line-height: 14px; padding: 0 8px; }
        .tempcardtitle .tccat { font-size: 11px; line-height: 14px; } }


/* ── Your projects (/projects/, projects.php behind the dev cookie) ─────────────────────────────
   Cards on the site's rounded-card design, color coded by project type with the same pair the editors are
   edged in (.ved-video / .ved-image above): the AI video page's teal and the AI image page's indigo.
   .project is kept on every card because loadMoreProjects() counts them. 2026-09-19. */
.pj-page { --pj-video: #3cb3c7; --pj-video-deep: #1a6b7a; --pj-video-tint: #e1f4f7;
           --pj-image: #3c5bc7; --pj-image-deep: #1a3a6b; --pj-image-tint: #e8edfa;
           max-width: 1280px; margin: 0 auto; padding: 36px 20px 64px; box-sizing: border-box; font-family: Poppins, sans-serif; text-align: left; }
.pj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.pj-head h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; color: #0e3b45; letter-spacing: -0.01em; }
.pj-legend { margin: 8px 0 0; font-size: 13.5px; color: #55707a; }
.pj-legend .pj-type + .pj-type, .pj-legend .pj-type:not(:first-child) { margin-left: 12px; }
.pj-new { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: #fc4a1a; color: #fff !important;
          font-weight: 600; font-size: 15px; text-decoration: none !important; transition: background-color .15s; }
.pj-new:hover { background: #e33d0f; }
.pj-new:focus-visible { outline: 3px solid rgba(252,74,26,.45); outline-offset: 2px; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.pj-grid .project { display: block; width: auto; max-width: none; padding: 0; }
.pj-card { --pj-edge: var(--pj-video); --pj-deep: var(--pj-video-deep); --pj-tint: var(--pj-video-tint);
           position: relative; background: #fff; border: 1px solid #e2ecef; border-top: 4px solid var(--pj-edge); border-radius: 16px;
           transition: box-shadow .18s, transform .18s, border-color .18s; }
.pj-card.pj-image { --pj-edge: var(--pj-image); --pj-deep: var(--pj-image-deep); --pj-tint: var(--pj-image-tint); }
.pj-card:hover { box-shadow: 0 12px 28px rgba(14,59,69,.13); transform: translateY(-2px); border-color: var(--pj-edge); }
.pj-card:hover, .pj-card:focus-within { z-index: 3; } /* the hover lift makes each card its own layer, so an open menu slid under the next row */
.pj-thumb { display: block; aspect-ratio: 16 / 9; margin: 10px 10px 0; border-radius: 10px; overflow: hidden; background: var(--pj-tint); }
.pj-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pj-body { display: flex; align-items: center; gap: 6px; padding: 12px 8px 14px 16px; }
.pj-text { flex: 1; min-width: 0; }
.pj-title { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: #0e3b45 !important; text-decoration: none !important; }
.pj-title:hover { color: var(--pj-deep) !important; text-decoration: underline !important; }
.pj-meta { margin-top: 5px; font-size: 12.5px; color: #7a9299; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-type { display: inline-block; margin-right: 8px; padding: 0 9px; border-radius: 999px; font: 500 11.5px/20px Poppins, sans-serif; letter-spacing: .02em; vertical-align: 1px; }
.pj-type.pj-video { background: var(--pj-video-tint, #e1f4f7); color: var(--pj-video-deep, #1a6b7a); }
.pj-type.pj-image { background: var(--pj-image-tint, #e8edfa); color: var(--pj-image-deep, #1a3a6b); }
.pj-menu.inline-dropdown { flex: none; width: 38px; height: 38px; border-radius: 50%; text-align: center; font-size: 18px; line-height: 38px; color: #7a9299;
                           cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s; }
.pj-menu.inline-dropdown:hover { background: #eef5f6; color: #0e3b45; }
.pj-menulist.inline-dropdown-content { right: -4px; top: 40px; min-width: 170px; padding: 6px; border-radius: 12px; border: 1px solid #e2ecef;
                                       background: #fff; box-shadow: 0 12px 28px rgba(14,59,69,.16); line-height: normal; text-align: left; z-index: 5; }
.pj-menulist .usermenu { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font: 500 14px Poppins, sans-serif; color: #0e3b45; }
.pj-menulist .usermenu i { width: 16px; text-align: center; color: #7a9299; }
.pj-menulist .usermenu:hover { background: #eef5f6; text-decoration: none; }
.pj-menulist .pj-danger, .pj-menulist .pj-danger i { color: #c0392b; }
.pj-menulist .pj-danger:hover { background: #fdecea; }
.pj-more { display: flex !important; align-items: center; justify-content: center; min-height: 140px; }
.pj-morebtn { padding: 10px 22px; border-radius: 999px; border: 1.5px solid #1a6b7a; background: #fff; color: #1a6b7a; font: 600 14px Poppins, sans-serif; cursor: pointer; }
.pj-morebtn:hover { background: #1a6b7a; color: #fff; }
.pj-empty { max-width: 520px; margin: 30px auto; padding: 40px 28px; text-align: center; background: #f6fafb; border: 1px solid #e2ecef; border-radius: 20px; }
.pj-emptyicon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #e1f4f7; color: #1a6b7a; font-size: 26px; line-height: 64px; }
.pj-empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: #0e3b45; }
.pj-empty p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #55707a; }
@media (max-width: 600px) { .pj-page { padding-top: 24px; } .pj-grid { gap: 16px; } .pj-new { padding: 10px 18px; font-size: 14px; } }

/* ── Tool dialogs (MoDialog.setToolLayout, modialog.js) ─────────────────────────────────────────
   Stretch, Trim, Swap colors and Align caption text: title on the left with a one-line description under it,
   labels in sentence case like the object panel's captions, fields in a row, and a footer with help on the left,
   Cancel and the action on the right. Replaces centered titles, 11px uppercase labels and Align's gray text box.
   Not scoped to .ved: these dialogs only open in the editors, and phones get the same layout. 2026-09-19. */
.mo-tool .dialogtitlediv, .mo-tool .dialogcontent { text-align: left; }
.mo-tool .dialogtitlediv { height: auto; line-height: normal; padding: 22px 60px 0 24px; box-shadow: none !important; color: #0e3b45; }
.mo-tool .dialogtitle { display: block; width: auto; margin: 0; text-align: left; font: 600 20px/1.3 Poppins, sans-serif; color: #0e3b45; white-space: normal; }
.mo-tool .dialogclosediv { position: absolute; top: 14px; right: 14px; }
.mo-tool .dialogclosediv .closebutton { width: 34px; height: 34px; margin: 0; font-size: 17px; color: #55707a; }
.mo-tool .dialogclosediv .closebutton:hover { background: #eef3f4; color: #0e3b45; }
.mo-tool .dialogcontent { margin: 6px 24px 22px; }
/* A line under the heading inside the title itself (the video dialogs put the video's name there). */
.mo-tool .vdlg-sub { display: block; margin-top: 2px; font: 400 13.5px/1.45 Poppins, sans-serif; color: #55707a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-tool .dialogdesc { max-width: 380px; margin: 0 0 20px; font: 400 14px/1.55 Poppins, 'Open Sans', sans-serif; color: #55707a; white-space: normal; }
.mo-tool .tool-fields { display: flex; flex-wrap: wrap; gap: 14px 20px; width: 380px; max-width: 100%; text-align: left; font-size: 14px; }
.mo-tool .tool-fields .inlinepart { margin: 0; }
.mo-tool .banner { margin-bottom: 6px; font: 600 12.5px/1.3 Poppins, sans-serif; color: #55707a; text-transform: none; letter-spacing: 0; }
.mo-tool .tool-note { flex-basis: 100%; max-width: 380px; font-size: 12.5px; line-height: 1.5; color: #7a9299; white-space: normal; }
.mo-tool .dialogbuttondiv { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e6eef0; }
.mo-tool .dialogbuttondiv .actionbutton { margin-left: 0 !important; }
.mo-tool .dialogbuttondiv .dialoghelp { margin-right: auto !important; width: 36px; min-width: 36px; height: 36px; padding: 0 !important; border-radius: 50%; font-size: 13px; }
/* Swap colors: each color in the project, then the picker that replaces it, two pairs a row. */
.mo-tool .cs-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 32px; }
.mo-tool .cs-pair { display: flex; align-items: center; gap: 4px; }
.mo-tool .cs-pair .sp-preview { width: 26px; height: 26px; margin: 0 !important; border-radius: 6px; border: 1px solid #d5e2e6; box-sizing: border-box; }
.mo-tool .cs-arrow { color: #9fb3b8 !important; font-size: 12px; }
@media (max-width: 480px) { .mo-tool .cs-grid { grid-template-columns: max-content; } }

/* ── My pages header (/projects/, /videos/, /account/ behind the dev cookie) ────────────────────
   The redesigned wrappers only render under the notcompiled gate, so :has() scopes the teal header to those
   three pages without touching header.php. Other pages keep #444 until they get the same treatment. 2026-09-19. */
body:has(.pj-page) .header, body:has(.ac-page) .header { background: #0e3b45; }

/* ── Your videos (/videos/, videos.php behind the dev cookie) ────────────────────────────────────
   Reuses the pj-* cards from Your projects (teal, since every item is a video). Thumbnails come from Cloudinary as
   c_fit (no baked #444 bars) and sit on the card tint. .project stays on every card for loadMoreVideos(). 2026-09-19. */
.vd-page .pj-legend { max-width: 560px; }
.vd-card .pj-thumb { position: relative; }
.vd-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
           background: rgba(14,59,69,.78); color: #fff; font-size: 16px; line-height: 46px; text-align: center; text-indent: 3px;
           opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s; pointer-events: none; }
.vd-card:hover .vd-play, .vd-card .pj-thumb:focus-visible .vd-play { opacity: 1; transform: none; }
@media (hover: none) { .vd-play { opacity: 1; transform: none; width: 38px; height: 38px; margin: -19px 0 0 -19px; line-height: 38px; font-size: 13px; } }
.vd-dl { flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #1a6b7a; font-size: 16px;
         cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
.vd-dl:hover { background: #e1f4f7; }
.vd-dl:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 1px; }
.vd-card .pj-body { gap: 2px; }
.vd-sep { height: 1px; margin: 5px 6px; background: #e2ecef; }

/* ── Your account (/account/, account.php behind the dev cookie) ─────────────────────────────────
   One column of cards on the site's card design; one orange action (Save changes), password in teal outline.
   #filelab keeps the .inputfile + label pairing account.js expects; #fbaction/#googaction are filled by account.js
   with loginform.js links (inline-styled, hence the !important) and Google's rendered button. 2026-09-19. */
.ac-page { max-width: 760px; margin: 0 auto; padding: 36px 20px 64px; box-sizing: border-box; font-family: Poppins, sans-serif; text-align: left; color: #0e3b45; }
.ac-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 26px; }
.ac-pic { position: relative; flex: none; width: 88px; height: 88px; }
.ac-pic img { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 0 0 1px #e2ecef; box-sizing: border-box; background: #e1f4f7; }
.ac-pic .inputfile + label { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #fff;
                             border: 1px solid #cfdde1; color: #1a6b7a; font-size: 13px; line-height: 30px; text-align: center; box-sizing: border-box;
                             box-shadow: 0 2px 6px rgba(14,59,69,.15); transition: background-color .15s; }
.ac-pic .inputfile + label:hover { background: #e1f4f7; }
.ac-pic .inputfile:focus-visible + label { outline: 3px solid rgba(60,179,199,.45); outline-offset: 1px; }
.ac-who { min-width: 0; }
.ac-who h1 { margin: 0; font-size: clamp(24px, 3.2vw, 32px); font-weight: 600; color: #0e3b45; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ac-who p { margin: 4px 0 0; font-size: 14px; color: #55707a; }
.ac-card { background: #fff; border: 1px solid #e2ecef; border-radius: 16px; padding: 24px 26px 26px; margin-bottom: 20px; }
.ac-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: #0e3b45; }
.ac-sub { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: #55707a; }
.ac-field { max-width: 440px; margin-bottom: 14px; }
.ac-field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #0e3b45; }
.ac-field input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 14px; border: 1px solid #cfdde1; border-radius: 10px; box-sizing: border-box;
                  font: 400 15px Poppins, sans-serif; color: #0e3b45; background: #fff; -webkit-appearance: none; box-shadow: none; }
.ac-field input:focus { outline: none; border-color: #3cb3c7; box-shadow: 0 0 0 3px rgba(60,179,199,.22); }
.ac-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; max-width: 440px; }
.ac-row2 .ac-field { max-width: none; }
.ac-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 22px; border-radius: 999px; font: 600 14.5px Poppins, sans-serif;
          cursor: pointer; -webkit-appearance: none; transition: background-color .15s, box-shadow .15s, color .15s; }
.ac-primary { background: #fc4a1a; color: #fff; border: 0; }
.ac-primary:hover { background: #e33d0f; }
.ac-secondary { background: #fff; color: #1a6b7a; border: 1.5px solid #1a6b7a; }
.ac-secondary:hover { background: #1a6b7a; color: #fff; }
.ac-btn:focus-visible { outline: 3px solid rgba(252,74,26,.45); outline-offset: 2px; }
.ac-msg { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.ac-msg i { margin-top: 3px; }
.ac-ok { background: #e7f6ee; color: #17613a; }
.ac-err { background: #fdecea; color: #a5281b; }
.ac-note { margin: 0 0 16px; padding: 11px 14px; border-radius: 10px; background: #e1f4f7; color: #1a6b7a; font-size: 13.5px; line-height: 1.5; }
.ac-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-top: 1px solid #eef3f4; }
.ac-signin:first-of-type { border-top: 0; padding-top: 0; }
.ac-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f3f6f7; font-size: 19px; }
.ac-google { color: #4285f4; }
.ac-facebook { color: #1877f2; }
.ac-method { flex: 1; min-width: 120px; }
.ac-method b { display: block; font-size: 15px; font-weight: 600; }
.ac-status { display: inline-block; margin-top: 3px; padding: 0 9px; border-radius: 999px; font: 500 11.5px/20px Poppins, sans-serif; font-style: normal; }
.ac-on { background: #e7f6ee; color: #17613a; }
.ac-off { background: #eef3f4; color: #55707a; }
.ac-action { margin-left: auto; }
.ac-action .actionbutton { display: inline-block; margin: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid #cfdde1; background: #fff; color: #55707a;
                           font: 500 13.5px Poppins, sans-serif !important; text-transform: none; text-decoration: none; transition: border-color .15s, color .15s; }
.ac-action .actionbutton:hover { border-color: #c0392b; color: #c0392b; }
#fbaction > a:not(.actionbutton) { display: inline-flex !important; align-items: center; gap: 8px; height: 38px !important; line-height: normal !important; margin: 0 !important;
                                   padding: 0 16px 0 6px !important; border-radius: 999px; background: #1877f2 !important; font: 600 13.5px Poppins, sans-serif !important; text-decoration: none; }
#fbaction > a:not(.actionbutton) > div { width: 28px !important; height: 28px !important; line-height: 28px !important; margin: 0 !important; border-radius: 50%; font-size: 15px !important; color: #1877f2 !important; }
.ac-leave { background: #fbfcfc; }
.ac-leave p { margin: 0; font-size: 14px; line-height: 1.6; color: #55707a; }
.ac-leave a { color: #1a6b7a; font-weight: 600; }
@media (max-width: 600px) {
  .ac-page { padding: 24px 16px 40px; }
  .ac-card { padding: 20px 18px 22px; }
  .ac-row2 { grid-template-columns: 1fr; }
  .ac-hero { gap: 16px; }
  .ac-pic, .ac-pic img { width: 72px; height: 72px; }
}
/* Footer with more than one button on the left (Music: help, then Replace song). */
.mo-tool .dialogbuttondiv .dialoghelp.dh-inline { margin-right: 0 !important; }
.mo-tool .dialogbuttondiv .dialogleft { margin-right: auto !important; }
/* Backdrop (backdropeditor.js): the clip list and its add tile on one light panel instead of a gray well, the add button
   a dashed tile rather than a big orange circle (orange is the dialog's action), counts as label and value. */
.mo-tool .bd-color, .mo-tool .bd-summary { text-align: left !important; }
.mo-tool .bd-summary { font: 400 13.5px Poppins, sans-serif !important; color: #7a9299; }
.mo-tool .bd-summary span:nth-of-type(even) { color: #0e3b45; font-weight: 600; }
.mo-tool .bd-list { background: #f3f7f8 !important; border-radius: 12px 0 0 12px; }
.mo-tool .bd-addwell { background: #f3f7f8 !important; border-radius: 0 12px 12px 0; }
.mo-tool .bd-add { background: #fff !important; color: #1a6b7a !important; border: 2px dashed #9cc3cb; box-sizing: border-box; transition: border-color .15s, background-color .15s; }
.mo-tool .bd-add:hover { border-color: #1a6b7a; background: #eef7f8 !important; }
.mo-tool .paramlabel { font: 600 12.5px Poppins, sans-serif !important; color: #55707a !important; }
/* Animation settings (animationdialog.js, .mo-tool.mo-anim): the controls panel starts level with the top of the preview
   instead of floating in the middle, on a light panel rather than a silver-bordered box. */
.mo-anim .dialogcontent { margin-top: 12px; }
.mo-anim .animuicontrols { vertical-align: top; border: 0; background: #f4f8f9 !important; border-radius: 14px; } /* !important: animationdialog.js sets an inline background: inherit */
.mo-anim .animuicontrols .part { font-size: 14px; }
.mo-anim .animatelabel { font: 600 12.5px Poppins, sans-serif !important; color: #55707a; }

/* ── First visit (empty /projects/ and /videos/, behind the dev cookie) ──────────────────────────
   Markup from includes/mypagesempty.php; both panels are #nocontent, which projfunc.js shows again after the last
   card is deleted. Tool rows reuse the project-type colors (.pj-type pills from the Your projects block). 2026-09-19. */
.mp-welcome, .mp-vempty { --mp-edge: #3cb3c7; --mp-deep: #1a6b7a; --mp-tint: #e1f4f7; font-family: Poppins, sans-serif; color: #0e3b45; text-align: left; }
.mp-welcome { margin-top: 4px; }
.mp-welcome h2 { margin: 0; font-size: 20px; font-weight: 600; color: #0e3b45; }
.mp-lede { margin: 4px 0 18px; font-size: 14px; color: #55707a; }
.mp-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mp-group { display: grid; gap: 12px; align-content: start; }
.mp-glabel { display: flex; align-items: center; gap: 2px; font-size: 13px; color: #55707a; }
.mp-tool { --mp-edge: #3cb3c7; --mp-deep: #1a6b7a; --mp-tint: #e1f4f7;
           display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 16px;
           background: #fff; border: 1px solid #e2ecef; border-radius: 16px; color: #0e3b45 !important; text-decoration: none !important;
           transition: border-color .15s, box-shadow .15s, transform .15s; }
.mp-tool.mp-image { --mp-edge: #3c5bc7; --mp-deep: #1a3a6b; --mp-tint: #e8edfa; }
.mp-tool:hover { border-color: var(--mp-edge); box-shadow: 0 10px 24px rgba(14,59,69,.10); transform: translateY(-1px); }
.mp-tool:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 2px; }
.mp-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--mp-tint); color: var(--mp-deep); }
.mp-ico svg { width: 22px; height: 22px; }
.mp-tooltext { min-width: 0; }
.mp-tooltext b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.mp-tooltext small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: #55707a; }
.mp-ai { padding: 0 7px; border-radius: 6px; background: #0e3b45; color: #fff; font: 600 10px/18px Poppins, sans-serif; letter-spacing: .06em; }
.mp-go { font-size: 13px; font-weight: 600; color: var(--mp-deep); white-space: nowrap; }
.mp-go.mp-cta { padding: 9px 16px; border-radius: 999px; background: #fc4a1a; color: #fff; transition: background-color .15s; }
.mp-tool:hover .mp-cta { background: #e33d0f; }
.mp-steps { margin-top: 26px; padding: 18px 20px; background: #f6fafb; border: 1px solid #e2ecef; border-radius: 16px; }
.mp-steps h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7a9299; }
.mp-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: mpstep; }
.mp-steps li { counter-increment: mpstep; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; color: #55707a; }
.mp-steps li::before { content: counter(mpstep); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff;
                       border: 1px solid #cfdde1; color: #0e3b45; font-size: 13px; font-weight: 600; }
.mp-steps li b { display: block; font-size: 14px; font-weight: 600; color: #0e3b45; }
.mp-steps a { color: #1a6b7a; font-weight: 600; }
.mp-steps a:hover { text-decoration: underline; }

.mp-vempty { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; margin-top: 4px; padding: 30px;
             background: #f6fafb; border: 1px solid #e2ecef; border-radius: 20px; }
.mp-vempty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; color: #0e3b45; }
.mp-vtext p { max-width: 48ch; margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: #55707a; }
.mp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mp-btn { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 999px; background: #fc4a1a; color: #fff !important; font: 600 14.5px Poppins, sans-serif;
          text-decoration: none !important; transition: background-color .15s; }
.mp-btn:hover { background: #e33d0f; }
.mp-link { color: #1a6b7a !important; font-size: 14px; font-weight: 600; }
.mp-link:hover { text-decoration: underline; }
.mp-btn:focus-visible, .mp-link:focus-visible { outline: 3px solid rgba(252,74,26,.4); outline-offset: 2px; }
.mp-aftercap { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #7a9299; }
.mp-after { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mp-after span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #e2ecef; font-size: 12.5px; }
.mp-after svg { width: 13px; height: 13px; color: #1a6b7a; }
.mp-sketch { position: relative; overflow: hidden; border-radius: 14px; background: #fff; border: 1px solid #d3dfe2; box-shadow: 0 12px 28px rgba(14,59,69,.10); }
.mp-skbar { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; background: #0e3b45; color: #fff; font-size: 12px; }
.mp-sksp { margin-left: auto; }
.mp-sksave { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.55); font-weight: 500; }
.mp-skpub { padding: 4px 13px; border-radius: 999px; background: #fc4a1a; font-weight: 600; box-shadow: 0 0 0 4px rgba(252,74,26,.28); }
.mp-skcall { position: absolute; top: 50px; right: 12px; padding: 5px 10px; border-radius: 8px; background: #fff; border: 1px solid #f3c2b3; color: #e33d0f;
             font-size: 12px; font-weight: 600; box-shadow: 0 6px 14px rgba(14,59,69,.12); }
.mp-skcall::before { content: ""; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px; background: #fff;
                     border-left: 1px solid #f3c2b3; border-top: 1px solid #f3c2b3; transform: rotate(45deg); }
.mp-skbody { display: grid; grid-template-columns: 38px 1fr; min-height: 150px; }
.mp-skrail { background: #0e3b45; opacity: .92; }
.mp-skcanvas { display: grid; place-items: center; padding: 16px; background: #eef3f4; }
.mp-skframe { display: grid; place-items: center; width: 70%; aspect-ratio: 16 / 9; border-radius: 6px; background: linear-gradient(135deg, #3cb3c7, #1a6b7a);
              color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 760px) {
  .mp-groups, .mp-steps ol { grid-template-columns: 1fr; }
  .mp-vempty { grid-template-columns: 1fr; gap: 22px; padding: 22px 18px; }
}
@media (max-width: 600px) {
  .mp-tool { grid-template-columns: 44px 1fr; }
  .mp-ico { width: 44px; height: 44px; }
  .mp-go { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .mp-tool, .mp-btn, .mp-go.mp-cta { transition: none; } }
.mo-tool .bd-list, .mo-tool .bd-addwell { vertical-align: top; } /* inline-blocks on the baseline left the add panel a few px off the list */

/* ── Sign in, sign up, password reset (loginform.js, registerdialog.js, recoverdialog.js: .mo-tool.mo-auth) ─────
   Site-wide, not only in the editors, so the card itself is set here too: on pages without .ved the dialog was
   gray with square uppercase buttons. Full-width social buttons, an "or" rule, rounded inputs with small labels,
   one full-width orange action. 2026-09-19. */
.mo-auth.dialog { background: #fff !important; border-radius: 16px; box-shadow: 0 24px 60px rgba(8,40,48,.35), 0 2px 8px rgba(8,40,48,.12); }
.mo-auth .dialogcontent { background: transparent !important; }
.mo-auth .dialogtitle { font-family: Poppins, 'Open Sans', sans-serif; }
.mo-auth #logindiv { padding: 0 !important; }
.mo-auth .auth-social { max-width: 300px !important; }
.mo-auth .auth-fb { display: flex !important; align-items: center; width: 300px !important; max-width: 100%; padding-right: 0 !important; border-radius: 4px; overflow: hidden; font-family: Roboto, 'Open Sans', sans-serif; font-weight: 500; }
.mo-auth .googlesignin { display: block !important; background: transparent !important; }
.mo-auth .auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; font: 400 13px Poppins, sans-serif; color: #7a9299; }
.mo-auth .auth-or::before, .mo-auth .auth-or::after { content: ""; flex: 1; height: 1px; background: #e2ecef; }
.mo-auth .loginlabel { display: inline-block; margin: 10px 0 5px; font: 600 12.5px Poppins, sans-serif; color: #55707a; }
.mo-auth .logininput { display: block; width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #d5e2e6; border-radius: 10px;
                       font: 400 15px Poppins, 'Open Sans', sans-serif; color: #0e3b45; background: #fff; transition: border-color .15s, box-shadow .15s; }
.mo-auth .logininput:focus { outline: none; border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.15); }
.mo-auth .auth-forgot { font: 500 12.5px Poppins, sans-serif !important; color: #1a6b7a !important; cursor: pointer; }
.mo-auth .auth-submit { display: block; width: 100%; height: 44px; margin: 18px 0 0 !important; border-radius: 999px; text-transform: none;
                        font: 600 15px Poppins, sans-serif; }
.mo-auth .auth-switch { margin-top: 16px !important; font: 400 14px Poppins, sans-serif !important; color: #55707a; }
.mo-auth .auth-switch a { font-weight: 600; color: #1a6b7a; cursor: pointer; }
.mo-auth .auth-terms { margin-top: 10px !important; font: 400 12px/1.5 Poppins, sans-serif !important; color: #7a9299; }
.mo-auth .auth-terms a { color: #1a6b7a; }
.mo-auth .auth-error { font: 400 14px Poppins, sans-serif; }
.mo-auth form br { display: none; }

/* ── Search on Your projects / Your videos (behind the dev cookie) ───────────────────────────────
   Markup from includes/mypagessearch.php. The type chips reuse the project-type colors. 2026-09-19. */
.mp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -6px 0 22px; font-family: Poppins, sans-serif; }
.mp-search { position: relative; flex: 1 1 280px; max-width: 420px; margin: 0; }
.mp-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; color: #7a9299; pointer-events: none; }
.mp-search input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 40px 0 42px; border: 1px solid #cfdde1; border-radius: 999px; box-sizing: border-box;
                   background: #fff; font: 400 15px Poppins, sans-serif; color: #0e3b45; -webkit-appearance: none; box-shadow: none; }
.mp-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.mp-search input::placeholder { color: #7a9299; }
.mp-search input:focus { outline: none; border-color: #3cb3c7; box-shadow: 0 0 0 3px rgba(60,179,199,.22); }
.mp-x { position: absolute; right: 8px; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0; border: 0; border-radius: 50%;
        background: #eef3f4; color: #55707a; font: 400 17px/28px Poppins, sans-serif; cursor: pointer; }
.mp-x:hover { background: #e1f4f7; color: #0e3b45; }
.mp-chips { display: inline-flex; gap: 6px; }
.mp-chip { padding: 7px 14px; border: 1px solid #cfdde1; border-radius: 999px; background: #fff; color: #55707a; font: 500 13px Poppins, sans-serif; cursor: pointer;
           transition: background-color .15s, border-color .15s, color .15s; }
.mp-chip:hover { border-color: #0e3b45; color: #0e3b45; }
.mp-chip[aria-pressed="true"] { border-color: #0e3b45; background: #0e3b45; color: #fff; }
.mp-chip-video[aria-pressed="true"] { border-color: #1a6b7a; background: #1a6b7a; }
.mp-chip-image[aria-pressed="true"] { border-color: #1a3a6b; background: #1a3a6b; }
.mp-count { font-size: 13px; color: #55707a; }
.mp-count b { font-weight: 600; color: #0e3b45; }
.mp-clear { margin-left: 6px; padding: 0; border: 0; background: none; color: #1a6b7a; font: 600 13px Poppins, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.mp-x:focus-visible, .mp-chip:focus-visible, .mp-clear:focus-visible, .mp-quiet:focus-visible { outline: 3px solid rgba(60,179,199,.5); outline-offset: 2px; }
.pj-title mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 1px; }
.mp-nomatch { max-width: 520px; margin: 18px auto; padding: 32px 24px; text-align: center; background: #f6fafb; border: 1px solid #e2ecef; border-radius: 20px; font-family: Poppins, sans-serif; }
.mp-nomatch h2 { margin: 0 0 6px; font-size: 19px; font-weight: 600; color: #0e3b45; overflow-wrap: anywhere; }
.mp-nomatch p { margin: 0 0 16px; font-size: 14px; color: #55707a; }
.mp-quiet { padding: 9px 18px; border: 1.5px solid #1a6b7a; border-radius: 999px; background: #fff; color: #1a6b7a; font: 600 13.5px Poppins, sans-serif; cursor: pointer; }
.mp-quiet:hover { background: #1a6b7a; color: #fff; }
@media (max-width: 600px) {
  .mp-search { max-width: none; flex-basis: 100%; }
  .mp-count { flex-basis: 100%; }
}

/* ── Share pages (yt_share / facebookshare / driveshare / dbshare, behind the dev cookie) ─────────
   Markup from includes/sharepage.php. One layout for all four; the service only sets the icon color. 2026-09-19. */
body:has(.sh-page) .header { background: #0e3b45; }
.sh-page { --sh: #e62117; --sh-tint: #fdecea; max-width: 1040px; margin: 0 auto; padding: 28px 20px 64px; box-sizing: border-box;
           font-family: Poppins, sans-serif; color: #0e3b45; text-align: left; }
.sh-fb { --sh: #1877f2; --sh-tint: #e8f0fe; }
.sh-gd { --sh: #1a73e8; --sh-tint: #eef3fd; }
.sh-db { --sh: #0061fe; --sh-tint: #e8f0ff; }
.sh-li { --sh: #0a66c2; --sh-tint: #e6f0f8; }
.sh-back { display: inline-flex; align-items: center; gap: 6px; color: #1a6b7a !important; font-size: 13.5px; font-weight: 600; }
.sh-back:hover { text-decoration: underline; }
.sh-title { display: flex; align-items: center; gap: 14px; margin: 14px 0 24px; }
.sh-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--sh-tint); color: var(--sh); }
.sh-icon svg { width: 26px; height: 26px; }
.sh-title h1 { margin: 0; font-size: clamp(24px, 3.2vw, 30px); font-weight: 600; letter-spacing: -.01em; color: #0e3b45; }
.sh-title p { margin: 2px 0 0; font-size: 14px; color: #55707a; overflow-wrap: anywhere; }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sh-preview { display: grid; gap: 10px; min-width: 0; }
.sh-preview video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #0e3b45; object-fit: contain; }
.sh-vtitle { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.sh-card { min-width: 0; padding: 22px 24px 20px; background: #fff; border: 1px solid #e2ecef; border-radius: 16px; }
.sh-field { display: grid; gap: 6px; margin-bottom: 14px; }
.sh-field label { font-size: 13px; font-weight: 500; color: #0e3b45; }
.sh-hint { font-size: 12px; color: #7a9299; }
.sh-card input[type=text], .sh-card select, .sh-card textarea { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; box-sizing: border-box;
     border: 1px solid #cfdde1; border-radius: 10px; background: #fff; font: 400 15px Poppins, sans-serif; color: #0e3b45; box-shadow: none; -webkit-appearance: none; }
.sh-card textarea { min-height: 88px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.sh-card select { padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355707a' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; }
.sh-card input:focus, .sh-card select:focus, .sh-card textarea:focus { outline: none; border-color: #3cb3c7; box-shadow: 0 0 0 3px rgba(60,179,199,.22); }
.sh-card textarea::placeholder { color: #7a9299; }
.sh-dest { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e2ecef; border-radius: 12px; background: #f6fafb; }
.sh-dest img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.sh-dest span { min-width: 0; }
.sh-dest b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sh-dest small { font-size: 12.5px; color: #55707a; }
.sh-note { margin: 0 0 14px; padding: 11px 14px; border-radius: 10px; background: #fdf3e7; color: #7a4a0c; font-size: 13.5px; line-height: 1.5; }
.sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 12px 24px; border: 0; border-radius: 999px;
          background: #fc4a1a; color: #fff !important; font: 600 15px Poppins, sans-serif; cursor: pointer;
          text-decoration: none !important; transition: background-color .15s; }
.sh-btn:hover { background: #e33d0f; }
.sh-btn:disabled { background: #cfdde1; box-shadow: none; cursor: not-allowed; }
.sh-btn:focus-visible, .sh-back:focus-visible, .sh-foot a:focus-visible { outline: 3px solid rgba(252,74,26,.4); outline-offset: 2px; }
.sh-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #eef3f4; font-size: 12.5px; color: #55707a; }
.sh-ok { padding: 0 9px; border-radius: 999px; background: #e7f6ee; color: #17613a; font-size: 11.5px; font-weight: 500; line-height: 20px; }
.sh-foot a { margin-left: auto; color: #55707a !important; text-decoration: underline; text-underline-offset: 2px; }
.sh-foot a:hover { color: #c0392b !important; }
.sh-connect { max-width: 560px; margin: 8px auto 0; padding: 36px 28px 30px; text-align: center; background: #f6fafb; border: 1px solid #e2ecef; border-radius: 20px; }
.sh-connect .sh-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px; }
.sh-connect .sh-icon svg { width: 34px; height: 34px; }
.sh-connect h2 { margin: 0 0 8px; font-size: 21px; font-weight: 600; color: #0e3b45; }
.sh-connect p { max-width: 44ch; margin: 0 auto 20px; font-size: 14.5px; line-height: 1.55; color: #55707a; }
.sh-connect .sh-fine { margin: 16px auto 0; font-size: 12.5px; color: #7a9299; }
@media (max-width: 760px) {
  .sh-grid { grid-template-columns: 1fr; gap: 20px; }
  .sh-page { padding: 20px 16px 40px; }
  .sh-card { padding: 18px 16px 16px; }
  .sh-btn { width: 100%; box-sizing: border-box; }
  .sh-connect { padding: 28px 18px 24px; }
}
/* Welcome after sign-up (loginform.js handleLoginResponse): the /projects/ first-visit tools (.mp-*) inside the dialog. */
.mo-welcome { width: 640px; max-width: 100%; }
.mo-welcome .mp-groups { margin-top: 4px; }
/* Dialog buttons on every page, not only in the editors (.ved has the same rule): rounded, sentence case, Poppins.
   Site pages still had the square uppercase .actionbutton in their dialogs (sign in, share, confirmations). */
.dialog .actionbutton { border-radius: 999px; text-transform: none; font-family: Poppins, sans-serif !important; font-weight: 600; padding-left: 18px; padding-right: 18px; }
.dialog .actionbutton:hover:enabled { background: #e33d0f; border-color: #e33d0f; }
.dialog .actionbutton.secondarybutton:hover:enabled { background: #eef7f8; color: #0e3b45; border-color: #1a6b7a; }
.dialog .actionbutton.secondarybutton { color: #0e3b45; border-color: #cfdde1; }
.mo-auth .actionbutton { height: 38px; font-size: 14.5px; padding: 0 18px; }
.mo-auth .auth-submit { height: 44px; font-size: 15px; }
/* Two narrow columns: each tile's action goes under its text instead of squeezing it. */
.mo-welcome .mp-tool { grid-template-columns: 48px 1fr; row-gap: 10px; }
.mo-welcome .mp-go { grid-column: 2; justify-self: start; }
.mo-auth .dialogdesc { max-width: 520px; }

/* ── Video dialogs: Share, Download, Descriptions (js/mvmsrc sharevideodialog.js, downloadvideodialog.js, webvtt.js) ──
   The frame -- title, close button, spacing, footer -- is the shared tool dialog layout (.mo-tool, which videoDialogStyle
   adds with .vdlg; merged 2026-09-19 so every dialog has one look). What is left here is their width, their rows, and the
   phone bottom sheet the owner approved for these three. The 1px border stays because MoDialog's resize math measures it. */
.dialog.vdlg { width: 440px; max-width: calc(100% - 24px); font-family: Poppins, sans-serif; color: #0e3b45; text-align: left; overflow: hidden; }
.dialog.vdlg-descriptions { width: 580px; }
.vdlg .dialogcontent { margin-top: 12px; }
.vdlg-group + .vdlg-group { margin-top: 16px; }
.vdlg-glabel { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #7a9299; }
.vdlg-rows { display: grid; gap: 8px; }
.vdlg-row { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 12px 14px; box-sizing: border-box; border: 1px solid #e2ecef; border-radius: 14px;
            background: #fff; color: #0e3b45 !important; text-align: left; font: inherit; text-decoration: none !important; cursor: pointer;
            transition: border-color .15s, background-color .15s; }
.vdlg-row:hover { border-color: #3cb3c7; background: #fbfdfd; }
.vdlg-row:focus-visible { outline: 3px solid rgba(60,179,199,.5); outline-offset: 2px; }
.vdlg-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f3f6f7; }
.vdlg-ico svg { width: 22px; height: 22px; }
.vdlg-svc-yt .vdlg-ico { background: #fdecea; color: #e62117; }
.vdlg-svc-fb .vdlg-ico { background: #e8f0fe; color: #1877f2; }
.vdlg-svc-gd .vdlg-ico { background: #eef3fd; }
.vdlg-svc-db .vdlg-ico { background: #e8f0ff; color: #0061fe; }
.vdlg-svc-li .vdlg-ico { background: #e6f0f8; color: #0a66c2; }
.vdlg-txt { flex: 1; min-width: 0; }
.vdlg-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 600; }
.vdlg-txt small { display: block; font-size: 12.5px; color: #55707a; }
.vdlg-go { flex: none; color: #7a9299; font-size: 22px; line-height: 1; }
.vdlg-badge { padding: 0 8px; border-radius: 999px; background: #e1f4f7; color: #1a6b7a; font-size: 11px; font-weight: 500; line-height: 19px; }
.vdlg-dl { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e1f4f7; color: #1a6b7a; }
.vdlg-dl svg { width: 16px; height: 16px; }
.vdlg-row.vdlg-best { border-color: #f3c2b3; }
.vdlg-row.vdlg-best .vdlg-dl { background: #fc4a1a; color: #fff; }
.vdlg-explain { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: #55707a; }
.vdlg-cues { display: block; width: 100%; min-height: 210px; margin: 0; padding: 12px 14px; box-sizing: border-box; border: 1px solid #cfdde1; border-radius: 12px; background: #fff;
             resize: vertical; font: 400 13px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #0e3b45; }
.vdlg-cues:focus { outline: none; border-color: #3cb3c7; box-shadow: 0 0 0 3px rgba(60,179,199,.22); }
.vdlg-cues::placeholder { color: #9aaeb3; }
.vdlg-hint { margin: 8px 0 0; font-size: 12px; color: #7a9299; }
.vdlg .dialogbuttondiv { flex-wrap: wrap; margin-top: 18px; white-space: normal; }
.vdlg .dialogbuttondiv .actionbutton { display: inline-flex; align-items: center; gap: 8px; }
.vdlg .dialogbuttondiv .actionbutton svg { width: 15px; height: 15px; }
.vdlg .dialogbuttondiv .vdlg-fill { margin-right: auto !important; color: #1a6b7a; border: 1.5px solid #1a6b7a; background: #fff; }
@media (max-width: 480px) {
  .fixedoverlay:has(> .vdlg) { align-items: flex-end; }
  .dialog.vdlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .vdlg .dialogtitlediv { padding: 18px 52px 0 18px; }
  .vdlg .dialogcontent { margin: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .vdlg .dialogbuttondiv .actionbutton { flex: 1 1 100%; justify-content: center; }
  .vdlg .dialogbuttondiv .vdlg-fill { margin-right: 0 !important; order: 2; }
}
/* Video player (videoviewer.js: after Publish, and on /videos/): tool layout, the video on black with rounded corners. */
.mo-player .player { border-radius: 12px; overflow: hidden; background: #000; line-height: 0; }
.mo-player .player video { display: block; }
.mo-player .dialogbuttondiv .actionbutton i { margin-right: 4px; }
.mo-player .dialogcontent { margin-top: 14px; }

/* ── Template page "Edit template" (template.php, .nt-edit behind the dev cookie) ─────────────────
   The same orange pill as New project / Save changes; production keeps the square EDIT TEMPLATE. 2026-09-19. */
.ntcta .splashbutton.nt-edit { display: inline-flex; align-items: center; padding: 13px 28px; border: 0; border-radius: 999px; background: #fc4a1a; color: #fff !important;
                               font: 600 17px/1 Poppins, sans-serif !important; letter-spacing: 0; text-decoration: none !important;
                               box-shadow: none; transition: background-color .15s; } /* flat: the site buttons carry no glow */
.ntcta .splashbutton.nt-edit:hover { background: #e33d0f; }
.ntcta .splashbutton.nt-edit:focus-visible { outline: 3px solid rgba(252,74,26,.45); outline-offset: 2px; }
/* InputDialog's field (rename, alt text, project settings) in the tool layout: the 44px rounded field of the sign-in form. */
.mo-tool .captioninput { display: block; width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #d5e2e6; border-radius: 10px;
                         font: 400 15px Poppins, 'Open Sans', sans-serif; color: #0e3b45; background: #fff; transition: border-color .15s, box-shadow .15s; }
.mo-tool .captioninput:focus { outline: none; border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.15); }
.mo-tool .dialogdesc b { font-weight: 600; color: #0e3b45; }

/* ── Pickers: Objects (shapes and icons) and Select Animation ───────────────────────────────────
   Icons were bare 100px blocks with a gray hover and 10px names; shapes had no hover target at all; animation
   cards were gray blocks with an uppercase caption bar. All three now use the same tile: white, rounded, a teal
   border and tint on hover. Editor dialog titles sit on the left like the tool dialogs. 2026-09-19. */
/* Picker titles stay centred (the owner found them odd on the left, 2026-09-19); only .mo-tool titles sit left. */
/* Icon tiles (objectselector.js, iconsearch.js) */
/* !important with the :not() guard: SearchTab sets an inline display on its results when a tab is shown or hidden. */
.ved .os-icongrid:not([style*="display: none"]) { display: flex !important; flex-wrap: wrap; gap: 10px; align-content: flex-start; padding: 4px; }
.ved .os-icon { width: 104px; padding: 12px 8px 9px; box-sizing: border-box; border: 1px solid transparent; border-radius: 12px;
                background: #fff; text-align: center; transition: border-color .15s, background-color .15s; }
.ved .os-icon:hover { background: #e9f5f7; } /* background only: the border ring read as a second selected state */
.ved .os-iconglyph { height: 56px; font-size: 52px; line-height: 56px; color: #0e3b45; }
.ved .os-iconname { margin-top: 6px; font: 400 11px/14px Poppins, sans-serif; color: #7a9299; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ved .os-noicons { padding: 24px 8px; font: 400 15px Poppins, sans-serif; color: #7a9299; }
.ved .searchbox { display: inline-flex; align-items: center; }
.ved .os-search input.searchterm { width: 210px; height: 34px; padding: 0 12px; border: 1px solid #d5e2e6; border-right: 0; border-radius: 999px 0 0 999px;
                                   font: 400 14px Poppins, sans-serif; color: #0e3b45; }
.ved .os-search input.searchterm:focus { outline: none; border-color: #1a6b7a; }
/* Clear sits inside the field's frame; the search button matches the field's height (it was 4px shorter). */
.ved .searchbox .searchclear { height: 34px; width: 26px; padding: 0; margin: 0; border: 1px solid #d5e2e6; border-left: 0; border-right: 0;
                               background: #fff; color: #9fb3b8; font-size: 12px; cursor: pointer; }
.ved .searchbox .searchclear:hover { color: #0e3b45; }
.ved .searchbox .searchterm:focus + .searchclear { border-color: #1a6b7a; }
/* The magnifier was a dark block with the icon jammed in it: quiet, same frame as the field, roomier. */
.ved .os-search .searchbutton { height: 34px; width: 40px; padding: 0 !important; margin-left: 0 !important; border-radius: 0 999px 999px 0;
                                border: 1px solid #d5e2e6 !important; border-left: 0 !important; background: #fff !important; color: #55707a !important; font-size: 13px !important; }
.ved .os-search .searchbutton:hover:enabled { background: #eef3f4 !important; color: #0e3b45 !important; }
/* Shape tiles (shapeselector.js images inside objectselector's Shapes tab) */
.ved .os-shapes .part { margin-bottom: 18px; }
.ved .os-shapes .banner { font: 600 12.5px/1.3 Poppins, sans-serif; letter-spacing: 0; text-transform: none; color: #55707a; margin-bottom: 8px; }
.ved .os-shapes img.os-shape { padding: 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: 12px; transition: border-color .15s, background-color .15s; }
.ved .os-shapes img.os-shape:hover { background: #e9f5f7; }
/* Animation cards (animationsearch.js) */
.ved .as-card { display: flex; flex-direction: column; align-items: center; padding: 4px 4px 2px; border: 1px solid #e2ecef; border-radius: 14px;
                background: #fff; transition: border-color .15s, box-shadow .15s; } /* 4px + 1px border keeps the old 5px block width, so rows still fit three across;
                the column centres the preview and its name, which sat flush left with the slack on the right */
.ved .as-card:hover { border-color: #3cb3c7; box-shadow: 0 8px 20px rgba(14,59,69,.10); }
.ved .as-cap { padding: 7px 2px 3px; font-family: Poppins, sans-serif; font-weight: 500; color: #0e3b45; text-align: center;
               white-space: normal; overflow-wrap: break-word; }
/* Docked picker: the Objects picker inside the object panel's column (objectinspector.js showDock).
   Smaller tiles than the dialog, so a 460px column still shows five shapes or four icons per row. 2026-09-20. */
/* The column keeps the picker's header still and scrolls the listing inside it: scrolling the whole column put the
   scroll track beside the tabs and search, and it broke the pickers' own "show more" (they watch their results box).
   The list's height is set in JS (objectinspector.js sizeDockLists) because each picker nests its list differently. */
.ved .oi-dock { height: 100%; overflow: hidden; text-align: left; }
.ved .oi-dock .searchresults, .ved .dialog.ms-compact .searchresults { overflow-y: auto !important; overflow-x: hidden; } /* no display rule here: it overrode the tabs' own hiding and stacked every tab's list */
.ved .oi-dock .searchpanel, .ved .oi-dock .searchresults, .ved .dialog.ms-compact .searchpanel, .ved .dialog.ms-compact .searchresults { width: 100% !important; max-width: 100% !important; }
.ved .oi-dock .os-shapes img.os-shape { width: 54px !important; height: 54px !important; box-sizing: border-box !important; padding: 2px !important; border-radius: 8px; } /* !important: another rule forced content-box, so each tile measured 72px and cost a column */
.ved .oi-dock .os-shapes .part { margin-bottom: 10px; }
.ved .oi-dock .os-shapes .banner { margin-bottom: 4px; }
/* No names in the dock: they truncated to "angle-dou..." and cost a row of height. The tile's title attribute
   still shows the name on hover, and the search box is right above. */
.ved .oi-dock .os-icon { width: 54px; padding: 5px 2px; border-radius: 8px; }
.ved .oi-dock .os-iconglyph { height: 34px; font-size: 30px; line-height: 34px; }
.ved .oi-dock .os-iconname { display: none; }
.ved .oi-dock .os-icongrid:not([style*="display: none"]) { gap: 4px; padding: 2px; justify-content: flex-start; }
.ved .oi-dock .os-search input.searchterm, .ved .dialog.ms-compact .os-search input.searchterm { width: 140px; }
.ved .oi-dock .os-shapes .part { margin-bottom: 12px; }
/* Dock tabs: the dialog's 20px tabs looked huge in a 370px column. */
.ved .oi-dock .tab, .ved .dialog.ms-compact .tab { font-size: 14px !important; padding-bottom: 4px; margin-right: 14px !important; }
.ved .oi-dock .tabdiv, .ved .oi-dock .searchtabs, .ved .dialog.ms-compact .tabdiv, .ved .dialog.ms-compact .searchtabs { margin-bottom: 6px !important; }
.ved .oi-dock .oi-edithead { margin-top: 0 !important; margin-bottom: 14px !important; } /* room between the back row and the tabs */
/* Shapes as a grid in the dock: inline images left ragged gaps, so a row held four where five fit. */
.ved .oi-dock .os-shapes .part { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.ved .oi-dock .os-shapes .part:first-child { margin-top: 8px; } /* clear of the pinned search row */
.ved .oi-dock .os-shapes .part .banner { flex-basis: 100%; }
.ved .oi-dock .os-shapes .part br { display: none; }
/* One scroll area in the dock: the results box had its own track and gray frame inside the panel's own scroll,
   which read as a shaded band down the side. The panel scrolls; the results just grow. Labels get side padding. */
.ved .oi-dock .searchresults, .ved .dialog.ms-compact .searchresults { border: 0 !important; }
.ved .oi-dock .os-shapes, .ved .oi-dock .os-icongrid:not([style*="display: none"]) { padding: 0 8px; box-sizing: border-box; }
.ved .oi-dock .os-shapes .banner { padding-left: 2px; }
/* The search panel sets its own height (the dialog's resize math). In the dock it must grow instead, or the list is
   clipped with nothing to scroll -- the dock is the scroll area. */
/* The media picker's second header row (the switch and Filters) spans the column. */
.ved .oi-dock .ms-dock > div:nth-child(2):not(:has(.searchresults)):not(:has(> .tab)), .ved .dialog.ms-compact .ms-dock > div:nth-child(2):not(:has(.searchresults)):not(:has(> .tab)) { display: block !important; width: 100% !important; box-sizing: border-box;
                                                                      padding: 2px 8px 10px; }
/* The search box spans the column in the dock: right-aligned it was squeezed against the scroll track, which also
   covered the magnifier. */
.ved .oi-dock .os-search, .ved .dialog.ms-compact .os-search { display: flex !important; width: 100%; }
.ved .oi-dock .os-search input.searchterm, .ved .dialog.ms-compact .os-search input.searchterm { width: auto !important; flex: 1; min-width: 0; }
.ved .oi-dock .os-search .searchclear, .ved .oi-dock .os-search .searchbutton, .ved .dialog.ms-compact .os-search .searchclear, .ved .dialog.ms-compact .os-search .searchbutton { flex: none; }
/* No scroll-fade in the dock: the picker is plainly a long grid, and the fade read as a shadow over the tiles.
   The node list and the edit panel keep their cues. */
.ved .oi-body.oi-more-above:has(.oi-dock:not([style*="display: none"]))::before,
.ved .oi-body.oi-more-below:has(.oi-dock:not([style*="display: none"]))::after { display: none !important; }
/* Clear (x) in the media search field (imagesearch.js / videoselector.js), matching the other search boxes. */
.ms-searchwrap .ms-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; border: 0;
                           border-radius: 50%; background: transparent; color: #9fb3b8; font-size: 13px; cursor: pointer; }
.ms-searchwrap .ms-clear:hover { background: #eef3f4; color: #0e3b45; }
.ms-searchwrap .ms-search { padding-right: 40px; }
/* Animation picker in the dock: six tabs need to fit a 370px column, and the cards sit two to a row. */
.ved .oi-dock .as-card { padding: 9px 9px 2px; } /* air around the picture (owner, 2026-10-15); the player is 116 wide so the card stays 136 */
.ved .oi-dock .as-card > div:first-child { border-radius: 3px; overflow: hidden; } /* 8px cut the corners off Complete the Square and any outline drawn to the edge (owner, 2026-10-16) */
/* Animations that paint a colored background (Looking Glass) ran to the card's edge while white ones did not,
   so the tiles looked unevenly inset: round and clip the preview inside its card. */
/* The preview is centred in its card: a canvas is often shorter than the player box (a media preview is 85px in a
   96px box), so top-aligned it sat high with all the slack underneath. Corners are left square -- rounding the
   artwork itself was tried and dropped (owner, 2026-09-20). */
.ved .as-card > div:first-child { display: flex !important; align-items: center; justify-content: center; }
.ved .oi-dock .as-cap { padding: 5px 2px 2px; font-size: 11.5px !important; }
.ved .oi-dock .tab, .ved .dialog.ms-compact .tab { font-size: 11.5px !important; margin-right: 11px !important; padding: 0 1px 2px; } /* six tabs share a 296px column: 226px of labels leaves room for this much space */
/* Six tabs (New, All, Decorative, Shapes, Text, Media) do not fit one row in a 370px column: let them wrap. */
.ved .oi-dock > div:not(.oi-edithead) > div:nth-child(1) { white-space: normal !important; line-height: 1.9; }

/* ── Media picker in the dock ─────────────────────────────────────────────────────────────────
   The column is ~300px, so the header stacks: search on one row, then the Photos/Videos switch with Filters and
   Sources, then the tabs, then results in two columns. 2026-09-20. */
.ved .oi-dock .ms-dock .ms-header, .ved .dialog.ms-compact .ms-dock .ms-header { flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-bottom: 8px; }
.ved .oi-dock .ms-dock .ms-searchwrap, .ved .dialog.ms-compact .ms-dock .ms-searchwrap { flex: 1 0 100%; }
.ved .oi-dock .ms-dock .ms-search, .ved .dialog.ms-compact .ms-dock .ms-search { height: 36px; font-size: 14px; padding-left: 34px; }
.ved .oi-dock .ms-dock .ms-searchwrap i, .ved .dialog.ms-compact .ms-dock .ms-searchwrap i { left: 12px; font-size: 13px; }
.ved .oi-dock .ms-dock .ms-switch, .ved .dialog.ms-compact .ms-dock .ms-switch { order: 1; }
/* One height for both, or the switch (its own padding) sits a few pixels lower than the Filters button. */
.ved .oi-dock .ms-dock .ms-header .ms-filterbutton, .ved .oi-dock .ms-dock .ms-header .ms-source, .ved .dialog.ms-compact .ms-dock .ms-header .ms-filterbutton, .ved .dialog.ms-compact .ms-dock .ms-header .ms-source { order: 2; height: 34px; padding: 0 10px 0 12px; font-size: 13px; }
.ved .oi-dock .ms-dock .ms-switch, .ved .dialog.ms-compact .ms-dock .ms-switch { height: 34px; padding: 2px; box-sizing: border-box; }
.ved .oi-dock .ms-dock .ms-sw, .ved .dialog.ms-compact .ms-dock .ms-sw { height: 30px; font-size: 13px; }
.ved .oi-dock .ms-dock .ms-filterbox, .ved .dialog.ms-compact .ms-dock .ms-filterbox { width: 260px; }
/* Two columns of results, and video rows one per line. */
.ved .oi-dock .ms-dock .vs-grid:not([style*="display: none"]), .ved .dialog.ms-compact .ms-dock .vs-grid:not([style*="display: none"]) { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }

/* ── Editor without a left rail (desktop and tablet) ───────────────────────────────────────────
   The add buttons sit on top of the object panel, Backdrop and Music sit under it, and the play button and
   project length move into the timeline's left corner. The canvas gets the rail's width back. 2026-09-20. */
/* With rows above and below, the panel lays out as a column so the body takes what is left rather than a
   percentage that ignores them. */
.ved .oi:has(.oi-add) { display: flex; flex-direction: column; }
.ved .oi:has(.oi-add) > .oi-body { flex: 1 1 auto; min-height: 0; height: auto !important; }
.ved .oi:has(.oi-add) > .oi-add, .ved .oi:has(.oi-add) > .oi-head, .ved .oi:has(.oi-add) > .oi-foot { flex: 0 0 auto; }
/* Plum (2026-09-21, owner): the site's hero/guide gradient, so the add row reads as its own control, not part of the header. */
.ved .oi-add { background: linear-gradient(135deg, #2e1447 0%, #5e2466 55%, #862f55 100%); border-radius: 8px 8px 0 0; padding: 7px 8px 4px; box-sizing: border-box; }
/* Says what the four buttons are for; without it they read as tabs. */
.ved .ved-addcap { padding: 0 4px 4px; font: 500 11px/14px Poppins, sans-serif; color: rgba(255,255,255,.6); letter-spacing: .02em; }
.ved .ved-addcap i { font-size: 9px; margin-right: 3px; }
/* The head below the add row keeps its rounded top by default, which left a rounded corner inside a square block:
   square where they meet, rounded only at the outside edges. */
.ved .oi:has(.oi-add) > .oi-head { border-radius: 0 !important; }
.ved .ved-addrow { display: flex; gap: 4px; }
/* Icon above its label. Labels over a faint icon were tried and dropped (2026-09-21): the icons read as smudges. */
.ved .ved-addbtn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 7px;
                   border: 0; border-radius: 8px; background: transparent; color: var(--ved-ink);
                   font-family: Poppins, sans-serif; cursor: pointer; transition: background-color .15s, color .15s; }
.ved .ved-addbtn:hover:enabled { background: rgba(255,255,255,.12); color: #fff; }
.ved .ved-addico { display: block; font-size: 18px; line-height: 21px; }
.ved .ved-addico img { width: 21px; height: 21px; object-fit: contain; vertical-align: top; }
.ved .ved-addtext { display: block; margin: 0; font-size: 11.5px; font-weight: 600; line-height: 14px; letter-spacing: .01em; }
/* Backdrop and Music: tabs on the timeline, directly under the object panel. Rounded on top, flat where they meet it. */
.ved .oi-foot { background: transparent; padding: 0; box-sizing: border-box; }
.ved .ved-projtab { position: absolute; display: flex; align-items: flex-end; gap: 6px; }
.ved .ved-projrow { display: flex; gap: 6px; }
.ved .ved-projbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 16px; border: 0;
                    border-radius: 10px 10px 0 0; background: var(--ved-deep); color: var(--ved-ink);
                    font: 500 12.5px Poppins, sans-serif; cursor: pointer; transition: background-color .15s, color .15s; }
.ved .ved-projbtn:hover:enabled { background: var(--ved-chrome); color: #fff; }
.ved .ved-projbtn i { font-size: 12.5px; }
/* Timeline corner: the play button and the project length, where the rail's corner used to be. */
.ved .ved-timeplay { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 96px;
                     height: 100%; vertical-align: top; background: var(--ved-deep); box-sizing: border-box; }
.ved .ved-timeplay .ved-play { width: 44px; height: 44px; font-size: 17px; line-height: 44px; }
.ved .ved-timedur { font: 600 12px Poppins, sans-serif; color: rgba(255,255,255,.72); }

/* ── Project/video cards: even border, bright type pills (owner, 2026-09-20) ──────────────────────
   The 4px colored top edge read as a stray partial border, so the card gets one even hairline and the
   type pill carries the color instead: solid teal for video, solid indigo for image. */
.pj-card { border-top: 1px solid #e2ecef; }
.pj-card:hover { border-color: #cfdde1; }
.pj-type.pj-video { background: #1a6b7a; color: #fff; }
.pj-type.pj-image { background: #3c5bc7; color: #fff; }
/* "Second N" under the add row sat 7px below it and 14px above the list: more room above than below instead. */
.ved .oi:has(.oi-add) > .oi-head { height: auto !important; padding: 12px 20px 6px !important; line-height: 21px; }
.ved .oi:has(.oi-add) > .oi-body { padding-top: 2px !important; }
/* List thumbnails: inset in their card with their own rounded corners, rather than a square picture running into the
   card's rounded left edge. Same 3:2 shape, a little smaller, so the card keeps its height. 2026-09-21. */
.ved .oi-item > img.checkerboard, .ved .oi-item > canvas.checkerboard { width: 108px !important; height: 72px !important; margin: 4px 6px 4px 4px;
                                    border-radius: 8px !important; box-sizing: border-box; vertical-align: middle; }
/* Every picture sits inset on the checkerboard: photos, videos and the backdrop are drawn edge to edge, so without
   this their corners ran into the thumbnail's rounded ones (owner, 2026-09-21). The backdrop's is a canvas. */
.ved .oi-item > img.checkerboard, .ved .oi-item > canvas.checkerboard { padding: 5px 8px; object-fit: contain; }
/* A shape's thumbnail is the shape drawn edge to edge, so its outline ran into the thumbnail's rounded corners and was
   clipped. Inset it on the checkerboard like the other items' pictures. */
.ved .oi-item[title^="Shape"] > img.checkerboard { padding: 9px 14px; object-fit: contain; }
/* Effect length button (effecttimingselector.js): a stopwatch marks it as the effect's duration. */
.ets-ico { margin-right: 5px; font-size: 11px; color: #7a9299; vertical-align: 0; }

/* Layer icons (layer.js): the layer's own bar in the editor's light teal, the other two pale -- they were the text
   color (dark) at 30%. White on a selected row. 2026-09-21. */
.layericon .li-on { fill: #4abdac; }
.layericon .li-off { fill: #cfe3e6; }
.selecteditem .layericon .li-on, .popupselected .layericon .li-on { fill: #fff; }
.selecteditem .layericon .li-off, .popupselected .layericon .li-off { fill: rgba(255,255,255,.45); }

/* Dock tabs, 2026-09-21: 11.5px read as too small and the rows sat unevenly (13px above / 20px below on Media, the
   reverse on Animation). One flex row with a gap: at 13px the six animation tabs still fit a 318px column. */
.ved .oi-dock div:has(> .tab), .ved .dialog.ms-compact div:has(> .tab) { display: flex !important; align-items: flex-end; gap: 12px; flex-wrap: nowrap !important; white-space: nowrap !important;
  line-height: normal !important; padding: 0 2px !important; margin: 0 0 12px !important; }
.ved .oi-dock .ms-header + div:has(> .tab), .ved .dialog.ms-compact .ms-header + div:has(> .tab) { margin-top: 8px !important; margin-bottom: 4px !important; }
.ved .oi-dock .tab, .ved .dialog.ms-compact .tab { font-size: 13px !important; margin: 0 !important; padding: 0 1px 4px !important; line-height: 1.2 !important; }

/* Crop dialog (.icd) in the .mo-tool layout: sentence-case labels, teal range, quiet size caption. */
.icd .icd-crop { margin: 2px 0 6px !important; }
.icd .icd-meta { font: 500 12px/1.4 Poppins, sans-serif; color: #55707a; margin: 0 0 16px; text-align: center; }
.icd .icd-fields { display: flex; justify-content: center; gap: 10px; width: auto !important; }
.icd .icd-fields .part { margin: 0 !important; }
.icd .icd-fields .banner { text-transform: none !important; letter-spacing: 0 !important; font: 500 12px Poppins, sans-serif !important; color: #55707a !important; margin-bottom: 4px; }
.icd .icd-fields .selectbutton { border-radius: 8px !important; border-color: #cfdde1 !important; height: 32px; }
.icd .cbcontainer span { font: 500 13px Poppins, sans-serif; color: #0e3b45; }

/* The media thumbnail opens the crop dialog: say so with a chip, and lift the thumbnail on hover. */
.ved .ip-cropchip { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
  border: 0; border-radius: 999px; background: rgba(14,59,69,.82); color: #fff; font: 600 11px Poppins, sans-serif; cursor: pointer; }
.ved .ip-cropchip i { font-size: 10px; }
.ved .ip-cropchip:hover { background: #1a6b7a; }
.ved .oi-body img[title="Crop"]:hover { box-shadow: 0 0 0 2px #4abdac; }
.ved .oi-body .cropbutton { width: auto; min-width: 22px; padding: 0 5px; border-radius: 6px; border-color: #cfdde1; color: #1a6b7a !important; font: 600 11px Poppins, sans-serif; }
.ved .oi-body .cropbutton:hover { background: #eef7f8; border-color: #1a6b7a; }
/* Shape is disabled when the media fills the canvas; the gray disabled fill read as a different kind of control. */
.icd .icd-fields .selectbutton, .icd .icd-fields .selectbutton:disabled { background: #fff !important; }
.icd .icd-fields .selectbutton:disabled { opacity: .5; cursor: default; }
/* The photo columns carried their own 6px top margin under the tabs. */
.ved .oi-dock .searchresults > div > div, .ved .dialog.ms-compact .searchresults > div > div { margin-top: 0 !important; }
/* Videos in the dock: rows of one height left a lone portrait clip beside empty space. Two columns instead --
   landscape clips span both at their own shape, portrait and square ones take a column at 3:4, packed densely so
   they pair up. */
@media (min-width: 701px) {
  .ved .oi-dock .ms-dock .vs-grid:not([style*="display: none"]), .ved .dialog.ms-compact .ms-dock .vs-grid:not([style*="display: none"]) { display: grid !important; grid-template-columns: 1fr 1fr !important;
    grid-auto-flow: row dense; grid-auto-rows: max-content; align-content: start; gap: 6px !important; } /* max-content: the list has a fixed height, and auto rows shrank to nothing once results overflowed it (the card content is absolute) */
  .ved .oi-dock .vs-grid::after, .ved .dialog.ms-compact .vs-grid::after { display: none; }
  .ved .oi-dock .vs-grid > .card, .ved .dialog.ms-compact .vs-grid > .card { grid-column: span 2; height: auto !important; max-width: none !important; flex: none; aspect-ratio: var(--ar); }
  .ved .oi-dock .vs-grid > .card.vs-tall, .ved .dialog.ms-compact .vs-grid > .card.vs-tall { grid-column: span 1; aspect-ratio: 3 / 4; }
  .ved .oi-dock .vs-grid > .searchmessage, .ved .oi-dock .vs-grid > .morediv, .ved .oi-dock .vs-grid > .spinnerdiv, .ved .dialog.ms-compact .vs-grid > .searchmessage, .ved .dialog.ms-compact .vs-grid > .morediv, .ved .dialog.ms-compact .vs-grid > .spinnerdiv { grid-column: 1 / -1; }
}
/* The media picker opened from another dialog (a media animation's slot) is a compact dialog with the docked layout. */
.ved .dialog.ms-compact .ms-dock { padding: 0 4px; }
/* Media picker header, docked and compact (owner, 2026-09-21): Photos / Videos alone on top -- choose the kind first --
   then search and Filters sharing a line. A grid rather than wrapping flex, so a hidden switch (photo-only pickers)
   leaves no empty row: search and Filters simply move up. */
.ved .oi-dock .ms-dock .ms-header, .ved .dialog.ms-compact .ms-dock .ms-header { display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 8px; align-items: center; }
.ved .oi-dock .ms-dock .ms-header .ms-switch, .ved .dialog.ms-compact .ms-dock .ms-header .ms-switch { order: -1; grid-column: 1 / -1; justify-self: center; }
.ved .oi-dock .ms-dock .ms-header .ms-searchwrap, .ved .dialog.ms-compact .ms-dock .ms-header .ms-searchwrap { order: 0; min-width: 0; }
.ved .oi-dock .ms-dock .ms-header .ms-filterbutton, .ved .dialog.ms-compact .ms-dock .ms-header .ms-filterbutton { order: 1; height: 36px; }
/* Animation picker stills (hover to play): the still sits where the canvas does and hides while the card plays. */
.as-card img.as-still { pointer-events: none; }
.as-card .as-live > img.as-still { visibility: hidden; }
/* Photos and videos share one look in the dock (owner, 2026-09-21): two masonry columns filling the list.
   Photos: the column pair loses its 6px side margins, so the wider 146px columns fill the width. */
.ved .oi-dock .searchresults > div[style*="white-space: nowrap"], .ved .dialog.ms-compact .searchresults > div[style*="white-space: nowrap"] { margin: 0 !important; width: 100% !important; }
.ved .oi-dock .searchresults > div[style*="white-space: nowrap"] > div:last-child, .ved .dialog.ms-compact .searchresults > div[style*="white-space: nowrap"] > div:last-child { margin-right: 0 !important; }
/* Videos: one column each at the clip's own shape, spanning 2px rows (videoselector.js masonry() sets the span). */
@media (min-width: 701px) {
  .ved .oi-dock .ms-dock .vs-grid:not([style*="display: none"]), .ved .dialog.ms-compact .ms-dock .vs-grid:not([style*="display: none"]) {
    grid-auto-rows: 2px !important; row-gap: 0 !important; column-gap: 6px !important; }
  .ved .oi-dock .vs-grid > .card, .ved .dialog.ms-compact .vs-grid > .card { grid-column: span 1 !important; aspect-ratio: var(--ar) !important; align-self: start; }
}
/* Search and Filters reach only the stock sources: hidden on Uploads and Recent. */
.ms-nonstock .ms-searchwrap, .ms-nonstock .ms-filterbutton { display: none !important; }
/* Press and hold plays an animation card on touch screens: no text selection, callout or magnifier during the hold. */
.as-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Media picker order in the dock and compact dialog (owner, 2026-09-21): Photos / Videos, then the tabs, then search and
   Filters (stock only), then results. The header becomes transparent to layout so its pieces sit in the panel's grid. */
.ved .oi-dock .ms-panel.ms-dock, .ved .dialog.ms-compact .ms-panel.ms-dock { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 0; align-content: start; }
.ved .oi-dock .ms-dock > .ms-header, .ved .dialog.ms-compact .ms-dock > .ms-header { display: contents !important; }
.ved .oi-dock .ms-dock > .ms-header > .ms-switch, .ved .dialog.ms-compact .ms-dock > .ms-header > .ms-switch { grid-row: 1; grid-column: 1 / -1; justify-self: center; margin-bottom: 10px; }
.ved .oi-dock .ms-dock > div:has(> .tab), .ved .dialog.ms-compact .ms-dock > div:has(> .tab) { grid-row: 2; grid-column: 1 / -1; margin: 0 0 10px !important; }
.ved .oi-dock .ms-dock > .ms-header > .ms-searchwrap, .ved .dialog.ms-compact .ms-dock > .ms-header > .ms-searchwrap { grid-row: 3; grid-column: 1; margin-bottom: 8px; }
.ved .oi-dock .ms-dock > .ms-header > .ms-filterbutton, .ved .dialog.ms-compact .ms-dock > .ms-header > .ms-filterbutton { grid-row: 3; grid-column: 2; margin-bottom: 8px; }
.ved .oi-dock .ms-dock > div:not(.ms-header):not(:has(> .tab)), .ved .dialog.ms-compact .ms-dock > div:not(.ms-header):not(:has(> .tab)) { grid-column: 1 / -1; }
/* Animation cards: centered in the column (they sat left, with the slack on the right). */
.ved .oi-dock .searchresults:has(> .as-card), .ved .oi-dock div:has(> .as-card) { justify-content: center !important; }
/* While a card's still is being picked its canvas plays hidden (unless hovered), over a soft placeholder. */
.as-sampling:not(.as-hover) > canvas { visibility: hidden; }
.as-sampling:not(.as-hover) { background: linear-gradient(100deg, #f1f6f7 30%, #e6eff1 50%, #f1f6f7 70%) !important; background-size: 300% 100% !important;
  animation: as-shimmer 1.4s linear infinite; border-radius: 6px; }
@keyframes as-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* The Replace button's old pointer arrow, hidden in the object panel, still showed in dialogs (an animation's media settings). */
.ved .dialog .arrow:has(+ .actionbutton) { display: none; }
.ved .dialog .arrow + .actionbutton { margin-left: 12px !important; } /* the same gap from the media as in the object panel */
/* Animation cards whose preview is drawn small in its canvas (Text Spin, Text Rock) are zoomed in the card. */
.as-zoom { overflow: hidden; }
.as-zoom > canvas, .as-zoom > img.as-still { transform: scale(var(--ps, 1)); }
/* A compact picker anchored to an animation's media slot drops down beside it (imagesearch/videoselector show()). */
.ms-popover-ov { align-items: flex-start !important; justify-content: flex-start !important; background: transparent !important; }
.dialog.ms-popover { position: absolute !important; margin: 0 !important; box-shadow: 0 14px 44px rgba(14,59,69,.30), 0 2px 8px rgba(14,59,69,.12) !important; }
.dialog.ms-popover, .dialog.ms-popover .dialogcontent { height: auto !important; min-height: 0 !important; max-height: none !important; flex: none !important; }
/* ── Color panel (colorspectrum.js, 2026-09-21): one scroll of labeled sections, no tabs, no Spectrum plugin ── */
.cp-panel { padding: 0 !important; }
.cp-box { width: 264px; max-height: min(520px, calc(100vh - 120px)); overflow-y: auto; padding: 12px; box-sizing: border-box; font-family: Poppins, sans-serif; }
.cp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cp-chip { flex: none; width: 32px; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(14,59,69,.15);
  background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#dfe7ea 0 25%, #fff 0 50%) 0 0/10px 10px; }
.cp-hex { flex: 1 1 auto; min-width: 0; height: 32px; border: 1px solid #cfdde1; border-radius: 8px; padding: 0 10px; font: 500 13px Poppins, sans-serif; color: #0e3b45; text-transform: uppercase; box-sizing: border-box; }
.cp-hex:focus { outline: none; border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(74,189,172,.2); }
.cp-alpha { flex: none; font: 500 11px Poppins, sans-serif; color: #55707a; min-width: 0; }
.cp-drop { flex: none; width: 32px; height: 32px; border: 1px solid #cfdde1; border-radius: 8px; background: #fff; color: #1a6b7a; cursor: pointer; }
.cp-drop:hover { background: #eef7f8; border-color: #1a6b7a; }
.cp-sec { margin-top: 10px; }
.cp-h { font: 600 11px Poppins, sans-serif; color: #55707a; letter-spacing: .02em; margin: 0 0 6px; text-align: left; }
.cp-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; } /* 20 defaults = two full rows, 10 see-through = one */
.cp-sw { position: relative; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 7px; cursor: pointer;
  background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#dfe7ea 0 25%, #fff 0 50%) 0 0/8px 8px; box-shadow: inset 0 0 0 1px rgba(14,59,69,.14); }
.cp-sw:hover { transform: scale(1.08); }
.cp-sw.cp-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a6b7a; }
.cp-none { background: #fff !important; }
.cp-none:after, .cp-chip.cp-none:after { content: ""; position: absolute; left: 50%; top: 12%; bottom: 12%; width: 2px; background: #e5484d; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.cp-chip.cp-none { position: relative; background: #fff; }
.cp-plus { background: #eef7f8 !important; color: #1a6b7a; font-size: 11px; box-shadow: inset 0 0 0 1px #cfdde1 !important; }
.cp-plus.cp-on { background: #1a6b7a !important; color: #fff; box-shadow: none !important; }
.cp-photos { display: flex; flex-direction: column; gap: 6px; }
.cp-prow { display: grid; grid-template-columns: 44px repeat(8, 1fr); gap: 4px; align-items: center; }
.cp-thumb { width: 44px; height: 24px; border: 0; padding: 0; border-radius: 6px; background-size: cover; background-position: center; cursor: crosshair; box-shadow: inset 0 0 0 1px rgba(14,59,69,.15); }
.cp-prow .cp-sw { border-radius: 6px; }
.cp-custom { display: none; margin-top: 10px; }
.cp-custom.cp-open { display: block; }
.cp-sv { position: relative; height: 140px; border-radius: 8px; cursor: crosshair; touch-action: none;
  background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.cp-sv-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.3); pointer-events: none; }
.cp-bar { position: relative; height: 12px; border-radius: 999px; margin-top: 10px; cursor: pointer; touch-action: none; }
.cp-hue { background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.cp-alp { background: repeating-conic-gradient(#dfe7ea 0 25%, #fff 0 50%) 0 0/8px 8px; }
.cp-alp-fill { position: absolute; inset: 0; border-radius: inherit; }
.cp-bar-dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.3); pointer-events: none; }
/* ── Arrange shown in full (dialogpanel.js / imagepanel.js, 2026-09-21): pill switches for Fit to canvas and Layer,
   always-visible X / Y / W / H / rotation fields that follow the object on the canvas. ── */
.ved .ar-row { display: block; }
.ved .ar-row > .part { width: 100%; }
.ved .ar-seg { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: #eef3f4; box-shadow: inset 0 0 0 1px #dbe7ea; }
.ved .ar-pill { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 6px;
  border: 0; border-radius: 8px; background: transparent; color: #55707a; font: 600 12px Poppins, sans-serif; cursor: pointer; white-space: nowrap; }
.ved .ar-pill:hover { color: #0e3b45; background: rgba(255,255,255,.6); }
.ved .ar-pill.ar-on { background: #fff; color: #0e3b45; box-shadow: 0 1px 3px rgba(14,59,69,.18); }
.ved .ar-pill .layericon { flex: none; width: 15px; height: 15px; }
/* two rows so values like 1199 and -135° have room: X Y rotation / W H */
.ved .ar-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ved .ar-x { grid-column: 1; grid-row: 1; } .ved .ar-y { grid-column: 2; grid-row: 1; } .ved .ar-r { grid-column: 3; grid-row: 1; }
.ved .ar-w { grid-column: 1; grid-row: 2; } .ved .ar-h { grid-column: 2; grid-row: 2; }
.ved .ar-field { position: relative; }
.ved .ar-field label { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px; border: 1px solid #cfdde1; border-radius: 8px; background: #fff;
  font: 600 11px Poppins, sans-serif; color: #7a9299; cursor: text; box-sizing: border-box; }
.ved .ar-field label:focus-within { border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(74,189,172,.2); }
.ved .ar-field label i { font-size: 10px; }
.ved .ar-field input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; padding: 0; background: transparent; font: 500 12.5px Poppins, sans-serif; color: #0e3b45; text-align: right; }
.ved .ar-field .ar-unit { flex: none; margin-left: -2px; font: 500 12px Poppins, sans-serif; color: #7a9299; }
/* A section with no heading (the position / size / layer group): just the divider line. */
.ved .oi-sectioned .oi-sechead:empty { padding-top: 10px; min-height: 0; line-height: 0; }
/* The backdrop photo's pan-and-zoom dialog (ivdialog.js .ivd) on the tool layout: sentence-case labels, the object
   panel's Replace and Alt buttons. */
.ivd .banner { text-transform: none !important; letter-spacing: 0 !important; font: 500 12px Poppins, sans-serif !important; color: #55707a !important; margin-bottom: 4px; }
.ivd .ivd-replace { margin: 0 0 0 12px !important; padding: 6px 16px !important; font-size: 14px !important; }
.ivd .cropbutton { width: auto; min-width: 22px; padding: 0 5px; border-radius: 6px; border-color: #cfdde1; color: #1a6b7a !important; font: 600 11px Poppins, sans-serif; }
.ivd .cropbutton:hover { background: #eef7f8; border-color: #1a6b7a; }
.ivd label { font-family: Poppins, sans-serif !important; color: #55707a !important; }
/* A font row loading after a pick (fontdialog.js): a small spinner at its right instead of the full-screen progress. */
.fd .fontbutton.fd-loading { position: relative; }
.fd .fontbutton.fd-loading .fd-rowcat { visibility: hidden; }
.fd .fontbutton.fd-loading:after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  border: 2px solid #cfe3e6; border-top-color: #1a6b7a; animation: fd-spin .7s linear infinite; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
/* Font popup style row (fontdialog.js, 2026-09-21): Movidmo's usual dropdown under a "Style" caption; its list shows
   five styles at a time, each in its own weight and slant. */
.fd .fd-stylepart { margin-top: 10px; }
.fd .fd-stylepick { width: 100% !important; }
.fd-stylelist { max-height: 184px; overflow-y: auto; } /* five 36px rows plus the padding */
.fd-stylelist .selectitem { font-size: 15px !important; padding: 6px 12px !important; line-height: 22px; }
/* Search boxes built by getSearch() are a field plus a clear and a search button, each with its own border: on focus
   the whole box takes the highlight, not just the field (it stopped halfway). */
.searchbox:focus-within .searchterm, .searchbox:focus-within .searchbutton, .searchbox:focus-within .searchclear { border-color: #1a6b7a !important; }

/* One search box everywhere (2026-09-21). There were six looks: the media picker's teal-ringed pill, the shapes/icons/
   sound three-piece box (getSearch), the font dialog's square-cornered field, My pages, the templates page's orange
   frame and the AI tools' flat field. They now share one outline: a light pill, a darker edge on hover, and on focus a
   teal edge with a soft ring. Sizes still suit each place; only the outline, corners and focus are shared.
   The help center's hero search is left alone: it sits borderless on a dark photo on purpose. */
:root { --sb-line: #d5e2e6; --sb-hover: #b9ccd1; --sb-focus: #1a6b7a; --sb-ring: 0 0 0 3px rgba(26,107,122,.16); }
.ms-search, .fd .fd-search, .mp-search input, body .vg-msearch input, .tsearchform, .searchbox {
  border: 1px solid var(--sb-line) !important; border-radius: 999px !important; background: #fff; box-shadow: none; transition: border-color .15s, box-shadow .15s; }
.ms-search:hover, .fd .fd-search:hover, .mp-search input:hover, body .vg-msearch input:hover, .tsearchform:hover, .searchbox:hover { border-color: var(--sb-hover) !important; }
.ms-search:focus, .fd .fd-search:focus, .mp-search input:focus, body .vg-msearch input:focus, .tsearchform:focus-within, .searchbox:focus-within {
  outline: none; border-color: var(--sb-focus) !important; box-shadow: var(--sb-ring) !important; }
.ms-search::placeholder, .fd .fd-search::placeholder, body .vg-msearch input::placeholder, .searchbox .searchterm::placeholder, .tsearchinput::placeholder { color: #7a9299; }
body .vg-msearch input { height: 38px; padding: 0 16px; }
/* getSearch: the wrapper is now the frame, so its parts lose their own borders and the magnifier moves to the front
   like everywhere else. It is still a button: clicking it runs the search. */
.searchbox { display: inline-flex !important; align-items: center; height: 36px; box-sizing: border-box; overflow: hidden; vertical-align: middle; }
.searchbox .searchterm, .searchbox .searchterm:hover, .searchbox .searchterm:focus, .ved .os-search input.searchterm, .ved .os-search input.searchterm:focus {
  height: 34px !important; border: 0 !important; border-radius: 0 !important; background: transparent; box-shadow: none !important; outline: none;
  padding: 0 6px 0 2px !important; font: 400 14px Poppins, sans-serif; color: #0e3b45; }
.searchbox .searchbutton, .ved .os-search .searchbutton { order: -1; flex: none; height: 34px !important; width: 36px !important; margin: 0 !important; padding: 0 0 0 4px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #7a9299 !important; font-size: 13px !important; }
.searchbox .searchbutton:hover:enabled, .ved .os-search .searchbutton:hover:enabled { background: transparent !important; color: #0e3b45 !important; }
.searchbox .searchclear, .ved .searchbox .searchclear { flex: none; height: 26px; width: 26px; margin: 0 5px 0 0; padding: 0; border: 0 !important; border-radius: 50%;
  background: #eef3f4; color: #55707a; font-size: 11px; cursor: pointer; }
.searchbox .searchclear:hover { background: #dfe9ec; color: #0e3b45; }
/* Room under a docked search before the list starts (the tab's right-hand row was a fixed 30px, shorter than the box). */
.ved .oi-dock div:has(> .os-search), .ved .dialog.ms-compact div:has(> .os-search), .ved div:has(> .as-search) { height: auto !important; margin-bottom: 10px !important; }
.ved .oi-dock .os-search, .ved .dialog.ms-compact .os-search { display: flex !important; }
.ved .as-searchrow { flex: 0 0 auto; margin: 0 0 10px; }
.ved .as-searchrow .os-search { display: flex !important; width: 100%; }
.ved .as-searchrow .os-search input.searchterm { width: auto !important; flex: 1; min-width: 0; }
.as-nomatch { width: 100%; padding: 24px 8px; text-align: center; font: 400 15px Poppins, sans-serif; color: #7a9299; }
.ms-searchwrap > i:first-child { pointer-events: auto !important; cursor: pointer; } .ms-searchwrap > i:first-child:hover { color: #0e3b45; }
/* Go arrow for searches that wait for Enter: a small teal circle at the end of the field, shown only while there is
   something new to search (dialogutil.js getSearch, imagesearch/videoselector ms-go). */
.searchbox .searchgo, .ms-searchwrap .ms-go { flex: none; width: 28px; height: 28px; margin: 0 4px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: #1a6b7a; color: #fff; font-size: 12px; cursor: pointer; box-sizing: border-box; }
.searchbox .searchgo:hover, .ms-searchwrap .ms-go:hover { background: #0e3b45; }
.ms-searchwrap .ms-go { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.ms-searchwrap:has(.ms-go:not([style*="none"])) .ms-clear { right: 38px; }
.ms-searchwrap:has(.ms-go:not([style*="none"])) .ms-search { padding-right: 72px; }
.ms-searchwrap .ms-go i, .searchbox .searchgo i { position: static !important; transform: none !important; color: #fff !important; font-size: 12px; pointer-events: none; }

/* Font dialog, more structure (2026-09-22). The list had a faint edge and the settings under it each lined up their
   own way. Now: the list is a framed, tinted well whose section headings stay put while it scrolls, rows sit on white
   when hovered or chosen; below a divider, Style, Letter spacing and Line height share one label column. */
.fd .fd-list { background: #f3f7f8; border: 1px solid #cfdde1; border-radius: 12px; padding: 0 6px 6px; box-shadow: inset 0 1px 2px rgba(14,59,69,.05); }
.fd .fontbanner { position: sticky; top: 0; z-index: 1; margin: 0 -6px 2px; padding: 10px 14px 6px; background: #f3f7f8;
                  border-bottom: 1px solid #dfe9ec; color: #1a6b7a; font-weight: 700; }
.fd .fd-section + .fd-section .fontbanner { margin-top: 4px; }
.fd .fontbutton { background: transparent; }
.fd .fontbutton:hover, .fd .fontbutton.fd-kb { background: #fff; }
.fd .fontbutton.selectedfontbutton { background: #fff; border-color: #1a6b7a; box-shadow: 0 1px 3px rgba(14,59,69,.10); }
.fd .fontbutton.selectedfontbutton .fd-rowcat { color: #1a6b7a; font-weight: 600; }
.fd .fd-stylepart, .fd .fd-sliders { margin-top: 0; }
.fd .fd-stylepart { display: flex !important; align-items: center; gap: 8px; margin-top: 14px !important; padding-top: 14px; border-top: 1px solid #e3edf0; }
.fd .fd-stylepart > .banner, .fd .fd-sliderhead { flex: 0 0 104px; margin: 0 !important; }
.fd .fd-stylepart .fd-stylepick { flex: 1; width: auto !important; height: 34px; border-radius: 8px; }
.fd .fd-stylepart .fd-stylepick .selecttext { text-align: left !important; padding-left: 12px; font: 500 14px Poppins, sans-serif; color: #0e3b45; }
.fd .fd-sliders { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fd .fd-slider { margin: 0 !important; }

/* Account menu (the avatar's dropdown), 2026-09-22: it was the old all-caps list with a small orange block for New
   Project. Now it matches the Projects page menus (.pj-menulist): sentence case, Poppins, soft hover, and New project
   as a full-width pill in the Publish orange. The markup (includes/header.php) is untouched: its words are in capitals,
   so they are lowered here and the first letter raised again. */
#usermenu.dropdown-content { min-width: 200px; padding: 8px; border-radius: 12px; border: 1px solid #e2ecef; background: #fff;
  box-shadow: 0 10px 28px rgba(14,59,69,.16); box-sizing: border-box; }
#usermenu .user_login { padding: 4px 10px 8px; font: 500 12.5px Poppins, sans-serif; color: #7a9299; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#usermenu > div:has(> .actionbutton) { margin: 0 0 6px !important; padding-bottom: 8px; border-bottom: 1px solid #e8eff1; text-align: left !important; }
#usermenu .actionbutton { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 38px; box-sizing: border-box;
  padding: 0 14px !important; border: 0; border-radius: 999px; background: #fc4a1a !important; color: #fff !important;
  font: 600 14px Poppins, sans-serif !important; letter-spacing: 0; text-transform: lowercase; text-decoration: none;
  box-shadow: 0 3px 10px rgba(252,74,26,.28); transition: background-color .15s, box-shadow .15s; }
#usermenu .actionbutton::first-letter { text-transform: uppercase; }
#usermenu .actionbutton::before { content: "+"; font: 600 18px/1 Poppins, sans-serif; margin-top: -2px; }
#usermenu .actionbutton:hover { background: #e33d0f !important; box-shadow: 0 4px 14px rgba(252,74,26,.36); }
#usermenu a.usermenu { display: block; padding: 9px 10px; border-radius: 8px; font: 500 14px Poppins, sans-serif; color: #0e3b45;
  text-transform: lowercase; letter-spacing: 0; text-align: left; text-decoration: none; }
#usermenu a.usermenu::first-letter { text-transform: uppercase; }
#usermenu a.usermenu:hover { background: #eef5f6; color: #0e3b45; }
#usermenu a.usermenu[href="/signout/"] { margin-top: 4px; border-top: 1px solid #e8eff1; border-radius: 0 0 8px 8px; color: #55707a; }
/* first-letter needs a block, not flex (and nothing drawn before the text) */
#usermenu .actionbutton { display: block !important; line-height: 38px !important; text-align: center; }
#usermenu .actionbutton::before { content: none; }
#usermenu a.usermenu, #usermenu a.usermenu:visited { color: #0e3b45 !important; background: transparent !important; }
#usermenu a.usermenu:hover { background: #eef5f6 !important; color: #0e3b45 !important; }
#usermenu a.usermenu[href="/signout/"] { color: #55707a !important; border-top: 1px solid #e8eff1 !important; border-radius: 0 0 8px 8px; margin-top: 4px; }

/* New project size picker (aspectdialog.js), 2026-09-22: the AI pages' size cards (ai.php .vg-format), as buttons. */
.sz-cards { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; padding: 4px 2px 6px; max-width: 100%; box-sizing: border-box; }
.sz-card { position: relative; display: flex; flex-direction: column; align-items: center; width: 176px; padding: 18px 12px 16px; box-sizing: border-box;
  border: 1.5px solid #dde8eb; border-radius: 14px; background: #fff; cursor: pointer; text-align: center; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.sz-card:hover { border-color: #3cb3c7; box-shadow: 0 8px 22px rgba(14,59,69,.12); transform: translateY(-2px); }
.sz-card:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 2px; }
.sz-card.sz-current { border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.14); }
.rf-beta { display: inline-block; margin-left: 7px; padding: 2px 6px; border-radius: 999px;
          background: rgba(26,107,122,.12); color: #1a6b7a; font: 700 9.5px/1 Poppins, sans-serif;
          letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px; }
.ved-projbtn { position: relative; }
.vp-btn { position: relative; }
.vp-btn .vp-new { top: -5px; right: -5px; padding: 1px 4px; font-size: 8px; line-height: 1.2; }
.ved-projbtn .ved-projnew { top: -9px; right: -6px; padding: 2px 6px; font-size: 9px; line-height: 1.2; }
.sz-new { position: absolute; top: 9px; right: 9px; padding: 3px 7px; border-radius: 999px; background: #FC4A1A; color: #fff;
         font: 700 10px/1 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.sz-frame { height: 128px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; }
.sz-shape { box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2.5px solid #3cb3c7; border-radius: 6px;
  background: linear-gradient(160deg,#f1fafb,#dff2f5); color: #1a6b7a; font: 600 13px Poppins, sans-serif; font-variant-numeric: tabular-nums; transition: background .15s; }
.sz-card:hover .sz-shape { background: linear-gradient(160deg,#e3f5f8,#c9ebf0); }
/* All four at the same area (9216 px², Vertical's), so no shape looks bigger than another: Wide was 27% larger
   and Portrait 15% larger than Vertical, and Portrait drew the eye (owner, 2026-10-15). */
.sz-wide .sz-shape { width: 128px; height: 72px; }
.sz-square .sz-shape { width: 96px; height: 96px; }
.sz-vertical .sz-shape { width: 72px; height: 128px; }
.sz-portrait .sz-shape { width: 86px; height: 107px; }
.sz-name { display: block; font: 700 16px Poppins, sans-serif; color: #0e3b45; }
.sz-px { display: block; margin: 1px 0 4px; font: 500 13.5px Poppins, sans-serif; color: #1a6b7a; font-variant-numeric: tabular-nums; }
.sz-use { display: block; font: 400 13px/1.45 'Open Sans', sans-serif; color: #5d747a; }
@media (max-width: 600px) {
  .sz-cards { gap: 8px; }
  .sz-card { width: 46%; min-width: 0; padding: 12px 6px; }
  .sz-frame { height: 86px; }
  .sz-wide .sz-shape { width: 86px; height: 48px; } .sz-square .sz-shape { width: 64px; height: 64px; } .sz-vertical .sz-shape { width: 48px; height: 86px; font-size: 11px; }
  .sz-portrait .sz-shape { width: 58px; height: 72px; }
  .sz-new { top: 6px; right: 6px; padding: 2px 5px; font-size: 9px; }
  .sz-name { font-size: 14px; } .sz-px, .sz-use { font-size: 11.5px; }
}

/* Media picker buttons match the Photos / Videos switch (30px, 13px Poppins) -- Clear and Refresh were 33px at 16px,
   bigger than the switch above them. Upload stays the orange action; Clear and Refresh are secondary, outlined like
   Filters. 2026-09-22. */
.ved .ms-dock .actionbutton { height: 30px !important; line-height: 28px !important; padding: 0 14px !important; margin-top: 0 !important; margin-bottom: 0 !important;
  font: 600 13px Poppins, sans-serif !important; border-radius: 999px !important; box-sizing: border-box; vertical-align: middle; }
.ved .ms-dock .actionbutton:not(.uploadbutton) { background: #fff !important; color: #1a6b7a !important; border: 1px solid #d5e2e6 !important; box-shadow: none !important; }
.ved .ms-dock .actionbutton:not(.uploadbutton):hover:enabled { border-color: #1a6b7a !important; background: #f3f8f9 !important; }
.ved .ms-dock .actionbutton:not(.uploadbutton):disabled { color: #9fb3b8 !important; background: #fff !important; }

/* Back to the top (searchpanel.js): the selected tab lets clicks through to its strip, which scrolls the list up;
   and a round arrow shows in the list's corner once it is two screens down. 2026-09-22. */
.sp-tabs > .tab:disabled { pointer-events: none; }
.sp-tabs:has(> .tab:disabled) { cursor: default; }
.sp-totop { position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: #1a6b7a; color: #fff; font-size: 15px; cursor: pointer; box-shadow: 0 4px 14px rgba(14,59,69,.28);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s, background-color .15s; }
.sp-totop.sp-show { opacity: 1; transform: none; pointer-events: auto; }
.sp-totop:hover { background: #0e3b45; }
.sp-totop:focus-visible { outline: 3px solid rgba(60,179,199,.5); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sp-totop { transition: none; } }

/* A tab's option row with a search box (Music: Genre, Mood, search; Getty videos: order, search). The row was a fixed
   30px and the search box is 36px, so it spilled out and the menus sat shorter beside it. One 36px line now, with the
   menus framed like the search. 2026-09-22. */
.ved div:has(> .searchbox):not([style*="display: none"]) { display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; height: auto !important; min-height: 36px; margin-bottom: 10px; }
.ved div:has(> .searchbox) > .selectbutton { height: 36px !important; width: auto !important; min-width: 124px; margin: 0 !important; padding: 0 10px 0 14px;
  border: 1px solid #d5e2e6 !important; border-radius: 999px !important; background: #fff; display: inline-flex !important; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; }
.ved div:has(> .searchbox) > .selectbutton:hover { border-color: #b9ccd1 !important; }
.ved div:has(> .searchbox) > .selectbutton .selecttext { font: 500 13.5px Poppins, sans-serif !important; color: #0e3b45; width: auto !important; }
.ved div:has(> .searchbox):not(:has(> .os-search)) > .searchbox .searchterm { width: 200px !important; }
@media (max-width: 600px) { .ved div:has(> .searchbox):not(:has(> .os-search)) > .searchbox { flex: 1 1 100%; } .ved div:has(> .searchbox):not(:has(> .os-search)) > .searchbox .searchterm { width: auto !important; flex: 1; } }

/* ── Phones, 2026-09-22 ─────────────────────────────────────────────────────────────────────────────────── */
/* Add menu (ui.js MenuDialog): four plum tiles two by two, like the add row on bigger screens, in place of the big
   dark-gray circles whose labels ran past their edges. */
.ved .md-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; width: min(340px, calc(100vw - 64px)); margin: 4px auto 6px; }
.ved .md-item { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: auto !important; height: 104px !important;
  margin: 0 !important; padding: 0 8px !important; border: 0 !important; border-radius: 16px !important;
  background: linear-gradient(135deg,#2e1447,#5e2466 55%,#862f55) !important; color: #fff !important;
  font: 600 14px Poppins, sans-serif !important; letter-spacing: 0; text-transform: none; box-shadow: 0 4px 12px rgba(46,20,71,.22); }
.ved .md-item > div:first-child { font-size: 28px !important; height: auto !important; width: auto !important; line-height: 1; }
.ved .md-item:active { transform: scale(.97); }
.ved .md-item:disabled { opacity: .45; }
/* Media picker as a dialog (phones): its buttons match the Photos / Videos switch too (see the .ms-dock rule) */
.ved .ms-panel .actionbutton { height: 30px !important; line-height: 28px !important; padding: 0 14px !important; margin-top: 0 !important; margin-bottom: 0 !important;
  font: 600 13px Poppins, sans-serif !important; border-radius: 999px !important; box-sizing: border-box; vertical-align: middle; }
.ved .ms-panel .actionbutton:not(.uploadbutton) { background: #fff !important; color: #1a6b7a !important; border: 1px solid #d5e2e6 !important; box-shadow: none !important; }
.ved .ms-panel .actionbutton:not(.uploadbutton):disabled { color: #9fb3b8 !important; }
/* Layer pills: at phone width the three labels only just fit, and not at all with the icons, so the icons go and a
   label that still can't fit ends in an ellipsis rather than running into its neighbor */
.ved .ar-pill { overflow: hidden; }
.ved .ar-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .ved .ar-pill .layericon { display: none; } .ved .ar-pill { padding: 0 4px; } }
/* The project length pinned under the canvas's left corner: the object panel slides over that corner on phones and
   the label sat on top of it. It goes under the panel now. */
.ved-phone .vp-duration { z-index: 0 !important; }
/* No fades at the object panel's edges to hint at more to scroll (owner, 2026-09-22): the scrollbar says it. */
.ved .oi-body::before, .ved .oi-body::after { display: none !important; }
.ved .md-item > div:first-child { display: flex !important; align-items: center; justify-content: center; height: 34px !important; overflow: visible; }
.ved .md-item > div:first-child i, .ved .md-item > div:first-child img { font-size: 28px !important; max-height: 34px; }
/* Phones: the same two-column video masonry as the docked picker (the rules above are for 701px and up, and below that
   every card spanned both columns, so clips stood one per row and tall ones floated in white space). 2026-09-22. */
.ved .dialog.ms-phone .ms-dock .vs-grid:not([style*="display: none"]) { display: grid !important; grid-template-columns: 1fr 1fr !important;
  grid-auto-rows: 2px !important; row-gap: 0 !important; column-gap: 6px !important; }
.ved .dialog.ms-phone .ms-dock .vs-grid > .card { grid-column: span 1 !important; aspect-ratio: var(--ar) !important; align-self: start; height: auto !important; width: auto !important; }
.ved .dialog.ms-phone .ms-dock .vs-grid::after { display: none; }
.ved .dialog.ms-phone .ms-dock .vs-grid > .searchmessage, .ved .dialog.ms-phone .ms-dock .vs-grid > .morediv, .ved .dialog.ms-phone .ms-dock .vs-grid > .spinnerdiv { grid-column: 1 / -1; }
/* Phone animation picker: two cards to a row whatever the exact widths (the flex row had ~4px to spare and the second
   card wrapped on some phones). 2026-09-22. */
.ved-phone .dialog div:has(> .as-card) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; justify-items: stretch; }
.ved-phone .dialog .as-card { width: auto !important; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin: 0 !important; }
.ved-phone .dialog .as-card .as-cap { max-width: 100%; }

/* Remove background (imagepanel.js removeBackgroundDialog), 2026-09-22 */
.rbg { width: min(400px, calc(100vw - 72px)); }
.rbg-stage { position: relative; height: 240px; border-radius: 12px; overflow: hidden; border: 1px solid #dbe7ea; display: flex; align-items: center; justify-content: center; }
.rbg-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; transition: opacity .2s; }
.rbg-veil { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(255,255,255,.72); font: 600 14px Poppins, sans-serif; color: #0e3b45; }
.rbg-working .rbg-veil { display: flex; }
.rbg-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #cfe3e7; border-top-color: #1a6b7a; animation: rbgspin .8s linear infinite; }
@keyframes rbgspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rbg-spin { animation-duration: 2.4s; } }
.rbg-note { min-height: 20px; margin: 10px 2px 0; font: 400 13.5px/1.45 'Open Sans', sans-serif; color: #1a6b7a; }
.rbg-note:empty { display: none; }
.rbg-note.rbg-err { color: #b3261e; }
.rbg-done .rbg-stage { border-color: #1a6b7a; }
.ved-phone .vp-play { flex-direction: column; gap: 6px; }
.ved-phone .vp-play .vp-duration { position: static !important; height: auto; line-height: 1.2; background: transparent !important; color: rgba(255,255,255,.75) !important;
  font: 600 11px Poppins, sans-serif !important; border-radius: 0; padding: 0; width: auto !important; }

/* ── Phone sheet (videodesigner.js setupPhoneSheet, ?msheet=1), 2026-09-22 ─────────────────────────────────────
   The object panel as a sheet from the bottom instead of a side panel on a grip. */
.ved-msheet .oi.oi-sheet { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important;
  height: min(56vh, 520px) !important; max-height: none !important; z-index: 60; padding: 0 !important; box-sizing: border-box;
  transform: translateY(105%); transition: transform .26s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -10px 30px rgba(14,59,69,.22);
  border-radius: 18px 18px 0 0; background: #fff !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
.ved-msheet .oi.oi-sheet.oi-sheet-open { transform: none; }
.ved-msheet .oi.oi-sheet .oi-head { position: relative; border-radius: 18px 18px 0 0 !important; padding-top: 14px !important; }
.ved-msheet .oi.oi-sheet .oi-head::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #cfdde1; }
.ved-msheet .oi-sheetclose { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef3f4; color: #0e3b45; font-size: 14px; cursor: pointer; }
.ved-msheet #editcontainer { transition: transform .26s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .ved-msheet .oi.oi-sheet, .ved-msheet #editcontainer { transition: none; } }
/* The phone action row with the sheet's Layers button: eight buttons, so on phones under 360px (iPhone SE) they
   narrow a little to keep clear of each other */
@media (max-width: 359px) {
  .ved-msheet .vp-btn { width: 34px !important; margin-left: 3px !important; }
  .ved-msheet .vp-save { width: 36px !important; }
  .ved-msheet .vp-publish { width: 38px !important; }
}

/* Flat orange buttons (owner, 2026-09-22): no glow under the action orange, matching the account pages' flat buttons.
   Publish, the editor's play buttons, the account menu's New project and the home page's pill buttons. */
.ved .ved-publish, .ved .ved-publish:hover, .ved .ved-play, .ved .ved-play:hover, .ved-phone .vp-playdot,
#usermenu .actionbutton, #usermenu .actionbutton:hover, .hm-btn, .hm-btn:hover { box-shadow: none !important; }

/* ── Signed out (/signout/, behind the dev cookie) ───────────────────────────────────────────────
   The old page was a line of text with nowhere to go; this adds the way back in. Markup in signout.php. 2026-09-22. */
.so-page { display: flex; justify-content: center; padding: 56px 20px 80px; text-align: center; font-family: Poppins, sans-serif; }
.so-card { width: 100%; max-width: 480px; padding: 40px 28px 34px; background: #f6fafb; border: 1px solid #e2ecef; border-radius: 20px; box-sizing: border-box; color: #0e3b45; }
.so-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 600; color: #0e3b45; }
.so-card p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: #55707a; }
.so-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #e7f6ee; color: #17613a; font-size: 26px; line-height: 64px; }
.so-spinner { width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid #d9e7ea; border-top-color: #1a6b7a; animation: so-spin .8s linear infinite; }
@keyframes so-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .so-spinner { animation-duration: 2.4s; } }
.so-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.so-btn { padding: 12px 26px; border: 0; border-radius: 999px; background: #fc4a1a; color: #fff; font: 600 15px Poppins, sans-serif; cursor: pointer; transition: background-color .15s; }
.so-btn:hover { background: #e33d0f; }
.so-link { color: #1a6b7a !important; font-size: 14px; font-weight: 600; }
.so-link:hover { text-decoration: underline; }
.so-btn:focus-visible, .so-link:focus-visible { outline: 3px solid rgba(252,74,26,.4); outline-offset: 2px; }

/* Phone action row (owner, 2026-09-22): Add is the far-right button, in the plum of the add row on bigger screens,
   and Save loses its lone circle outline so the quiet icons all look alike. */
.ved-phone .vp-save { border: 0 !important; border-radius: 10px !important; background: transparent !important; width: 38px !important; }
.ved-phone .vp-add { background: linear-gradient(135deg,#2e1447,#5e2466 55%,#862f55) !important; color: #fff !important; border: 0 !important;
  border-radius: 10px !important; width: 40px !important; margin-left: 8px !important; }
.ved-phone .vp-add:active { filter: brightness(1.12); }
@media (max-width: 359px) { /* eight buttons on a 320px phone */
  .ved-msheet .vp-btn { width: 32px !important; margin-left: 2px !important; }
  .ved-msheet .vp-save { width: 32px !important; }
  .ved-msheet .vp-publish { width: 36px !important; }
  .ved-msheet .vp-add { width: 34px !important; margin-left: 4px !important; }
}
/* Publish keeps the orange but takes Add's rounded-square shape: side by side, an oval next to a square read as two
   different kinds of button. */
.ved-phone .vp-publish { border-radius: 10px !important; width: 40px !important; }

/* Phone video cards (owner, 2026-09-22): the card took the clip's shape but the thumbnail inside kept its 16:9 box, so
   a tall clip showed a small picture with its duration pill stranded below. These are the inner rules from the 701px-
   and-up block, which phones never saw. */
.ved .dialog.ms-phone .ms-dock .vs-grid > .card { width: auto !important; max-width: none !important; border-radius: 8px; overflow: hidden; }
.ved .dialog.ms-phone .ms-dock .vs-grid > .card .projectvid { height: 100% !important; width: 100% !important; }
.ved .dialog.ms-phone .ms-dock .vs-grid > .card .projectvid:after { padding-top: 0 !important; }
.ved .dialog.ms-phone .ms-dock .vs-grid > .card .projectvidcont { height: 100% !important; width: 100% !important; background: #eef3f4 !important; }
.ved .dialog.ms-phone .ms-dock .vs-grid > .card .projectvidcont img, .ved .dialog.ms-phone .ms-dock .vs-grid > .card video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
/* Layer pills: "Background" was a few pixels wider than its third of the row and ended in "…". Tighter icon, gap and
   padding give the three words room on the panel's width. 2026-09-22. */
.ved .ar-pill { gap: 4px; padding: 0 4px; font-size: 11.5px; }
.ved .ar-pill .layericon { width: 13px; height: 13px; }

/* The canvas's own menu (videodesigner.js setupCanvasMenu), 2026-09-22: the Tools menu's edit actions where the
   pointer is. Same card as the header menus. */
.ctx-menu { position: fixed; z-index: 99999; display: none; min-width: 208px; padding: 6px; border-radius: 12px; border: 1px solid #e2ecef;
  background: #fff; box-shadow: 0 12px 30px rgba(14,59,69,.18); font-family: Poppins, sans-serif; }
.ctx-menu.ctx-open { display: block; }
.ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  color: #0e3b45; font: 500 14px Poppins, sans-serif; text-align: left; cursor: pointer; }
.ctx-item i { width: 16px; text-align: center; color: #7a9299; font-size: 13px; }
.ctx-item em { margin-left: auto; font-style: normal; font-size: 12px; color: #9fb3b8; }
.ctx-item:hover:enabled { background: #eef5f6; }
.ctx-item:disabled { color: #a8b8bc; cursor: default; }
.ctx-item:disabled i, .ctx-item:disabled em { color: #c3d0d3; }

/* A short message over the editor (videodesigner.js editorNote): a trimmed paste and the like. 2026-09-22. */
.ed-note { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px);
  padding: 9px 16px; border-radius: 999px; background: rgba(14,59,69,.92); color: #fff; font: 500 13.5px Poppins, sans-serif;
  box-shadow: 0 6px 18px rgba(14,59,69,.25); opacity: 1; transition: opacity .5s; pointer-events: none; }
.ed-note.ed-note-out { opacity: 0; }
/* If the tabs have not been placed yet (a new project sits behind the size dialog), they wait at the right rather than
   at the foot of the page. videodesigner.js placeProjTab then puts them under the panel. */
.ved .ved-projtab { right: 10px; bottom: 0; }
.rbg-demo { display: block; width: 200px; max-width: 100%; margin: 12px auto 0; border-radius: 8px; }
.rbg-working .rbg-demo, .rbg-done .rbg-demo { display: none; }

/* Animation settings on phones (owner, 2026-09-22): the options had their own little scroll box with no visible track,
   so there was no sign of more below. They open out and the dialog itself scrolls. The footer wraps if it must. */
@media (max-width: 480px) {
  .mo-anim .animuicontrols { max-height: none !important; height: auto !important; overflow: visible !important; }
  .mo-tool .dialogbuttondiv { flex-wrap: wrap; row-gap: 8px; }
  .mo-tool .dialogbuttondiv .actionbutton { padding: 0 14px !important; font-size: 13.5px !important; }
  .mo-tool .dialogbuttondiv .dialoghelp { width: 34px; min-width: 34px; height: 34px; }
}
/* ...and the dialog itself has to scroll, or opening the options out just runs it off the screen (owner, 2026-09-22).
   The title stays; everything under it scrolls. */
@media (max-width: 480px) {
  .dialog.mo-anim { max-height: calc(100vh - 16px) !important; display: flex !important; flex-direction: column; }
  .dialog.mo-anim > .dialogcontent { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* The Add/Update and Cancel bar is inside that scrolling content, so it scrolled away under a tall preview; it
     sticks to the bottom of the scroll instead (owner, iPhone, 2026-10-15). */
  .dialog.mo-anim > .dialogcontent > .dialogbuttondiv { position: sticky; bottom: 0; z-index: 2; background: #fff; margin-top: 14px; padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); }
}
/* iOS reads 100vh as the screen without Safari's bars, so a dialog capped that way still ran past the bottom of what
   you can see. dvh/svh are the visible viewport (owner, 2026-09-22). */
@media (max-width: 480px) {
  .dialog.mo-anim { max-height: calc(100dvh - 16px) !important; }
  .dialog.mo-anim { max-height: calc(100svh - 16px) !important; }
  .ved .dialog { max-height: calc(100svh - 12px); }
  .ved .dialog > .dialogcontent { max-height: none; }
}
/* Percentage of the fixed overlay, which is the visible viewport on every iOS version -- dvh/svh are ignored by older
   Safari, which is why the dialog still ran off the bottom. (owner, 2026-09-22) */
@media (max-width: 480px) {
  .fixedoverlay > .dialog { max-height: calc(100% - 16px) !important; }
  .fixedoverlay > .dialog.mo-anim { display: flex !important; flex-direction: column; }
  .fixedoverlay > .dialog.mo-anim > .dialogcontent { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .fixedoverlay > .dialog:not(.mo-anim) > .dialogcontent { max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Animation controls on phones: a slider is a canvas at a fixed pixel width (320 by default), which is wider than the
   panel on a phone, so the track and the little preview beside it ran past the gray panel's edge. (owner, 2026-09-22) */
@media (max-width: 480px) {
  .mo-anim .animuicontrols .part { max-width: 100%; flex-wrap: wrap; }
  .mo-anim .animuicontrols .part > div { max-width: 100%; }
  .mo-anim .animuicontrols canvas { max-width: 100% !important; height: auto !important; }
  .mo-anim .animuicontrols div[style*="width:"] { max-width: 100% !important; }
}

/* Progress card (modialog.js MoProgressBar), 2026-09-22: the editor's type and a teal ring in place of uppercase
   Audiowide over an orange one. */
.mpb { padding: 6px 4px 2px; text-align: center; }
.mpb-msg { margin-bottom: 14px; font: 600 16px Poppins, sans-serif; color: #0e3b45; letter-spacing: 0; }
.mpb-ring { display: block; margin: 0 auto; }
/* Callers pass "Loading Media", "Uploading Image" and so on; one sentence-case look without touching each call site. */
.mpb-msg { text-transform: lowercase; }
.mpb-msg::first-letter { text-transform: uppercase; }
/* The slider row keeps its own layout; only its width is capped (the block above). Making the row flex put every
   label inline with its control and stretched the color pickers, so that was taken back out. 2026-09-22. */
@media (max-width: 480px) { .mo-anim .animuicontrols { overflow-x: hidden; } }
/* Slider rows only (numberinput.js .ni-slider): the min and max sit either side of a canvas drawn at a fixed width, so
   on a phone the three together ran past the panel's padding. The track shrinks to what is left. Other rows keep their
   own layout. 2026-09-22. */
@media (max-width: 480px) {
  .mo-anim .animuicontrols .ni-slider { display: flex !important; align-items: center; gap: 6px; max-width: 100%; }
  .mo-anim .animuicontrols .ni-slider > .ni-minmax { flex: 0 0 auto; }
  .mo-anim .animuicontrols .ni-slider > div:not(.ni-minmax) { flex: 1 1 auto; min-width: 0; width: auto !important; }
  .mo-anim .animuicontrols .ni-slider canvas { width: 100% !important; max-width: 100% !important; }
  .mo-anim .animuicontrols .ni-minmax img { max-width: 32px; height: auto; }
}

/* The grip is gone: phones open the object panel as a sheet (objectinspector.js). 2026-09-22. */

/* The shape dropdown (smallshapeselector.js): the animation shape controls and the media crop's shape picker. It
   replaces a full-screen dialog that opened behind the panel's own popup. 2026-09-22. */
.ssd-box { width: 268px; max-height: min(360px, calc(100vh - 160px)); overflow-y: auto; padding: 10px 12px; box-sizing: border-box; text-align: left; }
.ssd-h { font: 600 11px Poppins, sans-serif; color: #55707a; letter-spacing: .02em; margin: 8px 0 6px; }
.ssd-h:first-child { margin-top: 0; }
.ssd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ssd-sw { display: flex; align-items: center; justify-content: center; padding: 2px; border: 1px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; }
.ssd-sw:hover { border-color: #b9ccd1; background: #f3f8f9; }
.ssd-sw.ssd-on { border-color: #1a6b7a; box-shadow: 0 0 0 2px rgba(26,107,122,.16); }
.ssd-more { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 1px solid #d5e2e6; border-radius: 8px; background: #fff;
  font: 500 13px Poppins, sans-serif; color: #1a6b7a; cursor: pointer; }
.ssd-more:hover { background: #eef5f6; border-color: #1a6b7a; }

/* The Objects picker in its compact form (objectselector.js props.anchor): a popup under the control that asked for
   it -- an animation's shape control, the media crop's shape. Smaller tiles so it stays a menu, not a dialog. 2026-09-22. */

/* The Objects picker as a popup with a caret (objectselector.js props.anchor): an animation's shape control, the media
   crop's shape. Menu-sized, with the shapes small enough to scan. 2026-09-22. */
.bubbledialog .os-pop { width: 344px !important; max-width: min(94vw, 344px) !important; padding: 10px 10px !important; box-sizing: border-box; } /* five 54px tiles and the scrollbar, as in the panel */
.bubbledialog .os-pop .searchresults { max-height: 290px !important; overflow-y: auto; }
.bubbledialog .os-pop img.os-shape, .bubbledialog .os-pop .os-icongrid > * { width: 54px !important; height: 54px !important; box-sizing: border-box !important; padding: 2px !important; border-radius: 8px; }
.bubbledialog .os-pop .os-shapes .part { margin-bottom: 10px; }
.bubbledialog .os-pop .os-shapes .banner { margin-bottom: 4px; }
.bubbledialog .os-pop .os-search input.searchterm { width: auto !important; }

/* ...and never on a row the tab strip has hidden: that rule was showing the inactive tab's search box too
   (owner, 2026-09-22: both Search shapes and Search icons at once). */

/* The popup picker is the panel's picker, only shorter: same tabs, search, headings, tiles and spacing as the object
   panel's docked version (the rules above under .ved .oi-dock). (owner, 2026-09-22) */
.bubbledialog .os-pop .tab { font-size: 14px !important; padding-bottom: 4px; margin-right: 14px !important; }
.bubbledialog .os-pop .tabdiv, .bubbledialog .os-pop .searchtabs { margin-bottom: 6px !important; }
.bubbledialog .os-pop .os-search { display: flex !important; width: 100%; }
.bubbledialog .os-pop .os-search input.searchterm { width: auto !important; flex: 1; min-width: 0; }
.bubbledialog .os-pop .os-search .searchclear, .bubbledialog .os-pop .os-search .searchbutton { flex: none; }
.bubbledialog .os-pop .os-shapes, .bubbledialog .os-pop .os-icongrid:not([style*="display: none"]) { padding: 0 2px; box-sizing: border-box; }
.bubbledialog .os-pop .os-shapes .part { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-bottom: 12px; }
.bubbledialog .os-pop .os-shapes .banner { margin-bottom: 4px; padding-left: 2px; font: 600 12.5px/1.3 Poppins, sans-serif; letter-spacing: 0; text-transform: none; color: #55707a; }
.bubbledialog .os-pop .os-iconname { display: none; }
.bubbledialog .os-pop .os-icongrid:not([style*="display: none"]) { gap: 4px; padding: 2px; justify-content: flex-start; }
.bubbledialog .os-pop .os-shapes .banner { flex: 0 0 100%; width: 100%; }
.bubbledialog .os-pop .os-shapes .part > div:not(.banner) { flex: 1 1 100%; max-width: 100% !important; }
/* Icons in the popup match the panel exactly: 54px tiles, a 30px glyph, no name under it (the .ved .oi-dock rules). */
.bubbledialog .os-pop .os-icon { width: 54px !important; height: auto !important; padding: 5px 2px !important; border-radius: 8px; }
.bubbledialog .os-pop .os-iconglyph { height: 34px; font-size: 30px; line-height: 34px; }

/* The editor drops the site's hamburger menu (owner, 2026-09-22): it held Create, Blog, Help and Contact Us -- pages
   that take you out of the editor -- while Help is already a button here and Projects, Videos and Account are in the
   avatar's menu. The logo still goes home. */
.ved #headerlinks { display: none !important; }
.ved #headerlinks + div { margin-left: 14px; } /* the Video pill takes the space */

/* Top bar spacing: a bordered button's edge is its visual boundary while a quiet
   button's is its text, so equal margins read as unequal gaps. Trim the quiet
   margin and widen Save's so the whitespace matches. (owner, 2026-09-22) */
.ved .ved-top.ved-quiet { margin-left: 4px; }
.ved .ved-save { margin-left: 16px; }

/* the edit group now holds the right end of the bar, clear of the avatar (owner, 2026-09-23) */
.ved .ved-editgroup { right: 92px !important; }

/* The left-hand group is one set of project actions, so the four share a shape: the same outlined pill at the
   same size, evenly spaced, with Publish the only filled one. (owner, 2026-09-23) */
.ved .ved-projoptions .ved-top { margin-left: 14px; padding: 0 15px; }
.ved .ved-projoptions .ved-top:first-child { margin-left: 0; }
.ved .ved-projoptions .ved-quiet { border-color: rgba(255,255,255,.55); }
.ved .ved-projoptions .ved-quiet:hover:enabled { border-color: #fff; }

/* The project name gets the room Help gave up, and narrows rather than colliding on smaller desktops. The slot
   is a fixed width so the buttons after it do not shift as the session loads. (owner, 2026-09-23) */
.ved:not(.ved-phone) #headerlinks + div { width: 360px; }
@media (max-width: 1240px) { .ved:not(.ved-phone) #headerlinks + div { width: 200px; } }

/* A slot behind the pill and project name: the buttons beside it looked like they were floating on the bar with
   nothing to sit against. (owner, 2026-09-23) */
.ved:not(.ved-phone) #headerlinks + div { width: 392px; padding: 0 16px; box-sizing: border-box;
    background: rgba(255,255,255,.06); border-radius: 999px; }
@media (max-width: 1240px) { .ved:not(.ved-phone) #headerlinks + div { width: 232px; } }

/* Tools is wider than the icon buttons because of its caret, which pulled its wrench 5px closer to Redo than the
   other icons are to each other. This puts all four glyph centers 36px apart. (owner, 2026-09-23) */
.ved .ved-editgroup .selectbutton { margin-left: 5px; }

/* Opacity is a row of its own, always on show under the current color, instead of living inside the + custom
   picker. Grayed out for no color, which has nothing to make see-through. (owner, 2026-09-23) */
.cp-opacity { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.cp-opacity .cp-bar { flex: 1 1 auto; margin-top: 0; }
.cp-oplabel { flex: none; font: 500 11px Poppins, sans-serif; color: #55707a; }
.cp-opacity .cp-alpha { flex: none; min-width: 32px; text-align: right; }
.cp-opacity.cp-off { opacity: .45; pointer-events: none; }

/* The current color as one block: chip, hex, eyedropper and the Custom toggle, the mixer when it is open, then
   opacity. Replaces the + swatch, which read as add a swatch. (owner, 2026-09-23) */
.cp-cur { background: rgba(14,59,69,.05); border-radius: 10px; padding: 10px 10px 2px; margin-bottom: 14px; }
.cp-cur .cp-head { margin-bottom: 10px; }
.cp-cur .cp-custom { margin: 0 0 10px; }
.cp-cur .cp-opacity { margin-bottom: 10px; }
.cp-mix { flex: none; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
    background: #eef7f8; color: #1a6b7a; box-shadow: inset 0 0 0 1px #cfdde1;
    font: 600 11.5px Poppins, sans-serif; letter-spacing: .01em; }
.cp-mix:hover { background: #e2f1f3; }
.cp-mix.cp-on { background: #1a6b7a; color: #fff; box-shadow: none; }

/* Save says whether the work is safe: full strength while there are unsaved changes, quiet and checked once
   there are none. An amber dot was tried and dropped -- the two states read clearly without it. (owner, 2026-09-23) */
.ved .ved-save.ved-clean { border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.55); }
.ved .ved-save.ved-clean:hover:enabled { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff; }

/* "Saved" is 10px wider than "Save", which shoved Share and Publish sideways on every save. The button and its
   label both hold the wider size, so neither the row nor the icon moves. (owner, 2026-09-23) */
.ved .ved-save { min-width: 98px; }
.ved .ved-save > div:not(.bubbledialog) + div:not(.bubbledialog) { min-width: 48px;
    text-align: center !important; } /* the label box is fixed, so the word centers in it either way */
/* the check glyph is a shade wider than the disk, so the icon box is pinned too */
.ved .ved-save > div:not(.bubbledialog):first-of-type { width: 16px; overflow: hidden; }

/* In a narrow popup (an animation's item colors) the Custom button squeezed the hex field down to "#D4D3". The
   head wraps instead, and the hex keeps room for a full #RRGGBB. (owner, 2026-09-23) */
.cp-head { flex-wrap: wrap; }
.cp-hex { min-width: 84px; } /* fits #RRGGBB and still leaves the head on one line in the popups */
.cp-mix { margin-left: auto; }

/* The four head controls have to fit one line inside a 250px popup, or the eyedropper is left stranded on a row
   of its own: tighter gaps and a smaller chip, dropper and Custom. (owner, 2026-09-23) */
.cp-cur .cp-head { gap: 6px; }
.cp-cur .cp-chip { width: 28px; height: 28px; border-radius: 7px; }
.cp-cur .cp-hex { height: 30px; padding: 0 8px; }
.cp-cur .cp-drop { width: 30px; height: 30px; }
.cp-cur .cp-mix { height: 24px; padding: 0 8px; font-size: 11px; }

/* A wrapping flex row wraps instead of shrinking, and the hex input's intrinsic width is ~180px, so the head kept
   breaking onto two lines. One line, with the hex sized small and allowed to grow into what is left. */
.cp-head { flex-wrap: nowrap; }
.cp-hex { flex: 1 1 84px; width: 84px; }

/* Letter spacing and line height: the label used to take 104px of a 364px popup, leaving a 150px track on which
   single values were hard to hit. The label sits above the row now and the track takes the width. (owner, 2026-09-23) */
.fd .fd-slider { flex-direction: column; align-items: stretch; gap: 2px; }
.fd .fd-sliderhead { flex: none; }
.fd .fd-sliders { gap: 10px; }

/* Click the project name to rename it: the slot holds an input the same size as the name it replaces, so nothing
   in the bar moves while you type. (owner, 2026-09-23) */
.ved:not(.ved-phone) #headerlinks + div { cursor: text; }
.ved .ved-titleinput { width: calc(100% - 76px); height: 28px; vertical-align: 1px; box-sizing: border-box;
    padding: 0 8px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; background: rgba(0,0,0,.2);
    color: #fff; font: 17px/26px 'Open Sans', sans-serif; outline: none; }
.ved .ved-titleinput:focus { border-color: #fff; background: rgba(0,0,0,.3); }

/* ── MediaLanes: the two-lane media chooser (js/medialanes.js) ─────────────────────────────
   Lived inside the component as an injected <style> while it was being judged, which kept it a
   single drop-in file. It is not a prototype any more, so it belongs here with everything else
   and travels through push1 like the rest.
   Two rules below look wrong and are not, so they carry their own notes: the grid's scrollbar
   must NOT gain scrollbar-width, and .ml-arrow is kept but hidden. ───────────────────────── */
.ml-wrap { display:none; position:fixed; inset:0; z-index:10000; background:rgba(12,40,48,.55);
           align-items:center; justify-content:center; padding:18px; box-sizing:border-box; }
/* A fixed height, not one that grows into its content. The lanes start empty and fill a few
seconds later, so a content-sized dialog opened small, sat there while the providers answered
and then jumped to full size under the pointer. Same box from the first frame; the grids take up
the slack. */
.ml-dialog { background:#fff; border-radius:14px; width:100%; max-width:1280px;
             height:min(880px, 100%); max-height:100%; display:flex; flex-direction:column;
             overflow:hidden; box-shadow:0 18px 50px rgba(8,30,38,.35); }
.ml-head { display:flex; align-items:center; gap:12px; padding:14px 18px;
           border-bottom:1.5px solid #e6f0f2; flex:0 0 auto; }
.ml-title { font-family:Poppins,sans-serif; font-size:18px; font-weight:600; color:#1a6b7a; }
.ml-count { font-size:12.5px; color:#1a6b7a; background:#e8f7fa; border-radius:999px;
            padding:3px 11px; }
/* Nothing selected yet leaves the element empty, and an empty pill would still draw its pill. */
.ml-count:empty { display:none; }
/* One lane filling the dialog is already named by the title -- Add stock over a lane labelled
Stock is the same word twice, six pixels apart. The count beside it stays. */
.ml-lanes.ml-single .ml-lanename { display:none; }
/* Compact: a panel under the media field rather than a sheet over the page. Shorter listing on
purpose -- it is a menu you dip into and leave, and the tray above it is doing the reporting. */
.ml-panel { position:absolute; z-index:9000; display:none; }
.ml-panelbody { background:#fff; border:1.5px solid #cfe4e9; border-radius:12px;
                box-shadow:0 14px 34px rgba(8,30,38,.20); display:flex; flex-direction:column;
                overflow:hidden; }
.ml-panelbody { position:relative; overscroll-behavior:contain; }
.ml-panel .ml-lane { padding:9px; }
.ml-panel .ml-bar { display:none; }
.ml-panel .ml-controls { gap:5px; margin-bottom:7px; }
.ml-panel .ml-search { flex:1 1 80px; height:28px; padding:0 9px; font-size:12px; }
/* The magnifier is the field's own, not a button beside it. Both rows carried four controls in a
   380px panel and read as a crowd; the search button was the one that could go, because Enter
   already did its job. */
.ml-search {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa2a9' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    padding-left: 31px;
}
.ml-panel .ml-search { background-position: 8px center; padding-left: 27px; }
.ml-panel .ml-btn { height:28px; padding:0 8px; font-size:11.5px; }
.ml-panel .ml-seg { height:28px; }
.ml-panel .ml-segb { height:26px; padding:0 7px; font-size:11px; }
/* The compact panel is 380px wide, so its tracks are declared too -- same reason as above. */
.ml-panel .ml-grid { max-height:178px; gap:5px;
                     grid-template-columns:repeat(auto-fill,82px); grid-auto-rows:82px; }
/* In the flow, not floating over the grid. As an absolutely positioned box inside a 380px panel
that clips its overflow, it covered the results it was filtering and lost its own footnote off
the bottom edge -- a popover inside a popover, in a space too small for either. Here it simply
opens, the panel grows, and the grid stays where it was. */
.ml-panel .ml-filters { position:static; margin-bottom:8px; padding:8px 9px; }
.ml-panel .ml-frow { gap:7px; padding:3px 0; }
.ml-panel .ml-ftitle { flex:0 0 58px; font-size:11px; padding-top:3px; }
.ml-panel .ml-chips { gap:4px; }
.ml-panel .ml-chip { padding:2px 8px; font-size:11px; }
.ml-panel .ml-fnote { font-size:10.5px; margin-top:5px; }
.ml-panel .ml-msg { padding:14px 8px; font-size:12px; }
/* Kept, but not shown: the panel sits 4px under the button now, so a 9px triangle would overlap
it rather than bridge anything. Delete the display line to bring it back. */
.ml-arrow { display:none; position:absolute; top:-9px; width:0; height:0;
            border-left:9px solid transparent;
            border-right:9px solid transparent; border-bottom:9px solid #cfe4e9; }
.ml-arrow::after { content:''; position:absolute; left:-8px; top:2px; width:0; height:0;
                   border-left:8px solid transparent; border-right:8px solid transparent;
                   border-bottom:8px solid #fff; }
.ml-x { margin-left:auto; background:none; border:none; font-size:26px; line-height:1;
        color:#7a9299; cursor:pointer; padding:0 4px; }
.ml-x:hover { color:#1a6b7a; }
.ml-lanes { display:grid; gap:0; flex:1 1 auto; min-height:0; }
@media (min-width:900px) { .ml-lanes { grid-template-columns:1fr 1fr; } 
.ml-lanes.ml-single { grid-template-columns:1fr !important; }
  .ml-lanes > .ml-lane + .ml-lane { border-left:1.5px solid #e6f0f2; } }
@media (max-width:899px) { .ml-lanes > .ml-lane + .ml-lane { border-top:1.5px solid #e6f0f2; } }
.ml-lane { display:flex; flex-direction:column; min-width:0; min-height:0; padding:12px 14px 14px; }
.ml-bar { display:flex; align-items:baseline; gap:8px; margin-bottom:9px; flex:0 0 auto; }
.ml-lanename { font-family:Poppins,sans-serif; font-size:15px; font-weight:600; color:#22505c; }
.ml-note { font-size:12px; color:#8aa2a9; }
.ml-controls { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:10px;
               flex:0 0 auto; }
.ml-search { flex:1 1 130px; min-width:0; box-sizing:border-box; height:32px; padding:0 11px;
             border:1.5px solid #dbe8ec; border-radius:8px; font-size:13px; color:#33505a; }
.ml-search:focus { outline:none; border-color:#3cb3c7; }
.ml-btn { height:32px; padding:0 12px; border:1.5px solid #dbe8ec; border-radius:8px;
          background:#fbfdfd; font-family:inherit; font-size:12.5px; color:#55707a; cursor:pointer; }
.ml-btn:hover { border-color:#9fd6e0; color:#1a6b7a; }
/* Square, so the two icon buttons sit as a pair rather than as two different-width slabs. */
.ml-ibtn { width:32px; padding:0; display:inline-flex; align-items:center;
           justify-content:center; font-size:13px; }
.ml-panel .ml-ibtn { width:28px; font-size:12px; }
.ml-primary { background:#1a6b7a; border-color:#1a6b7a; color:#fff; font-weight:600; }
.ml-primary:hover { background:#15586a; border-color:#15586a; color:#fff; }
/* Pinned right in both lanes. Stock has a search field that grows and pushed the switch to the
edge; uploads has nothing that grows, so the same switch sat mid-row and the two panels did not
line up when you moved between them. */
.ml-seg { display:inline-flex; border:1.5px solid #dbe8ec; border-radius:8px; overflow:hidden; }
/* Uploads has no growing field between the switch and its button, so the button is pushed right
explicitly. Scoped to the control row: the footer's Done has its own rule. */
.ml-controls .ml-primary { margin-left:auto; }
.ml-segb { height:30px; padding:0 10px; border:none; background:#fbfdfd; font-family:inherit;
           font-size:12px; color:#7a9299; cursor:pointer; }
.ml-segb + .ml-segb { border-left:1.5px solid #dbe8ec; }
.ml-segb.ml-on { background:#e8f7fa; color:#1a6b7a; font-weight:600; }
/* The clear X is Chromium's native ::-webkit-search-cancel-button, whose inset is a UA decision and
   sat well short of the field's edge. Drawn ourselves it lands on the 9px padding like everything
   else in the row. */
.ml-search::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none; margin: 0; width: 13px; height: 13px;
    cursor: pointer; opacity: .5;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23315a63' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.ml-search::-webkit-search-cancel-button:hover { opacity: .9; }
.ml-filters { position:relative; border:1.5px solid #dbe8ec; border-radius:10px; padding:10px 12px;
              background:#fbfdfd; margin-bottom:10px; }
.ml-frow { display:flex; align-items:flex-start; gap:10px; padding:4px 0; }
.ml-ftitle { flex:0 0 78px; font-size:12px; color:#7a9299; padding-top:4px; }
.ml-chips { display:flex; flex-wrap:wrap; gap:5px; }
.ml-chip { padding:3px 10px; border:1px solid #dbe8ec; border-radius:999px; background:#fff;
           font-family:inherit; font-size:11.5px; color:#5d757e; cursor:pointer; }
.ml-chip.ml-on { background:#e8f7fa; border-color:#9fd6e0; color:#1a6b7a; font-weight:600; }
.ml-fnote { font-size:11px; color:#96abb2; margin-top:6px; }
/* contain is not enough on its own: a grid that has not overflowed yet is not a scroller, so the
wheel goes straight through to the page. none stops the chain either way, which is what keeps a
flick inside the listing instead of throwing the article below it up the screen. */
/* FIXED tracks, both axes. Nothing here is derived from anything else, and that is the point.
   Safari's console, with the panel open and untouched: imgH 79.5px, cardPadTop 0px, imgAR "1 / 1"
   -- image right, card right -- and gridRows "0px,0px,0px". The ROWS were zero. Row height came
   from the item, which came from the image height, which came from the image width, which came
   from a 1fr column: a chain Safari would not resolve on the first pass, so every card was clipped
   to a sliver until a mouse-over invalidated the tracks and it snapped right.
   Three attempts tried to make that chain resolve (percentage padding -> aspect-ratio on the card
   -> the image in flow). None of them could, because the chain was the problem. A declared 112px
   row cannot be deferred.
   justify-content spreads the remainder into the gutters: fixed columns no longer absorb the
   leftover width the way 1fr did, and pooling it at the right edge would read as a mistake. */
.ml-grid { flex:1 1 auto; min-height:120px; display:grid; gap:8px; overflow-y:auto;
           overscroll-behavior:none; padding-right:4px;
           grid-template-columns:repeat(auto-fill,112px); grid-auto-rows:112px;
           justify-content:space-between; align-content:start; }
.ml-drop.ml-dropping { outline:2px dashed #3cb3c7; outline-offset:-4px; background:#f2fbfc; }
/* No height here at all: the card fills a grid cell whose size is declared above. Nothing to
   resolve, nothing to defer, and height:100% on the image is definite because the cell is. */
.ml-card { position:relative; border:1.5px solid #dbe8ec; border-radius:8px;
           overflow:hidden; background:#eef4f6; cursor:pointer; line-height:0; }
.ml-card img { display:block; width:100%; height:100%; object-fit:cover; }
.ml-card:hover { border-color:#3cb3c7; }
.ml-card.ml-in { border-color:#4ABDAC; }
.ml-card.ml-in::after { content:'\2713'; position:absolute; top:4px; right:5px; width:18px;
  height:18px; border-radius:50%; background:#4ABDAC; color:#fff; font-size:11px; line-height:18px;
  text-align:center; }
/* An always-visible scrollbar, not a fade. macOS hides overlay scrollbars until you scroll, so a
grid holding 190 results looked like a grid holding the eight you could see -- the listing was
understating itself. -webkit-appearance:none with an explicit width is what forces the bar to
stay, the same trick .searchresults uses in the editor's picker; the colours are this panel's.
Both axes, because the lanes scroll sideways when they stack on a narrow screen. */
/* NO scrollbar-width here, deliberately. Setting the standard property makes current Chromium
ignore the ::-webkit-scrollbar rules below, and its "thin" is still a macOS overlay bar that
takes no space and hides itself -- so asking for a visible scrollbar the modern way produced no
scrollbar at all. .searchresults in the editor works because it never set it either. */
.ml-grid::-webkit-scrollbar { -webkit-appearance:none; width:10px; height:10px; }
.ml-grid::-webkit-scrollbar-track { background:#f2f8f9; border-radius:5px; }
.ml-grid::-webkit-scrollbar-thumb { background:#bcd9e0; border-radius:5px;
                                    border:2px solid #fff; }
.ml-grid::-webkit-scrollbar-thumb:hover { background:#9fc9d3; }
/* z-index 0, so everything the card draws ON the picture stays on it. The hover video is appended
   when the pointer arrives -- after the credit and the duration badge -- so with everything on auto
   it won a tie on DOM order and covered both. The credit vanishing exactly when the clip started
   playing is the worst version of that: hover is the one moment the photographer is named. */
.ml-hovervid { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
               z-index:0; }
/* The photographer's credit on a stock card, revealed on hover. Absolute and pointer-events gated
   so it costs the picture nothing when it is not showing, and so the only clickable thing inside it
   is the name itself -- the card underneath still takes the pick. */
.ml-card .ml-credit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 6px 4px;
                      font-size: 9.5px; line-height: 1.25; color: #fff; text-align: left;
                      background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
                      opacity: 0; transition: opacity .12s ease; pointer-events: none;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-card:hover .ml-credit, .ml-card:focus-within .ml-credit { opacity: 1; pointer-events: auto; }
.ml-card .ml-credit a { color: #fff; text-decoration: underline; }
.ml-card .ml-credit a:hover { color: #fff; }
/* Touch has no hover, so it is simply always on there -- the alternative is never crediting. */
@media (hover: none) { .ml-card .ml-credit { opacity: 1; pointer-events: auto; } }
/* The listing's own toast. Floats over the results rather than sitting among them, so a search can
   run without the box emptying first -- and so it can appear in the compact panel, which hides the
   .ml-bar the note lives in. */
.ml-toast { position: absolute; top: 50%; left: 50%;
            display: flex; align-items: center; gap: 7px;
            transform: translate(-50%, -50%) scale(.94);
            z-index: 5; padding: 5px 14px; border-radius: 999px; background: rgba(26,107,122,.94);
            color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em;
            box-shadow: 0 4px 14px rgba(8,30,38,.22); pointer-events: none;
            opacity: 0; visibility: hidden; transition: opacity .14s ease, transform .14s ease; }
.ml-toast-on { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
/* The toast's ring. Deliberately the same keyframes as .so-spinner, just smaller and inverted for
   the dark pill, so "working" looks the same everywhere in the product. */
.ml-tspin { width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
            border: 2px solid rgba(255,255,255,.34); border-top-color: #fff;
            animation: so-spin .8s linear infinite; }
.ml-tlabel { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .ml-tspin { animation-duration: 2.4s; } }
.ml-dur { position:absolute; left:5px; bottom:5px; z-index:2; padding:1px 5px; border-radius:4px;
          background:rgba(0,0,0,.62); color:#fff; font-size:10px; z-index:2; }
.ml-msg { grid-column:1/-1; padding:20px 10px; text-align:center; font-size:12.5px; color:#8aa2a9; }
.ml-msg a { color:#FC4A1A; cursor:pointer; text-decoration:underline; }
.ml-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
           gap:8px; padding:12px 18px;
           border-top:1.5px solid #e6f0f2; background:#fbfdfd; }
.ml-foot .ml-btn { height:36px; padding:0 22px; font-size:13.5px; }
/* Done is always on the right. The footer is space-between so the count can sit opposite it, and
compact has no count -- which left Done as the only child and space-between put it on the left. */
.ml-foot .ml-primary { margin-left:auto; }
@media (max-width:899px) {
  .ml-wrap { padding:0; }
  .ml-dialog { border-radius:0; max-width:none; height:100%; }
  .ml-lanes { grid-template-columns:none; }
  .ml-lane { min-height:0; }
  /* The horizontal strip: one row, scrolled sideways. Its track is declared in vw for the same
     reason the others are in px -- a percentage column with an auto row is the chain that broke. */
  .ml-grid { flex:1 1 auto; grid-template-columns:none; grid-auto-flow:column;
             grid-auto-columns:38vw; grid-auto-rows:38vw; justify-content:start;
             overflow-y:hidden; overflow-x:auto;
             scroll-snap-type:x mandatory; padding:0 0 6px; min-height:0; }
  .ml-grid > * { scroll-snap-align:start; }
  .ml-msg { min-width:78vw; }
}

/* Background composites (LiveBackground, 2026-10-13): the palette swatch row in the animation dialog */
/* seven swatches a row: the thirteen palettes plus the project one make two even rows (a lone swatch on a third row, owner 2026-10-14) */
.bg-pals{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;align-items:center}
.bg-pal{width:auto;min-width:0;height:26px;border-radius:6px;border:2px solid transparent;cursor:pointer;padding:0 4px;display:flex;align-items:center;justify-content:space-between;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);margin:0}
.bg-pal i{display:block;width:6px;height:6px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.bg-pal.bg-pal-on{border-color:#fc4a1a}
.bg-colors{display:flex;gap:4px;align-items:center;flex-wrap:wrap} /* 4px: with the swap button the Ground and Accents groups ran 2px past one line (2026-10-16) */
/* the palette block owns its row: Ground and Accents start a new line under it (owner, 2026-10-14) */
.bg-palrow{flex-basis:100%;display:flex;gap:16px;align-items:flex-start}
.bg-palrow > .part{margin:0}
.bg-palrow > .part:first-child{flex:1 1 auto;min-width:0}
.bg-pals-one{display:block}
.bg-pals-one .bg-pal{width:42px}
.bg-colors .bg-color-gap{margin-left:10px}
/* Backdrop panel (backdropeditor.js, 2026-10-13): the animated backgrounds list and the grid to add one.
   The dialog is as wide as a row of five cards and the grid scrolls inside it, so the colour and the list stay
   on screen whatever the window height; a .dialog is otherwise as wide as its content, which made a two-column
   grid taller than the viewport. */
/* MoDialog.addClass tags the .dialogcontent, not the .dialog, so the width goes on the content and the
   inline-block dialog grows to fit it (plus .mo-tool's 24px side margins). */
.dialogcontent.bd-dialog { width: min(880px, calc(100vw - 80px)); box-sizing: border-box; }
/* The Backdrop panel itself is narrower now that the grid lives in its own chooser (showBackgroundPicker) */
.dialogcontent.bd-dialog.bd-panel { width: min(640px, calc(100vw - 80px)); }
.bd-dialog .dialogdesc { max-width: 560px; }
.bd-dialog .bd-bg-grid { max-height: min(44vh, 440px); overflow-y: auto; padding: 2px 2px 6px; }
.mo-tool .bd-bgs{margin:4px 0 14px;text-align:left}
.mo-tool .bd-bg-head{font:600 14px/1.5 Poppins,sans-serif;color:#1a3a42;margin:12px 0 6px}
.mo-tool .bd-bg-well{background:#f3f7f8;border-radius:12px;padding:8px} /* the rows scroll inside it; the scene row in the foot stays in view (owner, 2026-10-15) */
.mo-tool .bd-bg-listwrap{position:relative}
.mo-tool .bd-bg-list{display:flex;flex-direction:column;gap:6px;max-height:min(36vh,360px);overflow-y:auto;scrollbar-width:auto;scrollbar-color:#7a9299 #d3dfe3}
.mo-tool .bd-bg-list::-webkit-scrollbar{width:12px}
.mo-tool .bd-bg-list::-webkit-scrollbar-track{background:#d3dfe3;border-radius:6px}
.mo-tool .bd-bg-list::-webkit-scrollbar-thumb{background:#7a9299;border-radius:6px;border:2px solid #d3dfe3}
.mo-tool .bd-bg-list::-webkit-scrollbar-thumb:hover{background:#4f6b73}
.mo-tool .bd-bg-list:empty{display:none}
.mo-tool .bd-bg-cue{padding:8px 6px 2px}
.mo-tool .bd-bg-listwrap::before,.mo-tool .bd-bg-listwrap::after{content:"";position:absolute;left:0;right:12px;height:34px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.mo-tool .bd-bg-listwrap::before{top:0;background:linear-gradient(180deg,#f3f7f8,rgba(243,247,248,0))}
.mo-tool .bd-bg-listwrap::after{bottom:0;background:linear-gradient(0deg,#f3f7f8,rgba(243,247,248,0))}
.mo-tool .bd-bg-listwrap.bd-bg-less::before,.mo-tool .bd-bg-listwrap.bd-bg-more::after{opacity:1}
/* Phones: the Backdrop panel keeps Cancel and Update backdrop in view. The dialog is a column: title, scrolling content,
   buttons (owner, iPhone, 2026-10-15). The rows wrap so the timing sentence gets the width and the two buttons take a
   line of their own under it, instead of a 90px column of one word per line. */
@media (max-width: 480px){
  .ved .dialog.bd-paneldlg, .fixedoverlay > .dialog.bd-paneldlg{display:flex !important;flex-direction:column}
  .ved .dialog.bd-paneldlg > .dialogcontent, .fixedoverlay > .dialog.bd-paneldlg > .dialogcontent{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:none}
  .mo-tool .dialogcontent.bd-panel .dialogbuttondiv{position:sticky;bottom:0;z-index:2;background:#fff;margin-top:14px;padding:10px 0 calc(6px + env(safe-area-inset-bottom,0px))} /* the bar is inside the scrolling content, so it sticks to the bottom of that scroll */
  /* a compact row (owner, iPhone, 2026-10-15: the desktop row wasted most of its height): a 44px thumbnail, name and
     sentence stacked beside it, Edit and Remove as icons on the same line */
  .mo-tool .bd-bg-row{flex-wrap:wrap;gap:4px 8px;padding:6px 6px 6px 4px}
  .mo-tool .bd-bg-row .bd-bg-grip{padding:0;font-size:13px;width:16px;text-align:center}
  .mo-tool .bd-bg-row .bd-bg-name{display:contents;font-size:13px;line-height:1.35} /* scene rows only (the colour row has a bd-bg-name too): the name sits beside the thumbnail; the sentence drops to a full line under them, so it never wraps mid-phrase (owner, 2026-10-15) */
  /* two lines, always: handle, thumbnail and name; then the sentence with Edit and Remove at its right. A wider name
     (Radiance) had pushed Remove onto a third line (Playwright, iPhone 13, 2026-10-15). */
  .mo-tool .bd-bg-row::after{content:"";order:9;flex-basis:100%;height:0}
  .mo-tool .bd-bg-row .bd-bg-when{order:10;flex:1 1 0;min-width:0;margin:0 0 0 24px;font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* indented to the thumbnail edge, clear of the move handle (owner, 2026-10-15) */
  .mo-tool .bd-bg-row > button.actionbutton{order:11}
  .mo-tool .bd-bg-row > button.actionbutton:first-of-type{margin-left:auto}
  .mo-tool .bd-bg-sec{padding:0 2px;margin:0 1px}
  .mo-tool .bd-bg-row .actionbutton{padding:4px 7px;margin-left:4px} /* slim, so the longest sentence ("4 secs (minimum), from 9") keeps its line beside them */
  .mo-tool .bd-bg-row .bd-bg-btntext{display:none}
}
/* Phones: the panel fits the screen and only the scene list scrolls, so the scene row and the buttons stay in view
   (owner, iPhone, 2026-10-15). One vertical scroller, so no hand-off between a list and a scrolling dialog. */
@media (max-width: 480px){
  .ved .dialog.bd-paneldlg > .dialogcontent, .fixedoverlay > .dialog.bd-paneldlg > .dialogcontent{display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .mo-tool .dialogcontent.bd-panel > .bd-panelbody{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin-bottom:0 !important} /* the wrapper between the content and the sections: without it in the column the list could not shrink (2026-10-15) */
  .mo-tool .dialogcontent.bd-panel .dialogbuttondiv{position:static;flex:0 0 auto;margin-top:10px;padding-top:10px}
  .mo-tool .dialogcontent.bd-panel .bd-color-row{flex:0 0 auto}
} /* the same light well the clip list sits on; the rows are white cards in it */ /* a long sequence scrolls here; the colour, Add and the buttons stay put */
.mo-tool .bd-bg-none{font:400 14px/1.5 Poppins,sans-serif;color:#7a9299;padding:6px 4px}
.mo-tool .bd-bg-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:6px 8px;box-shadow:0 1px 2px rgba(8,40,48,.06)}
.mo-tool .bd-bg-row img,.mo-tool .bd-bg-row canvas{border-radius:6px;display:block}
.mo-tool .bd-bg-rowpic{flex:0 0 auto;display:flex;align-items:center;background:none;border-radius:6px;overflow:hidden}
.mo-tool .bd-bg-name{flex:1 1 auto;min-width:0;font:600 14px/1.5 Poppins,sans-serif;color:#1a3a42}
.mo-tool .bd-bg-name span{display:block;font-weight:400;font-size:12.5px;color:#7a9299}
.mo-tool .bd-bg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mo-tool .bd-bg-card{cursor:pointer;border-radius:10px;overflow:hidden;background:#f3f7f8;border:2px solid transparent;transition:border-color .15s}
.mo-tool .bd-bg-card:focus-visible{outline:0}
/* the hover ring hugs the still, not the card: a portrait still sits in a wide card (owner, 2026-10-15, same as the row) */
.mo-tool .bd-bg-card:hover .bd-bg-pic>img,.mo-tool .bd-bg-card:hover .bd-bg-pic>canvas,.mo-tool .bd-bg-card:focus-visible .bd-bg-pic>img,.mo-tool .bd-bg-card:focus-visible .bd-bg-pic>canvas{outline:2px solid #fc4a1a;outline-offset:-2px;border-radius:4px} /* inside the picture's edge: a shadow outside it was clipped where the picture met its frame (owner, 2026-10-16) */
.mo-tool .bd-bg-pic{display:flex;align-items:center;justify-content:center;background:#e9eff1;overflow:hidden;position:relative} /* height set per project aspect (bgThumbSize) */
.bd-bg-xs{position:absolute;left:4px;top:4px;z-index:2;padding:1px 5px;border-radius:999px;background:rgba(8,40,48,.6);color:#fff;font:600 10px/1.4 Poppins,sans-serif;pointer-events:none} /* the hover's pace tag on scene cards AND the animation picker's cards, whose canvas is absolute (owner, 2026-10-15) */
.mo-tool .bd-bg-card img,.mo-tool .bd-bg-card canvas{display:block;max-width:100%}
.mo-tool .bd-bg-cap{font:500 13px Poppins,sans-serif;color:#1a3a42;padding:5px 8px;text-align:center}
/* every scene in one sideways-scrolling row inside the empty scene list (owner, 2026-10-15) */
.mo-tool .bd-bg-striphead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 6px 8px;margin-top:0} /* air around the caption (owner, 2026-10-15: still cramped at 8/4) */ /* tight to the row below (owner, 2026-10-15) */
.mo-tool .bd-bg-haslist .bd-bg-striphead{margin-top:2px}
/* group chips in the head line of the scene row (owner, 2026-10-15) */
.mo-tool .bd-bg-striptext{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-tool .bd-bg-chips{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:10px 6px 10px}
.mo-tool .bd-bg-plus{flex:0 0 auto;height:24px;width:28px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid #c9d8dc;border-radius:999px;background:#fff;color:#5d7a82;font:500 11.5px/1 Poppins,sans-serif;cursor:pointer;margin-left:auto} /* the row's Add at the right end of the line, quiet like the chips: the row itself is the add, this opens the chooser dialog (owner, 2026-10-15: the orange button read as required) */
.mo-tool .bd-bg-plus:hover,.mo-tool .bd-bg-plus:focus-visible{color:#fc4a1a;border-color:#fc4a1a;outline:0}
.mo-tool .bd-bg-chips .bd-bg-expand{margin-left:auto}
.mo-tool .bd-bg-groupsel{display:none;font:500 12px/1.4 Poppins,sans-serif;color:#1a3a42;padding:4px 8px;border:1px solid #c9d8dc;border-radius:8px;background:#fff}
@media (max-width: 480px){
  .mo-tool .bd-bg-chips .bd-bg-chip{display:none} /* one dropdown instead of four wrapping chips (owner, 2026-10-15) */
  .mo-tool .bd-bg-groupsel{display:inline-block}
}
.mo-tool .bd-bg-chip{border:0;border-radius:999px;padding:3px 9px;font:500 11px/1.4 Poppins,sans-serif;background:#fff;color:#5d7a82;cursor:pointer;white-space:nowrap}
.mo-tool .bd-bg-chip:hover{color:#fc4a1a}
.mo-tool .bd-bg-chip.bd-bg-chip-on{background:#1a3a42;color:#fff}

/* the row has to read as scrollable: an always-on bar, a fade where more lies beyond, and arrows (owner, 2026-10-15) */
.mo-tool .bd-bg-stripwrap{position:relative}
.mo-tool .bd-bg-strip{scrollbar-width:auto;scrollbar-color:#7a9299 #d3dfe3}
.mo-tool .bd-bg-strip::-webkit-scrollbar{height:12px}
.mo-tool .bd-bg-strip::-webkit-scrollbar-track{background:#d3dfe3;border-radius:6px}
.mo-tool .bd-bg-strip::-webkit-scrollbar-thumb{background:#7a9299;border-radius:6px;border:2px solid #d3dfe3}
.mo-tool .bd-bg-strip::-webkit-scrollbar-thumb:hover{background:#4f6b73}
.mo-tool .bd-bg-stripwrap::before,.mo-tool .bd-bg-stripwrap::after{content:"";position:absolute;top:0;bottom:20px;width:48px;pointer-events:none;opacity:0;transition:opacity .15s}
.mo-tool .bd-bg-stripwrap::before{left:0;background:linear-gradient(90deg,#f3f7f8,rgba(243,247,248,0))}
.mo-tool .bd-bg-stripwrap::after{right:0;background:linear-gradient(270deg,#f3f7f8,rgba(243,247,248,0))}
.mo-tool .bd-bg-stripwrap.bd-bg-less::before,.mo-tool .bd-bg-stripwrap.bd-bg-more::after{opacity:1}
.mo-tool .bd-bg-arrow{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:#fff;color:#1a3a42;box-shadow:0 2px 8px rgba(8,40,48,.22);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:13px;z-index:1}
.mo-tool .bd-bg-arrow:hover{color:#fc4a1a}
.mo-tool .bd-bg-arrow-left{left:2px}
.mo-tool .bd-bg-arrow-right{right:2px}
.mo-tool .bd-bg-stripwrap.bd-bg-less .bd-bg-arrow-left,.mo-tool .bd-bg-stripwrap.bd-bg-more .bd-bg-arrow-right{display:inline-flex}
.mo-tool .bd-bg-expand{flex:0 0 auto;width:24px;height:22px;border:0;border-radius:8px;background:transparent;color:#7a9299;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mo-tool .bd-bg-expand:hover,.mo-tool .bd-bg-expand:focus-visible{background:#fff;color:#fc4a1a;outline:0}
.mo-tool .bd-bg-strip{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;flex:0 0 auto;padding:1px 4px 8px;margin-top:0;scroll-snap-type:x proximity;scroll-padding-left:4px;overscroll-behavior-x:contain}
.mo-tool .bd-bg-stripitem{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;cursor:pointer;border-radius:10px;overflow:hidden;background:#fff;padding-top:2px;scroll-snap-align:start;box-sizing:border-box}
.mo-tool .bd-bg-stripitem:focus-visible{outline:0}
.mo-tool .bd-bg-stripitem:hover .bd-bg-strippic,.mo-tool .bd-bg-stripitem:focus-visible .bd-bg-strippic{border-color:#fc4a1a} /* the ring hugs the still, not the card: a portrait still sits in a wider card (owner, 2026-10-15) */
.mo-tool .bd-bg-strippic{border-radius:8px;border:2px solid transparent;box-sizing:content-box;transition:border-color .15s}
.mo-tool .bd-bg-strippic img,.mo-tool .bd-bg-strippic canvas{border-radius:6px}
.mo-tool .bd-bg-stripitem .bd-bg-cap{font-size:11px;padding:4px 4px 3px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-tool .bd-bg-when{display:block;margin-top:2px;font:400 14px/1.5 Poppins,sans-serif;color:#55707a}
.mo-tool .bd-bg-sec{font:inherit;color:#1a3a42;padding:1px 4px;border:1px solid #c9d8dc;border-radius:6px;background:#fff;margin:0 2px}
.mo-tool .bd-bg-grip{color:#9cb3b9;cursor:grab;padding:0 2px;font-size:14px;flex:0 0 auto}
.mo-tool .bd-bg-row.sortable-ghost{opacity:.4}
/* The per-background buttons: quiet and small -- the row is a list entry, not a call to action */
.mo-tool .bd-bg-row .actionbutton{font:500 14px/1.4 Poppins,sans-serif !important;text-transform:none;padding:4px 10px;border-radius:7px;background:#fff;color:#1a6b7a;border:1px solid #c9d8dc;margin:0 0 0 6px;flex:0 0 auto}
.mo-tool .bd-bg-row .actionbutton:hover:enabled{background:#eef6f7;border-color:#9cc3cb;color:#0e3b45}
.mo-tool .bd-bg-row .actionbutton[title="Remove this background"]{color:#55707a;padding:4px 7px} /* same quiet grey as Edit; red only on hover */
.mo-tool .bd-bg-row .actionbutton[title="Remove this background"]:hover:enabled{background:#fdf0ee;border-color:#e6b2ab;color:#b23a2a}

/* One type scale for the whole Backdrop panel (owner, 2026-10-13: the mixed sizes were annoying): 14px Poppins for
   every label, row and button, 600 for headings and names; the colour button's label joins it. */
.bd-dialog .paramlabel { font-size: 14px !important; }
.bd-dialog .dialogdesc { font-size: 14px; }
.mo-tool .bd-bg-sec { font: 400 14px/1.4 Poppins, sans-serif; }
.bd-dialog .dialogdesc { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line */
.mo-tool .bd-color-row{display:flex !important;flex-wrap:nowrap;align-items:center;gap:10px;margin:0 0 4px;padding:8px;background:#f3f7f8;border-radius:12px;text-align:left}
.mo-tool .bd-color-row > *{flex:0 0 auto}
.mo-tool .bd-color-row > .bd-bg-name{flex:1 1 auto}
.mo-tool .bd-color-swatch{width:96px;height:54px;border-radius:6px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(8,40,48,.12);cursor:pointer}
.mo-tool .bd-color-row .bd-bg-name span{display:block;font-weight:400;color:#55707a}
.mo-tool .bd-color-row .selectbutton{margin:0 !important}
.mo-tool .bd-bg-where{display:block;margin-top:2px;color:#7a9299}
.mo-tool .bd-bg-row.bd-bg-pinned .bd-bg-grip{cursor:default;opacity:.5}
/* The colour picker button as the big swatch: no label, no arrow, just the colour; the bubble opens on it */
.mo-tool button.bd-color-swatch{width:96px !important;height:54px !important;min-width:0 !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:6px !important;box-shadow:inset 0 0 0 1px rgba(8,40,48,.12) !important;cursor:pointer;overflow:hidden;line-height:normal !important}
.mo-tool button.bd-color-swatch .selecttext,.mo-tool button.bd-color-swatch .selectarrow{display:none !important}
.mo-tool button.bd-color-swatch:hover{box-shadow:inset 0 0 0 2px rgba(252,74,26,.8) !important}
/* "Just the color" in the chooser and the list: a swatch of the backdrop colour with a label, no picture */
.mo-tool .bd-bg-card.bd-bg-plain img{box-shadow:inset 0 0 0 1px rgba(8,40,48,.15)}
.mo-tool .bd-bg-row.bd-bg-plainrow img{box-shadow:inset 0 0 0 1px rgba(8,40,48,.15)}
.mo-tool .bd-clipnote{margin-top:10px;clear:both}
.mo-tool .bd-bg-grouphead{grid-column:1 / -1;font:600 12.5px Poppins,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#55707a;margin:6px 0 -2px}
/* The animation picker's Basic / Scenes switch and the Scenes view (owner, 2026-10-16; trial gate SCENES_IN_PICKER) */
.as-modeswitch{margin:0 0 8px;align-self:flex-start;height:36px}
.as-modehide,.ved .oi-dock .as-modehide,.ved .dialog .as-modehide{display:none !important} /* outranks the dock rules that force the tab row and search visible */
.as-modeswitch .ms-sw{height:28px;font-size:12.5px;padding:0 12px}
.as-scenesnew{position:static;display:inline-block;margin-left:5px;padding:1px 5px;font-size:8px;line-height:1.3;vertical-align:middle}
.as-scenes{display:flex;flex-direction:column;gap:6px;width:100%}
.as-scenes .bd-bg-chips{padding:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.as-scenes .bd-bg-chip{border:0;border-radius:999px;padding:3px 9px;font:500 11px/1.4 Poppins,sans-serif;background:#fff;color:#5d7a82;cursor:pointer;white-space:nowrap;box-shadow:0 0 0 1px #e2ecef inset}
.as-scenes .bd-bg-chip:hover{color:#fc4a1a}
.as-scenes .bd-bg-chip.bd-bg-chip-on{background:#1a3a42;color:#fff;box-shadow:none}
.as-scenes .bd-bg-groupsel{display:none;font:500 12px/1.4 Poppins,sans-serif;color:#1a3a42;padding:4px 8px;border:1px solid #c9d8dc;border-radius:8px;background:#fff}
.as-scenegrid .bd-bg-card{cursor:pointer;border-radius:10px;overflow:hidden;background:#f3f7f8;border:1px solid #e2ecef}
.as-scenegrid .bd-bg-card:focus-visible{outline:0}
.as-scenegrid .bd-bg-card:hover .bd-bg-pic>img,.as-scenegrid .bd-bg-card:hover .bd-bg-pic>canvas,.as-scenegrid .bd-bg-card:focus-visible .bd-bg-pic>img,.as-scenegrid .bd-bg-card:focus-visible .bd-bg-pic>canvas{outline:2px solid #fc4a1a;outline-offset:-2px;border-radius:4px}
.as-scenegrid .bd-bg-pic{display:flex;align-items:center;justify-content:center;background:#e9eff1;overflow:hidden;position:relative}
.as-scenegrid .bd-bg-card img,.as-scenegrid .bd-bg-card canvas{display:block;max-width:100%}
.as-scenegrid .bd-bg-cap{font:500 11.5px Poppins,sans-serif;color:#1a3a42;padding:5px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 480px){ .as-scenes .bd-bg-chip{display:none} .as-scenes .bd-bg-groupsel{display:inline-block} }
.as-scenegrid{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;overflow-y:auto;padding:2px 2px 8px}
.as-scenegrid .bd-bg-card{flex:0 0 calc(50% - 4px);box-sizing:border-box}
.ved .ved-addbtn{position:relative}
.ved .ved-addnew{position:absolute;top:-6px;right:2px;padding:2px 4.5px 2px 5px;font-size:8px;line-height:1} /* line-height 1 and a hair less on the right, where letter-spacing leaves its trailing gap: the word sat low and right of center (owner, 2026-10-16) */
/* The scene lists show their scrollbar the way the animation results do (owner, 2026-10-16): always present, gray on silver */
.as-scenegrid,.bd-dialog .bd-bg-grid{overflow-y:scroll} /* no scrollbar-color here: Chrome 121+ drops the ::-webkit-scrollbar styling when it is set and shows the overlay bar that hides between scrolls (owner, 2026-10-16: "not always visible") */
.as-scenegrid::-webkit-scrollbar,.bd-dialog .bd-bg-grid::-webkit-scrollbar{-webkit-appearance:none;width:11px}
.as-scenegrid::-webkit-scrollbar:horizontal,.bd-dialog .bd-bg-grid::-webkit-scrollbar:horizontal{height:0}
.as-scenegrid::-webkit-scrollbar-thumb,.bd-dialog .bd-bg-grid::-webkit-scrollbar-thumb{border-radius:0;border:1px solid gray;background-color:gray}
.as-scenegrid::-webkit-scrollbar-track,.bd-dialog .bd-bg-grid::-webkit-scrollbar-track{background-color:silver;border-radius:0}

/* More palettes (owner, 2026-10-16): the More swatch in the scene dialog and the chooser's chips and cards */
.bg-more{justify-content:center;background:#fff;box-shadow:inset 0 0 0 1px #c9d8dc}
.bg-more span{font:600 11px Poppins,sans-serif;color:#1a3a42}
.bg-paldlg .bd-bg-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 0 10px}
.bg-paldlg .bd-bg-chip{border:0;border-radius:999px;padding:3px 10px;font:500 12px/1.4 Poppins,sans-serif;background:#fff;color:#5d7a82;cursor:pointer;white-space:nowrap;box-shadow:0 0 0 1px #e2ecef inset}
.bg-paldlg .bd-bg-chip:hover{color:#fc4a1a}
.bg-paldlg .bd-bg-chip.bd-bg-chip-on{background:#1a3a42;color:#fff;box-shadow:none}
.bg-palgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px;height:min(50vh,520px);align-content:start;overflow-y:scroll;padding:2px} /* a fixed height: the dialog kept resizing as the chips narrowed the list (owner, 2026-10-16) */
.bg-palgrid::-webkit-scrollbar{-webkit-appearance:none;width:11px}
.bg-palgrid::-webkit-scrollbar-thumb{border:1px solid gray;background-color:gray}
.bg-palgrid::-webkit-scrollbar-track{background-color:silver}
.bg-palcard{position:relative;height:68px;border-radius:10px;border:2px solid transparent;cursor:pointer;padding:7px 8px;text-align:left;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);color:#1a3a42}
.bg-palcard-dark{color:#fff}
.bg-palcard:hover{border-color:#3cb3c7}
.bg-palcard.bg-palcard-on{border-color:#fc4a1a}
.bg-palcard-name{position:absolute;left:8px;top:8px;font:600 12px/1.2 Poppins,sans-serif} /* pinned to the top: a button centres its content, which put the name on the dots (owner, 2026-10-16) */
.bg-palcard-scheme{display:block;font:500 10px/1.2 Poppins,sans-serif;opacity:.75;margin-top:1px}
.bg-palcard-dots{position:absolute;left:8px;bottom:9px;display:flex;gap:4px}
.bg-palcard-dots i{display:block;width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
@media (max-width: 480px){ .bg-palgrid{grid-template-columns:repeat(2,1fr)} }

/* Scene cards padded like the animation cards, the still and its hover ring rounded (owner, 2026-10-16) */
.as-scenegrid .bd-bg-card,.mo-tool .bd-bg-card{background:#fff;border:1px solid #e2ecef;border-radius:14px;padding:8px 8px 2px;transition:border-color .15s,box-shadow .15s}
.as-scenegrid .bd-bg-card:hover,.mo-tool .bd-bg-card:hover{border-color:#3cb3c7;box-shadow:0 8px 20px rgba(14,59,69,.10)}
.as-scenegrid .bd-bg-pic,.mo-tool .bd-bg-pic{border-radius:8px;overflow:hidden;width:100%}
.as-scenegrid .bd-bg-card img,.as-scenegrid .bd-bg-card canvas,.mo-tool .bd-bg-card img,.mo-tool .bd-bg-card canvas{width:100% !important;height:auto !important;border-radius:8px} /* the still carries its drawn size inline; it fills the padded box */
.as-scenegrid .bd-bg-card:hover .bd-bg-pic>img,.as-scenegrid .bd-bg-card:hover .bd-bg-pic>canvas,.as-scenegrid .bd-bg-card:focus-visible .bd-bg-pic>img,.as-scenegrid .bd-bg-card:focus-visible .bd-bg-pic>canvas,
.mo-tool .bd-bg-card:hover .bd-bg-pic>img,.mo-tool .bd-bg-card:hover .bd-bg-pic>canvas,.mo-tool .bd-bg-card:focus-visible .bd-bg-pic>img,.mo-tool .bd-bg-card:focus-visible .bd-bg-pic>canvas{outline:2px solid #fc4a1a;outline-offset:-2px;border-radius:8px}
.as-scenegrid .bd-bg-cap,.mo-tool .bd-bg-cap{padding:5px 2px 3px}
.bg-paldialog .dialogdesc{white-space:normal;overflow:visible;text-overflow:clip} /* the one-line rule cut it to an ellipsis on phones (owner, 2026-10-16) */
@media (max-width: 480px){
  .mo-tool .bg-paldlg .bd-bg-chips .bd-bg-chip{display:inline-block !important} /* the scene dialog hides its chips for a dropdown; seven short chips wrap to two rows here */
  .bg-paldlg .bd-bg-chips{padding:0 0 8px}
  .bg-palgrid{height:min(46vh,420px)}
}
.dialogcontent .as-scenegrid{max-height:min(60vh,620px)} /* the picker as a dialog (Replace on a scene): the grid scrolls instead of stretching the dialog to all 68 cards (2026-10-16) */
.dialogcontent .as-scenegrid .bd-bg-card{flex-basis:calc(25% - 6px)} /* four across in the wide dialog */
.ni-face{display:inline-block;vertical-align:middle;cursor:pointer;padding:0;border:0;background:transparent;line-height:0} /* no box around the gauge: it is its own shape (owner, 2026-10-17) */ /* a control's face in place of its number box (the speed gauge, 2026-10-17) */
.ni-face:hover{opacity:.85} /* a filter on hover re-rasterized the canvas and lost part of the outer ring (owner, 2026-10-17) */
.selectbutton.ni-hasface{padding:2px 2px !important;min-width:0 !important;width:auto !important;overflow:visible !important;line-height:0;box-sizing:content-box !important} /* a face keeps the button's border and white fill, like the inputs beside it (owner, 2026-10-17: the bare faces looked odd); height from the face (numberinput.js) */ /* a number input whose face is a drawing: no box, no spare width (owner, 2026-10-17) */
.selectbutton.ni-hasface .ni-face{margin:0;display:block;vertical-align:top} /* block, so the face starts at the box top instead of sitting 4px low on a middle-aligned line (2026-10-17) */
.ni-degrees{text-align:center;font:600 14px/1.2 Poppins,sans-serif;color:#1a3a42;padding:0 0 6px} /* the live angle above the direction slider (2026-10-17) */
/* Color buttons without the chevron, app-wide (owner, 2026-10-17): the swatch centred in the same box */
.selectbutton.cs-button > .selectarrow{display:none !important}
.selectbutton.cs-button > .selecttext{margin:0 auto}
.selectbutton.cs-button{min-width:46px !important;justify-content:center} /* keeps the width the chevron used to fill, so the row rhythm holds */

.bg-colorhost{display:contents} /* the Ground and Accents parts are refilled on a palette pick; the host must not be a box of its own (2026-10-17) */
/* scene search: the animation picker's box (os-search / as-searchrow) on its own row under the chips (owner, 2026-10-19) */
.as-scenes .as-searchrow{margin:4px 0 10px}
/* The corner picker on the corner scenes (owner, 2026-10-19): a two-by-two grid in a box the size of the face inputs */
.bg-cornerpick{display:grid !important;grid-template-columns:19px 19px;grid-template-rows:11px 11px;gap:2px;width:40px !important;height:24px !important;cursor:default}
.bg-corner{width:19px;height:11px;background:#e3e9eb;border-radius:2px;cursor:pointer} /* explicit: the grid rows did not size the empty cells */
.bg-corner:hover{background:#c9d6da}
.bg-corner.bg-corner-on{background:#1a6b7a}
.bg-corner.bg-corner-on:hover{background:#15565f}
@media (max-width:640px){ .bg-cornerpick{grid-template-columns:24px 24px;grid-template-rows:11px 11px;gap:3px;width:51px !important;height:25px !important} .bg-corner{width:24px;height:11px} } /* phones: the other inputs' height (~37px with the box); cells 24px wide, narrowed from 34 (owner, 2026-10-19: less wide, the height is the best we can do) */
/* The media picker dropped beside an animation's media slot looks like the shape selector bubble (owner, 2026-10-19):
   the editor bubble border and radius, no title bar or close button -- a press outside closes it, as the bubble does. */
.ved .dialog.ms-popover{border:1px solid #cfdde1 !important;border-radius:12px !important;background:#fff !important;box-shadow:0 14px 36px rgba(14,59,69,.18),0 2px 6px rgba(14,59,69,.08) !important}
.ved .dialog.ms-popover .dialogtitlediv{display:none !important} /* the whole title row: hiding only the title left a 30px blank strip (2026-10-19) */
.ved .dialog.ms-popover .dialogcontent{margin-top:0 !important;padding-top:2px !important} /* the dialog content had a 25px top margin: a blank band under the arrow (owner, 2026-10-19) */
.ms-uploads .ms-filterbutton{display:none !important} /* Uploads: search yes, stock Filters no (2026-10-19) */
.ved .dialog.ms-popover{padding:8px 10px 10px !important;width:auto !important;min-width:0 !important} /* the dropdown hugs its 307px panel (2026-10-19) */
.ved .dialog.ms-popover .dialogcontent{margin-left:0 !important;margin-right:0 !important} /* the 25px side margins made the dropdown 379 wide around a 307 panel (2026-10-19) */
/* the media dropdown's pointer: a tilted square in the bubble's own white and border, at the slot's centre (2026-10-19) */
.ms-poparrow{position:absolute;top:-7px;width:12px;height:12px;margin-left:-6px;background:#fff;border-left:1px solid #cfdde1;border-top:1px solid #cfdde1;transform:rotate(45deg);z-index:2}
.ms-poparrow-down{top:auto;bottom:-7px;transform:rotate(225deg)}
.ved .dialog.ms-popover{overflow:visible !important}
.ved .oi-dock .ms-dock .vs-grid:not([style*="display: none"]),.ved .dialog.ms-compact .ms-dock .vs-grid:not([style*="display: none"]){grid-template-columns:repeat(var(--ms-cols,2),minmax(0,1fr)) !important} /* column count by place (--ms-cols from videoselector.js: three as a dropdown, two docked; ?pickercols= to experiment, 2026-10-19) */
.ved .oi-dock .vs-recent-x,.ved .dialog.ms-compact .vs-recent-x{font-size:12px !important;line-height:12px !important;padding:3px 4px !important;top:3px !important;right:3px !important;border-radius:4px} /* the remove X on a Recent clip, sized for the small tiles (2026-10-19) */
/* The clip Backdrop dialog on phones (owner, iPhone, 2026-10-19): the panel body is a two-column grid, colour row and
   summary across, then the clip list beside the Add column, as on desktop. (The scene-list column rules that once
   lived here went with the scenes to their own entry.) */
@media (max-width: 480px){
  .mo-tool .dialogcontent.bd-panel > .bd-panelbody{display:grid;grid-template-columns:minmax(0,1fr) 64px;align-items:start;row-gap:0}
  .mo-tool .dialogcontent.bd-panel > .bd-panelbody > .bd-color-row,.mo-tool .dialogcontent.bd-panel > .bd-panelbody > .bd-summary{grid-column:1 / -1}
  .mo-tool .dialogcontent.bd-panel > .bd-panelbody > .bd-list{width:auto !important;min-width:0 !important;display:block !important}
  .mo-tool .dialogcontent.bd-panel > .bd-panelbody > .bd-addwell{width:auto !important;display:block !important;grid-column:2;grid-row:span 2}
  .mo-tool .dialogcontent.bd-panel > .bd-panelbody > .bd-scrollrail{grid-column:1;width:auto !important}
}
/* Animation picker cards: the still's square corners poked past the card's rounded ones (owner, iPhone, 2026-10-19);
   the card clips and the still wrapper takes a matching radius. */
.ved .as-card{overflow:hidden}
.ved .as-card > div:first-child{border-radius:8px !important}
.mo-tool .bd-bg-card,.as-scenes .bd-bg-card{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none} /* a press-and-hold plays the card; without this iOS offered its callout and cancelled the touch (2026-10-19) */
/* iOS: overflow:hidden + border-radius does not clip a composited child (a canvas, a positioned still), so the leaf itself
   is rounded and the clipper is masked (owner, iPhone, 2026-10-19: square stills in rounded cards after every other fix) */
.ved .as-card > div:first-child{-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate}
.ved .as-card > div:first-child > canvas,.ved .as-card > div:first-child > img,.ved .as-card > div:first-child > div > canvas,.ved .as-card > div:first-child > div > img{border-radius:8px}
.mo-tool .bd-bg-pic,.as-scenes .bd-bg-pic{-webkit-mask-image:-webkit-radial-gradient(white,black);isolation:isolate;border-radius:6px}
.mo-tool .bd-bg-pic > img,.mo-tool .bd-bg-pic > canvas,.as-scenes .bd-bg-pic > img,.as-scenes .bd-bg-pic > canvas{border-radius:6px}
.ved .md-grid button{position:relative} /* the New tag on a phone add tile sits in the tile's corner (2026-10-19) */
/* The Backdrop clip list's horizontal scrollbar, always visible and in the editor's colours (owner, iPhone, 2026-10-19:
   with the old gray-on-gray bar a second clip looked as if it had replaced the first). iOS shows a styled
   ::-webkit-scrollbar at all times, where its native overlay bar only appears mid-scroll. */
.mo-tool .bd-list{overflow-x:scroll !important;scrollbar-width:auto;scrollbar-color:#7a9299 #d3dfe3;padding-bottom:12px !important}
.mo-tool .bd-list::-webkit-scrollbar{-webkit-appearance:none;height:12px}
.mo-tool .bd-list::-webkit-scrollbar:horizontal{height:12px;background:#d3dfe3;border-radius:6px}
.mo-tool .bd-list::-webkit-scrollbar-track{background:#d3dfe3;border-radius:6px}
.mo-tool .bd-list::-webkit-scrollbar-thumb{background:#7a9299;border:2px solid #d3dfe3;border-radius:6px}
.mo-tool .bd-list::-webkit-scrollbar-thumb:hover{background:#4f6b73}
/* Touch screens: iOS ignores scrollbar styling and hides its overlay bar when idle, so the clip list gets its own rail
   (built in backdropeditor.js) and the native bar is hidden there. Fine pointers keep the styled native bar above. */
.mo-tool .bd-scrollrail{display:none;position:relative;height:10px;margin:6px 0 0;background:#d3dfe3;border-radius:5px;vertical-align:top}
.mo-tool .bd-scrollrail.bd-rail-off{visibility:hidden}
.mo-tool .bd-scrollthumb{position:absolute;top:0;left:0;height:100%;min-width:28px;background:#7a9299;border-radius:5px;touch-action:none;cursor:grab}
@media (pointer: coarse){
  .mo-tool .bd-scrollrail{display:block}
  .mo-tool .bd-list{scrollbar-width:none;padding-bottom:0 !important}
  .mo-tool .bd-list::-webkit-scrollbar{display:none;height:0}
}
/* Phone scene chooser (the dialog, four across): every name on the card in full, wrapping to a second line, instead of
   "Rainbow B..." (owner, 2026-10-19: seeing more at once is right, users scan; but we name things, unlike competitors,
   and the name matters where a still cannot show the motion, so the label needs its room). */
@media (max-width: 480px){
  .dialogcontent .as-scenegrid .bd-bg-cap{white-space:normal;overflow:visible;text-overflow:clip;font-size:10px;line-height:1.15;padding:4px 0 3px;min-height:2.3em;letter-spacing:-.01em}
}
/* Preview size toggle (ui.js mvmGridSize) beside each picker's search box: Larger previews / More at once (owner,
   2026-10-19). Small: scenes three across with two-line names, animation cards zoomed to 72% (the player and its
   drawing scale together), the media pickers one column more (imagesearch.js, videoselector.js). */
.ved .as-searchrow{display:flex;align-items:center;gap:8px}
.ved .as-searchrow > .os-search{flex:1;min-width:0;width:auto !important}
.ved .gs-toggle{display:inline-flex;flex:none;border:1px solid #d5e2e6;border-radius:999px;overflow:hidden;background:#fff;height:34px;box-sizing:border-box}
.ved .gs-btn{border:0;background:transparent;color:#8a9ca2;width:34px;height:32px;cursor:pointer;font-size:13px;padding:0;line-height:32px}
.ved .gs-btn.gs-on{background:#1a6b7a;color:#fff}
.ved .gs-btn:hover:not(.gs-on){background:#eef3f4;color:#0e3b45}
.ved .ms-header .gs-toggle{height:30px;margin-left:6px}
.ved .ms-header .gs-btn{height:28px;width:30px;line-height:28px}
.ved .gs-small .as-scenegrid .bd-bg-card{flex-basis:calc(33.333% - 6px);padding:4px 4px 1px;border-radius:10px}
.ved .gs-small .as-scenegrid .bd-bg-cap{white-space:normal;overflow:visible;text-overflow:clip;font-size:10px;line-height:1.15;padding:4px 0 3px} /* no second line reserved: every name fits one line at this width since Spooky Garden (2026-10-19); a longer name would still wrap */
.ved .dialogcontent .gs-small .as-scenegrid .bd-bg-card{flex-basis:calc(16.666% - 6px)}
.ved .gs-small .as-card{zoom:.66}
.ved .gs-small .as-card .as-cap{font-size:14px !important;line-height:1.15 !important;white-space:normal;letter-spacing:-.025em;padding-left:0;padding-right:0;width:auto !important;align-self:stretch;margin:0 -6px} /* the caption may use the card padding: three names were a pixel from fitting (2026-10-19) */ /* a touch tighter: four names were 1 to 4 px too wide for one line (2026-10-19) */
.ved .ms-header .gs-toggle{flex:0 0 auto;width:auto;margin-left:auto} /* the media header wraps in the dock: the toggle takes the end of the second line, compact */
.ved .ms-dock .sp-tabs{display:flex !important;align-items:center;width:100%;box-sizing:border-box} /* the strip spans the panel, so the toggle can sit at its right edge, in line with Filters below it */
.ved .ms-dock .sp-tabs .gs-toggle{float:none;margin:0 0 0 auto;height:22px} /* the media pickers: the toggle at the right edge of the tab strip, above the search line; smaller (owner, 2026-10-20) */
.ved .ms-dock .sp-tabs .gs-btn{height:20px;width:24px;line-height:20px;font-size:10px}
.ved .gs-toggle{display:none !important} /* Small is the only size (owner, 2026-10-19); the toggle stays built, hidden, in case */
/* Compact media pickers (three narrow columns): a small length/play badge on video tiles (owner, 2026-10-19: too large on the small tiles) */
.ved .ms-dock .vs-grid .vs-dur, .ved .ms-dock .vs-grid .vs-play{font-size:8px;line-height:1;padding:2px 4px !important}
.ved .ms-dock .vs-grid .vs-dur{padding-right:5px !important}
.ved .ms-dock .vs-grid .vs-play i{font-size:6px}
/* the length/play badge a touch bigger than the first cut (owner, 2026-10-19) */
.ved .ms-dock .vs-grid .vs-dur, .ved .ms-dock .vs-grid .vs-play{font-size:9px;padding:2px 5px !important}
.ved .ms-dock .vs-grid .vs-play i{font-size:7px}
/* The length pill flush with the clip tile's bottom-left corner, so it covers as little of the picture as it can (owner, 2026-10-19) */
.ved .ms-dock .vs-grid div:has(> .vs-dur){bottom:0 !important;left:0 !important;line-height:0}
.ved .ms-dock .vs-grid .vs-dur{display:block !important} /* no inline baseline gap under the pill, so it sits on the same line as the source link (owner, 2026-10-19) */
.ved .ms-dock .vs-grid .vs-dur{border-radius:0 6px 0 0 !important;padding:3px 6px 3px 5px !important}
/* Credit and source lines inside the media tiles, along the bottom edge, on hover (owner, 2026-10-19: in line with the content, under the pointer).
   Photos: the credit (columncontainer.js .ms-cred). Clips: the source link at the right of the length pill (videoselector.js .vs-src). */
.ved .ms-dock .imgcolcont .userdiv.ms-cred{display:none;position:absolute;left:0;right:0;bottom:0;max-width:100%;margin:0;padding:0;font-size:9px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(0,0,0,.6);border-radius:0 0 6px 6px}
.ved .ms-dock .imgcolcont .userdiv.ms-cred{display:none;padding:0 6px;align-items:center;gap:4px}
.ved .ms-dock .imgcolcont .userdiv.ms-cred a{display:block;padding:0;background:none;color:#fff;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ved .ms-dock .imgcolcont .userdiv.ms-cred a.ms-cred-page{flex:none}
.ved .ms-dock .imgcolcont:hover .userdiv.ms-cred{display:flex}
.ved .ms-dock .vs-grid .vs-src{display:none;position:absolute;right:0;bottom:0;z-index:3;padding:3px 5px 3px 6px;font:600 9px/1 "Open Sans",sans-serif;color:#fff;text-decoration:none;background:rgba(0,0,0,.6);border-radius:6px 0 0 0}
.ved .ms-dock .vs-grid > *:hover .vs-src{display:block}
.ved .ms-dock .vs-grid .vs-src:hover{text-decoration:underline}
.ved .ms-dock .vs-grid .vs-src i{font-size:8px;margin-right:1px}
.ved .ms-dock .imgcolcont .userdiv.ms-cred a i{font-size:8px;margin-right:1px}
.ved .oi-dock .gs-small div:has(> .as-card){justify-content:flex-start !important} /* animation rows start at the left like the scene rows; a short last row no longer centres (owner, 2026-10-19) */
.ved .gs-toggle.gs-media{display:inline-flex !important} /* the media picker's own columns toggle stays visible (ui.js mvmMediaCols) */
/* A vector shape's lazy placeholder takes exactly the size its tile will have (objectselector.js), so the list never shifts as vectors load (2026-10-20) */
.ved .os-shapes div.lazy{width:90px;height:90px;box-sizing:border-box;padding:8px}
.ved .oi-dock .os-shapes div.lazy{width:54px !important;height:54px !important;padding:2px !important}

/* ── Card "..." menus open on click (.pj-click, from pjMenuOpen in includes/projfunctions.php) ─────────────────────
   As a hover menu the list sat 2px below the 38px button, so moving down into it dropped the hover and it closed.
   projfunc.js toggles .pj-open. :has() keeps the card above the next row while its menu is open on a phone, where
   neither :hover nor :focus-within can be relied on. 2026-10-21. */
.pj-menu.pj-click:hover .pj-menulist { display: none; }
.pj-menu.pj-click.pj-open .pj-menulist { display: block; }
.pj-menu.pj-click.pj-open { background: #eef5f6; color: #0e3b45; }
.pj-menu.pj-click:focus { outline: none; }
.pj-menu.pj-click:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 1px; }
.pj-menulist .usermenu:focus-visible { outline: 2px solid rgba(60,179,199,.6); outline-offset: -2px; }
.pj-card:has(.pj-open) { z-index: 3; }
/* Voiceover dialog (musictrimmer.js VoiceoverDialog, 2026-10-27, dev) */
.vo { width: 520px; max-width: 100%; text-align: left; font: 400 14px/1.45 Poppins, 'Open Sans', sans-serif; color: #0e3b45; }
.vo-head { margin: 0 0 8px; font: 600 12px/1.2 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #55707a; }
.vo-list { display: flex; flex-direction: column; margin-bottom: 20px; border-top: 1px solid #e3eaec; max-height: min(40vh, 380px); overflow-y: auto; overscroll-behavior: contain; }
.vo-empty { padding: 14px 0; color: #55707a; font-size: 13.5px; border-bottom: 1px solid #e3eaec; }
.vo-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto 30px 30px; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e3eaec; }
.vo-play { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #1a6b7a; color: #fff; font-size: 12px; cursor: pointer; }
.vo-play.vo-on { background: #FC4A1A; }
.vo-play:focus-visible, .vo-del:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 2px; }
.vo-words { min-width: 0; }
.vo-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.4; }
.vo-meta { margin-top: 2px; font-size: 12px; color: #55707a; }
.vo-warn { color: #a52a1e; }
.vo-at { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #55707a; white-space: nowrap; }
.vo-at input { width: 62px; padding: 5px 6px; border: 1px solid #c9d6d9; border-radius: 6px; font: inherit; font-size: 13px; color: #0e3b45; font-variant-numeric: tabular-nums; }
.vo-del { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #55707a; cursor: pointer; }
.vo-del:hover { background: #fdecea; color: #a52a1e; }
.vo-edit:hover { background: #e2f0f2; color: #1a6b7a; }
.vo-row.vo-editing { background: #eef6f7; box-shadow: inset 3px 0 0 #1a6b7a; padding-left: 8px; padding-right: 4px; }
.vo-compose { display: flex; flex-direction: column; gap: 8px; }
.vo-input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #c9d6d9; border-radius: 8px; font: inherit; resize: vertical; color: #0e3b45; }
.vo-input:focus, .vo-pickers select:focus, .vo-at input:focus { outline: none; border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.14); }
.vo-count { align-self: flex-end; margin-top: -4px; font-size: 11.5px; color: #8aa0a6; font-variant-numeric: tabular-nums; }
.vo-pickers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.vo-pickers select { padding: 6px 8px; border: 1px solid #c9d6d9; border-radius: 6px; background: #fff; font: inherit; font-size: 13.5px; color: #0e3b45; max-width: 100%; }
.vo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vo-actions .actionbutton { margin: 0; }
.vo-status { min-height: 18px; font-size: 13px; color: #55707a; }
.vo-status.vo-error { color: #a52a1e; }
.vo-duck { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: #0e3b45; cursor: pointer; }
.ved-projbtn .vo-new { position: absolute; margin: 0; z-index: 3; pointer-events: none; }
@media (max-width: 520px) {
  .vo-row { grid-template-columns: 34px minmax(0,1fr) 30px 30px; }
  .vo-row .vo-at { grid-column: 2 / 3; grid-row: 2; }
  .vo-row .vo-edit { grid-column: 3; grid-row: 1; }
  .vo-row .vo-del:not(.vo-edit) { grid-column: 4; grid-row: 1; }
}
.vo-writerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; }
.vo-writerow[hidden], .vo-choices[hidden] { display: none; }
.vo-writerow .actionbutton { margin: 0; }
.vo-writehint { font-size: 12.5px; color: #55707a; }
.vo-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 8px; }
.vo-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid #c9d6d9; border-radius: 12px;
             background: #fff; text-align: left; font: inherit; color: #0e3b45; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vo-choice:hover { border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.10); }
.vo-choice:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 2px; }
.vo-choice i { font-size: 18px; color: #1a6b7a; }
.vo-choicetitle { font: 600 15px/1.3 Poppins, sans-serif; }
.vo-choicesub { font-size: 12.5px; line-height: 1.45; color: #55707a; }
.vo-writer .vo-pickers { margin-bottom: 10px; }
.vo-note { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #c9d6d9; border-radius: 8px; font: inherit; font-size: 13.5px; color: #0e3b45; margin-bottom: 14px; }
.vo-note:focus { outline: none; border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.14); }
.vo-draft { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; max-height: min(46vh, 440px); overflow-y: auto; padding: 2px 6px 2px 2px; overscroll-behavior: contain; }
.vo-draft:empty { display: none; }
.vo-draftrow { display: flex; flex-direction: column; gap: 4px; }
.vo-draftspan { font-size: 12px; font-weight: 600; color: #55707a; font-variant-numeric: tabular-nums; }
.vo-head[hidden], .vo-list[hidden], .vo-compose[hidden] { display: none; }
@media (max-width: 520px) { .vo-choices { grid-template-columns: 1fr; } .vo-draft { max-height: 28vh; } .vo-list { max-height: 30vh; } }
.vo-status.vo-working { color: #1a6b7a; }
.vo-spin { margin-right: 7px; }
@media (prefers-reduced-motion: reduce) { .vo-spin { animation: none; } }
.vo.vo-line { width: 460px; }
.vo-line .vo-input { margin-bottom: 4px; }
.vo-line .vo-pickers { margin-top: 6px; }
.vo-listactions { margin: 2px 0 4px; }
.vo-actions[hidden] { display: none; }
.vo-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 2px 0 8px; }
/* Four ways in one row on desktop (owner, 2026-10-28): the Voiceover dialog is a little wider than the other .vo dialogs */
.vo:has(> .vo-ways) { width: 600px; }
@media (max-width: 680px) { .vo-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vo-way { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border: 1px solid #c9d6d9; border-radius: 10px;
          background: #fff; text-align: left; font: inherit; color: #0e3b45; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.vo-way:hover:enabled { border-color: #1a6b7a; box-shadow: 0 0 0 3px rgba(26,107,122,.10); }
.vo-way:disabled { opacity: .5; cursor: default; }
.vo-way:focus-visible { outline: 3px solid rgba(60,179,199,.45); outline-offset: 2px; }
.vo-way i { font-size: 16px; color: #1a6b7a; }
.vo-waywords { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vo-waytitle { font: 600 13.5px/1.3 Poppins, sans-serif; }
.vo-waysub { font-size: 11.5px; line-height: 1.4; color: #55707a; }
@media (max-width: 520px) {
  .vo-ways { grid-template-columns: 1fr; gap: 8px; }
  .vo-way { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
  .vo-way i { width: 20px; text-align: center; }
}
/* Music dialog: the Uploads tab (soundselector.js, 2026-10-27, dev) */
.mu-card { position: relative; }
.mu-remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(14,59,69,.55);
             color: #fff; font-size: 13px; cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s; }
.mu-card:hover .mu-remove, .mu-remove:focus-visible { opacity: 1; }
.mu-remove:hover { background: #a52a1e; }
@media (hover: none) { .mu-remove { opacity: 1; } }
.mu-upload { margin: 0 0 0 8px; }
.mu-card img { height: 200px; object-fit: cover; }
.mu-cover { right: 46px; }
.mu-reset { right: 84px; }
.mu-cover:hover, .mu-reset:hover { background: #1a6b7a; }
/* Publish's guard when a voiceover's video changed (videodesigner.js publishChecked) */
.vo-changednote { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: #0e3b45; }
/* Record your voice (musictrimmer.js RecordLineDialog) */
.vo-recat { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.vo-recopt { margin: 4px 0 10px; }
.vo-recview { display: flex; justify-content: center; margin: 0 0 12px; }
.vo-recview canvas { max-width: 100%; border-radius: 8px; background: #0e3b45; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.vo-recstage { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid #e3edf0; border-radius: 12px; background: #f8fbfc; }
.vo .vo-recbtn { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
                 background: #FC4A1A; color: #fff; font-size: 24px; box-shadow: 0 2px 8px rgba(252,74,26,.35); }
.vo .vo-recbtn:hover { background: #e23e10; }
.vo .vo-recbtn.vo-recording { background: #0e3b45; box-shadow: 0 0 0 6px rgba(252,74,26,.25); }
.vo-reccount { font: 700 26px/1 Poppins, sans-serif; }
.vo-recside { flex: 1 1 auto; min-width: 0; }
.vo-reclabel { font: 600 14px/1.3 Poppins, sans-serif; color: #0e3b45; }
.vo-rectime { margin: 2px 0 6px; font: 600 13px/1 Poppins, sans-serif; color: #55707a; font-variant-numeric: tabular-nums; }
.vo-recmeter { height: 8px; border-radius: 4px; background: #e3edf0; overflow: hidden; }
.vo-reclevel { width: 0; height: 100%; background: linear-gradient(90deg, #1a6b7a, #3cb3c7 70%, #FC4A1A); transition: width .06s linear; }
.vo-rectake { display: block; width: 100%; margin-top: 12px; }
.vo-rectake[hidden] { display: none; }