/* CompactCSS source: /apps/captions/video/style.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos gathers the Ein Sof caption studio through focused local modules.
 */


/* CompactCSS source: /apps/captions/video/css/variables.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos gives the caption studio one restrained local visual language.
 */

:root {
	--studio-bg: #070b12;
	--studio-bg-soft: #0b111a;
	--studio-panel: #101925;
	--studio-panel-soft: #152130;
	--studio-panel-strong: #1a2939;
	--studio-text: #f4f7fb;
	--studio-muted: #b5c1d1;
	--studio-faint: #8d9cb0;
	--studio-line: rgba(255, 255, 255, .12);
	--studio-line-strong: rgba(255, 255, 255, .22);
	--studio-cyan: #61cbd9;
	--studio-cyan-soft: rgba(97, 203, 217, .14);
	--studio-magenta: #d36eaa;
	--studio-success: #65d6a2;
	--studio-warning: #f0bd68;
	--studio-danger: #ff7f9c;
	--studio-focus: #82e2ed;
	--studio-radius-s: .68rem;
	--studio-radius-m: .86rem;
	--studio-radius-l: 1.1rem;
	--studio-shadow: 0 1rem 2.8rem rgba(0, 0, 0, .3);
	--studio-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	color-scheme: dark;
}

body {
	margin: 0;
	background: linear-gradient(145deg, #060a11, var(--studio-bg-soft) 62%, #111321);
	color: var(--studio-text);
	font-family: var(--studio-font);
}

button,
input,
select,
textarea {
	font: inherit;
}



/* CompactCSS source: /apps/captions/video/css/layout.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gives the caption studio a contained rail and honest preview.
 */
.caption-studio-document {
	min-block-size: 100dvh;
}
.app-container {
	display: grid;
	grid-template-columns: minmax(20rem, 28rem) minmax(0, 1fr);
	gap: 1rem;
	inline-size: min(calc(100% - 1.5rem), 96rem);
	min-block-size: 100dvh;
	margin: 0 auto;
	padding: .75rem 0;
}
.studio-panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	min-inline-size: 0;
	max-block-size: calc(100dvh - 1.5rem);
	overflow: hidden;
	border: 1px solid var(--studio-line-strong);
	border-radius: var(--studio-radius-l);
	background: var(--studio-panel);
	box-shadow: var(--studio-shadow);
}
.studio-header {
	display: grid;
	gap: .8rem;
	padding: 1rem;
	border-bottom: 1px solid var(--studio-line);
	background: #111b28;
}
.logo-area {
	position: relative;
	min-inline-size: 0;
}
.logo-area p,
.logo-area h1 {
	margin: 0;
}
.logo-area p {
	color: var(--studio-cyan);
	font-size: .72rem;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.logo-area h1 {
	margin-block-start: .22rem;
	font-size: 1.55rem;
	line-height: 1;
	letter-spacing: -.035em;
}
.version {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	color: var(--studio-faint);
	font-size: .7rem;
	font-weight: 800;
}
.header-actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, auto);
	gap: .45rem;
	align-items: end;
}
.scroll-area {
	min-inline-size: 0;
	padding: 1rem;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
#actions-footer {
	display: grid;
	gap: .7rem;
	padding: .9rem 1rem max(.9rem, env(safe-area-inset-bottom));
	border-top: 1px solid var(--studio-line);
	background: #0c141f;
}
#preview-wrapper {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-inline-size: 0;
	min-block-size: calc(100dvh - 1.5rem);
	overflow: hidden;
	border: 1px solid var(--studio-line-strong);
	border-radius: var(--studio-radius-l);
	background: #02050a;
	box-shadow: var(--studio-shadow);
}
#mobile-preview-header {
	display: none;
}
#preview-container {
	position: relative;
	display: grid;
	min-inline-size: 0;
	min-block-size: 0;
	place-items: center;
	overflow: hidden;
	background: #02050a;
}
#previewCanvas,
#outputVideo {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}



/* CompactCSS source: /apps/captions/video/css/components.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos gives each caption setting a calm semantic chamber.
 */

fieldset {
	position: relative;
	min-inline-size: 0;
	margin: 0 0 1rem;
	padding: 1rem;
	border: 1px solid var(--studio-line);
	border-radius: var(--studio-radius-m);
	background: #0d1621;
}

legend {
	padding: 0 .45rem;
	color: var(--studio-cyan);
	font-size: .82rem;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.row {
	display: flex;
	gap: .7rem;
	min-inline-size: 0;
}

.row + .row,
.row + .form-group,
.form-group + .row,
.form-group + .form-group,
.tabs + .form-group,
.tabs + div,
div + .file-label,
.file-label + .file-label,
.control-group + .control-group,
.slider-group + .form-group {
	margin-block-start: .75rem;
}

.half {
	flex: 1 1 0;
	min-inline-size: 0;
}

.form-group,
.file-label,
.control-group,
.slider-group,
.preset-field,
#preset-name-field {
	display: grid;
	gap: .38rem;
	min-inline-size: 0;
	color: var(--studio-muted);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .02em;
}

.form-group > span,
.file-label > span,
.preset-field > span,
#preset-name-field > span {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
}

.form-group > span::before,
.file-label > span::before {
	inline-size: .38rem;
	block-size: .38rem;
	border-radius: 50%;
	background: var(--studio-cyan);
	content: "";
}

.control-group label,
.slider-group label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.value-display {
	padding: .2rem .42rem;
	border-radius: 999px;
	background: var(--studio-cyan-soft);
	color: #a5ecf3;
	font-size: .72rem;
}

.status-text {
	margin: .5rem 0 0;
	color: var(--studio-faint);
	font-size: .78rem;
	line-height: 1.45;
}

.hidden-control,
.hidden {
	display: none !important;
}

#translation-caption-field:not(.hidden-control) {
	margin-block-start: .75rem;
}



/* CompactCSS source: /apps/captions/video/css/fields.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gives every studio field a dark owned surface and clear focus.
 */
input[type="text"],
input[type="number"],
input[type="color"],
input[type="file"],
select,
textarea,
#preset-name {
	inline-size: 100%;
	min-inline-size: 0;
	min-block-size: 48px;
	padding: .72rem .78rem;
	border: 1px solid var(--studio-line-strong);
	border-radius: .72rem;
	background: var(--studio-panel-soft);
	box-shadow: inset 0 1px rgba(255, 255, 255, .035);
	color: var(--studio-text);
	font-size: max(16px, 1rem);
	outline: 0;
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
textarea {
	min-block-size: 8rem;
	resize: vertical;
	line-height: 1.5;
}
input::placeholder,
textarea::placeholder {
	color: var(--studio-faint);
	opacity: 1;
}
:is(input, select, textarea):focus-visible {
	border-color: var(--studio-cyan);
	background: var(--studio-panel-strong);
	box-shadow: 0 0 0 3px rgba(97, 203, 217, .16);
}
:is(input, select, textarea):disabled {
	cursor: not-allowed;
	opacity: .55;
}
:is(input, select, textarea):user-invalid {
	border-color: var(--studio-danger);
}
select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--studio-muted) 50%), linear-gradient(135deg, var(--studio-muted) 50%, transparent 50%);
	background-position: calc(100% - 1rem) 52%, calc(100% - .72rem) 52%;
	background-repeat: no-repeat;
	background-size: .3rem .3rem;
	padding-inline-end: 2.2rem;
}
input[type="file"] {
	padding: .38rem;
	font-size: .82rem;
}
input[type="file"]::file-selector-button {
	min-block-size: 40px;
	margin-inline-end: .6rem;
	padding: .55rem .72rem;
	border: 1px solid rgba(97, 203, 217, .38);
	border-radius: .58rem;
	background: var(--studio-cyan-soft);
	color: #a7edf4;
	font-weight: 800;
	cursor: pointer;
}
input[type="color"] {
	padding: .3rem;
	cursor: pointer;
}
input[type="range"] {
	inline-size: 100%;
	min-block-size: 44px;
	margin: 0;
	appearance: none;
	background: transparent;
	cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
	block-size: .38rem;
	border-radius: 999px;
	background: #344457;
}
input[type="range"]::-webkit-slider-thumb {
	inline-size: 1.45rem;
	block-size: 1.45rem;
	margin-block-start: -.53rem;
	appearance: none;
	border: 3px solid #0b121c;
	border-radius: 50%;
	background: var(--studio-cyan);
	box-shadow: 0 0 0 2px rgba(97, 203, 217, .2);
}
input[type="range"]::-moz-range-track {
	block-size: .38rem;
	border-radius: 999px;
	background: #344457;
}
input[type="range"]::-moz-range-thumb {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	border: 3px solid #0b121c;
	border-radius: 50%;
	background: var(--studio-cyan);
}



/* CompactCSS source: /apps/captions/video/css/choices.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gives every binary and categorical choice a full touch surface.
 */
.tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .35rem;
	padding: .28rem;
	border: 1px solid var(--studio-line);
	border-radius: .78rem;
	background: #0a121c;
}
.tab,
.toggle-switch,
.toggle-card {
	position: relative;
	cursor: pointer;
	user-select: none;
}
.tab {
	display: grid;
	min-block-size: 46px;
	place-items: center;
	padding: .6rem .7rem;
	border: 1px solid transparent;
	border-radius: .62rem;
	color: var(--studio-muted);
	font-size: .82rem;
	font-weight: 800;
	text-align: center;
}
.tab input,
.toggle-card input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	opacity: 0;
}
.tab:has(input:checked) {
	border-color: rgba(97, 203, 217, .48);
	background: var(--studio-cyan-soft);
	color: #a7edf4;
}
.tab:has(input:focus-visible),
.toggle-card:has(input:focus-visible),
.toggle-switch:has(input:focus-visible) {
	outline: 3px solid var(--studio-focus);
	outline-offset: 3px;
}
.toggle-switch {
	display: flex;
	align-items: center;
	gap: .7rem;
	min-block-size: 46px;
	padding: .65rem .72rem;
	border: 1px solid var(--studio-line);
	border-radius: .72rem;
	background: #121c29;
	color: var(--studio-muted);
	font-size: .82rem;
	font-weight: 780;
}
.toggle-switch input {
	inline-size: 1.3rem;
	block-size: 1.3rem;
	margin: 0;
	accent-color: var(--studio-cyan);
	flex: 0 0 auto;
}
.toggle-switch:has(input:checked) {
	border-color: rgba(97, 203, 217, .42);
	background: var(--studio-cyan-soft);
	color: var(--studio-text);
}
.fx-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .48rem;
	margin-block-end: .85rem;
}
.toggle-card {
	display: grid;
	min-block-size: 54px;
	place-items: center;
	padding: .55rem .4rem;
	border: 1px solid var(--studio-line);
	border-radius: .68rem;
	background: #111b28;
	color: var(--studio-faint);
	font-size: .76rem;
	font-weight: 800;
	text-align: center;
}
.toggle-card:has(input:checked) {
	border-color: rgba(97, 203, 217, .5);
	background: var(--studio-cyan-soft);
	color: #b5f0f5;
}
.fieldset-randomize {
	position: absolute;
	inset-block-start: -.2rem;
	inset-inline-end: .55rem;
	min-block-size: 44px;
	padding: .48rem .62rem;
	border: 1px solid var(--studio-line);
	border-radius: .62rem;
	background: #152130;
	color: var(--studio-muted);
	font-size: .72rem;
	font-weight: 800;
	cursor: pointer;
}



/* CompactCSS source: /apps/captions/video/css/actions.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos gives every studio action a clear hierarchy and touch doorway.
 */
button {
	min-block-size: 44px;
	padding: .62rem .78rem;
	border: 1px solid var(--studio-line-strong);
	border-radius: .7rem;
	background: var(--studio-panel-soft);
	box-shadow: none;
	color: var(--studio-text);
	font-weight: 820;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
button:is(:hover, :focus-visible):not(:disabled) {
	border-color: var(--studio-cyan);
	background: var(--studio-panel-strong);
	transform: translateY(-1px);
}
button:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--studio-focus);
	outline-offset: 3px;
}
button:disabled {
	cursor: not-allowed;
	opacity: .5;
	transform: none;
}
.icon-btn {
	white-space: nowrap;
}
.preset-field select {
	min-block-size: 44px;
	font-size: 14px;
}
.main-buttons {
	display: grid;
	grid-template-columns: minmax(8rem, .7fr) minmax(10rem, 1.3fr);
	gap: .6rem;
}
.main-buttons button {
	min-block-size: 52px;
}
.primary-btn {
	border-color: var(--studio-cyan);
	background: var(--studio-cyan);
	color: #061116;
}
.primary-btn:is(:hover, :focus-visible):not(:disabled) {
	background: #7ad9e5;
	color: #061116;
}
.secondary-btn {
	background: #172536;
}
#mobile-close-btn {
	min-inline-size: 44px;
}
#cancelButton {
	min-inline-size: min(18rem, calc(100vw - 2rem));
	border-color: rgba(255, 127, 156, .52);
	background: rgba(255, 127, 156, .14);
	color: #ffc2cf;
}
#preset-dialog {
	inline-size: min(calc(100% - 1.5rem), 30rem);
	padding: 0;
	border: 1px solid var(--studio-line-strong);
	border-radius: var(--studio-radius-l);
	background: #101925;
	box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .55);
	color: var(--studio-text);
}
#preset-dialog::backdrop {
	background: rgba(2, 5, 10, .78);
}
#preset-dialog form {
	display: grid;
	gap: .9rem;
	padding: 1.1rem;
}
#preset-dialog h2,
#preset-dialog p {
	margin: 0;
}
#preset-dialog h2 {
	font-size: 1.25rem;
}
#preset-dialog-copy {
	color: var(--studio-muted);
	line-height: 1.5;
}
#preset-dialog-error {
	min-block-size: 1.2rem;
	color: #ffc2cf;
	font-size: .82rem;
}
.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: .55rem;
}
#preset-dialog-confirm {
	border-color: var(--studio-cyan);
	background: var(--studio-cyan);
	color: #061116;
}



/* CompactCSS source: /apps/captions/video/css/effects.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos reveals progress without blur, glow loops, or ornamental delay.
 */

#status {
	min-block-size: 1.35rem;
	margin: 0;
	color: var(--studio-muted);
	font-size: .82rem;
	font-weight: 760;
	line-height: 1.4;
}

#status.success {
	color: var(--studio-success);
}

#status.warning {
	color: var(--studio-warning);
}

#status.error {
	color: #ffc2cf;
}

#progressContainer {
	inline-size: 100%;
	block-size: .45rem;
	overflow: hidden;
	border: 1px solid var(--studio-line);
	border-radius: 999px;
	background: #1a2635;
}

#progressContainer[hidden] {
	display: none;
}

#progressBar {
	inline-size: 0;
	block-size: 100%;
	background: linear-gradient(90deg, var(--studio-cyan), var(--studio-magenta));
	transition: width 180ms linear;
}

#render-overlay {
	position: absolute;
	inset: 0;
	display: none;
	place-content: center;
	place-items: center;
	gap: .8rem;
	padding: 1rem;
	background: rgba(2, 5, 10, .9);
	color: var(--studio-text);
	text-align: center;
	z-index: 10;
}

#controls-wrapper.rendering + #preview-wrapper #render-overlay,
.app-container.rendering #render-overlay,
#controls-wrapper.rendering #render-overlay {
	display: grid;
}

#controls-wrapper.rendering #controls {
	pointer-events: none;
	opacity: .55;
}

.render-mark {
	display: grid;
	inline-size: 4rem;
	block-size: 4rem;
	place-items: center;
	border: 1px solid rgba(97, 203, 217, .42);
	border-radius: 1rem;
	background: var(--studio-cyan-soft);
	color: #a7edf4;
	font-weight: 900;
}

#render-overlay p {
	margin: 0;
	color: var(--studio-muted);
	font-weight: 780;
}

#previewCanvas.hidden,
#outputVideo.hidden {
	display: none !important;
}



/* CompactCSS source: /apps/captions/video/css/responsive.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos preserves the caption studio across zoom, phones, and landscape.
 */
@media (max-width: 72rem) {
	.app-container {
		grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
	}
	.header-actions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.preset-field {
		grid-column: 1 / -1;
	}
}
@media (max-width: 54rem) {
	.app-container {
		display: block;
		inline-size: 100%;
		padding: 0;
	}
	.studio-panel {
		max-block-size: 100dvh;
		min-block-size: 100dvh;
		border: 0;
		border-radius: 0;
	}
	#preview-wrapper {
		position: fixed;
		inset: 0;
		z-index: 100;
		min-block-size: 100dvh;
		border: 0;
		border-radius: 0;
		transform: translateY(100%);
		transition: transform 180ms ease-out;
	}
	#preview-wrapper.mobile-visible {
		transform: translateY(0);
	}
	#mobile-preview-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: max(.7rem, env(safe-area-inset-top)) max(.8rem, env(safe-area-inset-right)) .7rem max(.8rem, env(safe-area-inset-left));
		border-bottom: 1px solid var(--studio-line);
		background: #0d1621;
	}
	#mobile-preview-header h2 {
		margin: 0;
		font-size: 1rem;
	}
	#preview-container {
		padding: .65rem;
	}
}
@media (max-width: 38rem) {
	.studio-header,
	.scroll-area,
	#actions-footer {
		padding-inline: .75rem;
	}
	.header-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.preset-field {
		grid-column: 1 / -1;
	}
	.row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.fx-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.main-buttons,
	.dialog-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}
	.dialog-actions button {
		inline-size: 100%;
	}
}
@media (max-height: 34rem) and (orientation: landscape) {
	.studio-panel {
		max-block-size: none;
		min-block-size: 100dvh;
	}
	#preview-container {
		min-block-size: calc(100dvh - 4rem);
	}
}
@media (prefers-reduced-motion: reduce) {
	.caption-studio-document * {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}