/* CompactCSS source: /record/style.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos gathers the camera viewer through focused Geelooy vessels.
 */


/* CompactCSS source: /record/styles/shell.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos gives the camera viewer one readable shell and route identity.
 */

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

html {
	color-scheme: dark;
}

body {
	min-block-size: 100dvh;
	margin: 0;
	padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
	background: linear-gradient(145deg, #060a11, #0c121d 62%, #111323);
	color: #f4f7fb;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.camera-shell {
	display: grid;
	gap: 1rem;
	inline-size: min(100%, 68rem);
	margin: 0 auto;
}

.camera-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 1rem;
}

.camera-back {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: .58rem .78rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: .72rem;
	background: #141f2e;
	color: #a7e8f1;
	font-weight: 800;
	text-decoration: none;
}

.camera-header h1,
.camera-header p {
	margin: 0;
}

.camera-header h1 {
	font-size: clamp(1.7rem, 5vw, 3rem);
	line-height: 1;
	letter-spacing: -.045em;
}

.camera-header > div > p:last-child {
	max-inline-size: 46rem;
	margin-block-start: .55rem;
	color: #b4c0d1;
	line-height: 1.55;
}

.camera-kicker {
	margin-block-end: .35rem !important;
	color: #61cbd9;
	font-size: .76rem;
	font-weight: 900;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.camera-status,
.camera-note {
	margin: 0;
	color: #aebccd;
	line-height: 1.45;
}

.camera-status {
	padding: .72rem .82rem;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: .78rem;
	background: #121c29;
}

.camera-status[data-tone="error"] {
	border-color: rgba(255, 127, 156, .42);
	color: #ffc4d0;
}

.camera-note {
	font-size: .82rem;
}



/* CompactCSS source: /record/styles/stage.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos contains live camera light inside a deliberate preview stage.
 */

.camera-stage {
	position: relative;
	display: grid;
	min-block-size: min(66vh, 42rem);
	place-items: center;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 1.15rem;
	background: #050911;
	box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .34);
}

.camera-stage video {
	display: none;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.camera-stage[data-camera-state="live"] video {
	display: block;
}

.camera-empty {
	display: grid;
	max-inline-size: 28rem;
	place-items: center;
	gap: .55rem;
	padding: 2rem;
	color: #b6c2d2;
	text-align: center;
}

.camera-empty span {
	display: grid;
	inline-size: 4rem;
	block-size: 4rem;
	place-items: center;
	border: 1px solid rgba(97, 203, 217, .38);
	border-radius: 1rem;
	background: rgba(97, 203, 217, .1);
	color: #8fe3ed;
	font-size: 1.8rem;
}

.camera-empty strong {
	color: #f4f7fb;
	font-size: 1.1rem;
}

.camera-empty p {
	margin: 0;
	line-height: 1.5;
}

.camera-stage[data-camera-state="live"] .camera-empty {
	display: none;
}

.camera-live-mark {
	position: absolute;
	inset-block-start: .8rem;
	inset-inline-start: .8rem;
	display: none;
	padding: .38rem .58rem;
	border-radius: 999px;
	background: rgba(7, 12, 20, .82);
	color: #a9edcd;
	font-size: .75rem;
	font-weight: 850;
}

.camera-stage[data-camera-state="live"] .camera-live-mark {
	display: inline-flex;
}



/* CompactCSS source: /record/styles/actions.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos gives each camera action a clear touch doorway and state.
 */

.camera-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
}

.camera-actions button {
	min-block-size: 48px;
	padding: .72rem 1rem;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: .78rem;
	background: #172435;
	color: #f4f7fb;
	font: 820 .92rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.camera-actions .camera-primary {
	border-color: #61cbd9;
	background: #61cbd9;
	color: #061116;
}

.camera-actions button:is(:hover, :focus-visible):not(:disabled) {
	border-color: #82e2ed;
	background: #203247;
	transform: translateY(-1px);
}

.camera-actions .camera-primary:is(:hover, :focus-visible):not(:disabled) {
	background: #7ad9e5;
}

.camera-actions button:disabled {
	cursor: not-allowed;
	opacity: .5;
	transform: none;
}

.camera-actions button:focus-visible,
.camera-back:focus-visible {
	outline: 3px solid #82e2ed;
	outline-offset: 3px;
}



/* CompactCSS source: /record/styles/responsive.css */
/* B"H
 * Boruch Hashem
 * Blessed is He
 *
 * The Awtsmoos preserves camera access across narrow, landscape, and still vessels.
 */

@media (max-width: 38rem) {
	.camera-header {
		grid-template-columns: 1fr;
	}

	.camera-back {
		inline-size: fit-content;
	}

	.camera-stage {
		min-block-size: 56vh;
	}

	.camera-actions {
		display: grid;
	}

	.camera-actions button {
		inline-size: 100%;
	}
}

@media (max-height: 32rem) and (orientation: landscape) {
	.camera-stage {
		min-block-size: 62vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.camera-document * {
		transition: none !important;
	}
}