/* purpose: Observableyou streaming layout */
/* author: MD Hub */
/* date: 2026-09-29 */

body.ap-kind-observableyou{background:#07080f}
body.ap-kind-observableyou #ap_app{background:#07080f;min-height:100dvh}
body.ap-kind-observableyou #ap_workspace{background:#07080f;overflow:auto}
#oy_app{
	color:#f4f1ea;
	font-family:Georgia, "Iowan Old Style", "Palatino Linotype", serif;
	min-height:100%;
	background:
		radial-gradient(1200px 480px at 10% -10%, rgba(214,178,94,.16), transparent 55%),
		radial-gradient(900px 420px at 100% 0%, rgba(126,232,214,.08), transparent 50%),
		#07080f;
}
#oy_app button,#oy_app input,#oy_app textarea,#oy_app select{font-family:inherit}
.oy-top{
	display:flex;
	flex-wrap:wrap;
	gap:12px 18px;
	align-items:center;
	padding:16px 22px 8px;
	position:sticky;
	top:0;
	z-index:5;
	background:linear-gradient(#07080f 70%, rgba(7,8,15,0));
}
.oy-brand{
	display:inline-flex;
	align-items:center;
	gap:10px;
	border:0;
	background:transparent;
	color:#f4f1ea;
	font-size:22px;
	letter-spacing:.04em;
	cursor:pointer;
	padding:0;
}
.oy-mark{
	width:18px;
	height:18px;
	border-radius:50%;
	border:2px solid #d6b25e;
	box-shadow:inset 0 0 0 4px #07080f, 8px -6px 0 -2px #7ee8d6;
}
.oy-nav{display:flex;flex-wrap:wrap;gap:6px}
.oy-nav button,.oy-btn,.oy-btn-ghost{
	border:1px solid rgba(244,241,234,.16);
	background:rgba(244,241,234,.04);
	color:#f4f1ea;
	border-radius:999px;
	padding:8px 12px;
	cursor:pointer;
	font-size:14px;
}
.oy-nav button.on,.oy-btn{background:#d6b25e;color:#1a1408;border-color:#d6b25e}
.oy-btn-ghost{background:transparent}
.oy-search{margin-left:auto}
.oy-search input,.oy-field input,.oy-field textarea,.oy-field select{
	background:#10131c;
	color:#f4f1ea;
	border:1px solid rgba(244,241,234,.16);
	border-radius:12px;
	padding:10px 12px;
	min-width:0;
}
.oy-search input{width:min(280px, 70vw)}
#oy_main{padding:8px 22px 48px}
#oy_toast{
	margin:0 22px;
	padding:10px 12px;
	border-radius:12px;
	background:#24180c;
	color:#f4e2b8;
	border:1px solid rgba(214,178,94,.4);
}
.oy-hero{
	display:grid;
	grid-template-columns:minmax(180px, 280px) 1fr;
	gap:22px;
	align-items:end;
	padding:12px 0 28px;
}
.oy-hero-copy h1{font-size:clamp(32px, 5vw, 64px);line-height:.95;margin:0 0 10px;font-weight:500}
.oy-kicker{color:#d6b25e;letter-spacing:.16em;text-transform:uppercase;font-size:12px;font-family:system-ui,sans-serif}
.oy-lede{max-width:46rem;color:#d9d3c7;font-size:18px;line-height:1.45}
.oy-row{margin:8px 0 22px}
.oy-row h2{font-size:22px;font-weight:500;margin:0 0 10px}
.oy-rail{display:flex;gap:12px;overflow:auto;padding-bottom:8px}
.oy-card{
	flex:0 0 168px;
	border:0;
	padding:0;
	background:transparent;
	color:inherit;
	text-align:left;
	cursor:pointer;
}
.oy-poster{
	aspect-ratio:2/3;
	border-radius:14px;
	background:
		linear-gradient(160deg, rgba(214,178,94,.35), rgba(126,232,214,.12) 40%, #151822);
	background-size:cover;
	background-position:center;
	box-shadow:0 16px 40px rgba(0,0,0,.35);
	position:relative;
}
.oy-poster span,.oy-badge{
	position:absolute;
	left:8px;
	bottom:8px;
	background:rgba(7,8,15,.82);
	border-radius:999px;
	padding:4px 8px;
	font-family:system-ui,sans-serif;
	font-size:11px;
	letter-spacing:.04em;
}
.oy-card strong,.oy-card em{display:block}
.oy-card strong{margin-top:8px;font-weight:500}
.oy-card em{font-style:normal;color:#b7b1a6;font-size:13px;font-family:system-ui,sans-serif}
.oy-empty{color:#b7b1a6;max-width:40rem;line-height:1.5}
.oy-stage{display:grid;grid-template-columns:minmax(240px, 420px) 1fr;gap:22px}
.oy-player{
	background:#05060a;
	border-radius:18px;
	overflow:hidden;
	min-height:220px;
	border:1px solid rgba(244,241,234,.08);
}
.oy-player video,.oy-player iframe{width:100%;height:min(56vw, 420px);border:0;background:#000;display:block}
.oy-lock{padding:28px 18px;text-align:center}
.oy-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.oy-meta{color:#b7b1a6;font-family:system-ui,sans-serif;font-size:14px}
.oy-creator-head{display:flex;gap:16px;align-items:flex-end;margin-bottom:18px}
.oy-avatar{
	width:84px;height:84px;border-radius:50%;
	background:radial-gradient(circle at 30% 30%, #d6b25e, #1b2233);
	background-size:cover;background-position:center;flex:0 0 auto;
}
.oy-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:14px}
.oy-merch{
	border:1px solid rgba(244,241,234,.1);
	border-radius:16px;
	overflow:hidden;
	background:#10131c;
}
.oy-merch img,.oy-merch .oy-ph{width:100%;aspect-ratio:1;object-fit:cover;background:#1b2233;display:block}
.oy-merch div{padding:10px 12px 12px}
.oy-merch strong{display:block}
.oy-studio{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:16px}
.oy-panel{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(244,241,234,.1);
	border-radius:16px;
	padding:14px;
}
.oy-field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font-family:system-ui,sans-serif;font-size:13px}
.oy-field textarea{min-height:90px}
.oy-note{font-family:system-ui,sans-serif;color:#b7b1a6;font-size:13px}
.oy-film-mini{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(244,241,234,.08)}
@media (max-width: 800px){
	.oy-hero,.oy-stage{grid-template-columns:1fr}
	.oy-search{margin-left:0;width:100%}
	.oy-search input{width:100%}
	#oy_main,.oy-top{padding-left:14px;padding-right:14px}
}