/* purpose: Observableyou streaming layout — Observable Universe Inc brand from observableyou.com */
/* author: MD Hub */
/* date: 2026-10-07 */

body.ap-kind-observableyou{
	--oy-mag:#ff00f0;
	--oy-cyan:#00e0f0;
	--oy-ink:#202020;
	--oy-paper:#f0f0f0;
	--oy-mute:#b0b0b0;
	--oy-line:rgba(176,176,176,.2);
	--oy-card:#161616;
	--bo-bg:#202020;
	--bo-bg-elevated:#202020;
	--bo-text:#f0f0f0;
	--bo-text-strong:#f0f0f0;
	--bo-text-muted:#b0b0b0;
	--bo-border:rgba(176,176,176,.2);
	--bo-accent:#ff00f0;
	--bo-on-accent:#f0f0f0;
	background:#202020;
	color:#f0f0f0;
	font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
}
body.ap-kind-observableyou #ap_app{background:#202020;min-height:100dvh;color:#f0f0f0;position:relative}
body.ap-kind-observableyou #ap_workspace{background:#202020;overflow:auto;padding:0}
body.ap-kind-observableyou .ap-top,
body.ap-kind-observableyou .ph-top{
	background:#202020;
	border-bottom:1px solid rgba(176,176,176,.2);
	color:#f0f0f0;
}
body.ap-kind-observableyou .ap-brand h1{color:#f0f0f0;letter-spacing:-.03em;font-weight:740}
body.ap-kind-observableyou .ap-brand p{color:#b0b0b0}
body.ap-kind-observableyou .ap-btn,
body.ap-kind-observableyou .ph-btn{
	background:rgba(32,32,32,.35);
	border-color:#00e0f0;
	color:#00e0f0;
	border-radius:999px;
	font-weight:750;
	letter-spacing:.04em;
}
body.ap-kind-observableyou .ap-btn:hover,
body.ap-kind-observableyou .ph-btn:hover{background:rgba(0,224,240,.12)}
body.ap-kind-observableyou #ap_install_app,
body.ap-kind-observableyou .ap-btn.ap-go{
	background:#ff00f0;
	border-color:#ff00f0;
	color:#f0f0f0;
}
#oy_app{
	color:#f0f0f0;
	font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
	min-height:100%;
	background:
		radial-gradient(1200px 480px at 10% -10%, rgba(255,0,240,.16), transparent 55%),
		radial-gradient(900px 420px at 100% 0%, rgba(0,224,240,.08), transparent 50%),
		#202020;
}
#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(#202020 70%, rgba(32,32,32,0));
	backdrop-filter:blur(14px);
}
.oy-brand{
	display:inline-flex;
	align-items:center;
	gap:10px;
	border:0;
	background:transparent;
	color:#f0f0f0;
	font-size:22px;
	letter-spacing:-.02em;
	font-weight:740;
	cursor:pointer;
	padding:0;
}
.oy-logo-mark{height:36px;width:auto;display:block;flex:0 0 auto}
.oy-mark{
	width:18px;
	height:18px;
	border-radius:50%;
	border:2px solid #ff00f0;
	box-shadow:inset 0 0 0 4px #202020, 8px -6px 0 -2px #00e0f0;
}
.oy-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.oy-nav button,.oy-btn,.oy-btn-ghost,.oy-more-btn{
	border:1px solid rgba(240,240,240,.16);
	background:rgba(240,240,240,.04);
	color:#f0f0f0;
	border-radius:999px;
	padding:8px 12px;
	cursor:pointer;
	font-size:14px;
	transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.oy-nav button.on,.oy-btn{background:#ff00f0;color:#f0f0f0;border-color:#ff00f0;font-weight:750;letter-spacing:.04em}
.oy-btn-ghost{background:transparent}
.oy-nav button:hover,.oy-btn-ghost:hover,.oy-more-btn:hover{border-color:#00e0f0;color:#d6fbff}
.oy-btn:hover{box-shadow:0 8px 22px rgba(255,0,240,.28)}
.oy-nav-more{display:contents}
.oy-more-btn{display:none}
.oy-nav-extra{display:contents}
.oy-search{margin-left:auto}
.oy-search input,.oy-field input,.oy-field textarea,.oy-field select{
	background:#161616;
	color:#f0f0f0;
	border:1px solid rgba(240,240,240,.16);
	border-radius:12px;
	padding:10px 12px;
	min-width:0;
}
.oy-search input{width:min(280px, 70vw)}
#oy_main{padding:8px 22px 48px;width:100%;max-width:1440px;margin:0 auto;box-sizing:border-box}
#oy_toast{
	margin:0 22px;
	padding:10px 12px;
	border-radius:12px;
	background:#2a1228;
	color:#f4e2b8;
	border:1px solid rgba(255,0,240,.4);
}
.oy-hero{
	display:grid;
	gap:18px;
	align-items:end;
	padding:12px 0 28px;
	position:relative;
}
.oy-hero-banner{
	border-radius:24px;
	padding:28px 24px;
	background:
		radial-gradient(720px 280px at 8% 0%, rgba(255,0,240,.22), transparent 58%),
		radial-gradient(640px 240px at 100% 90%, rgba(0,224,240,.14), transparent 52%),
		#161616;
	border:1px solid rgba(240,240,240,.08);
}
.oy-hero-has-art{
	min-height:220px;
	border-radius:22px;
	overflow:hidden;
	padding:0;
	border:1px solid rgba(240,240,240,.08);
	background:#161616;
}
.oy-hero-art{
	display:block;
	width:100%;
	min-height:220px;
	aspect-ratio:16/9;
	border:0;
	padding:0;
	cursor:pointer;
	background:#141414 center/cover no-repeat;
	position:relative;
}
.oy-hero-art::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg, transparent 55%, rgba(32,32,32,.4) 100%);
	pointer-events:none;
}
.oy-hero-has-art .oy-hero-copy{
	padding:0 18px 18px;
	position:relative;
	z-index:1;
}
.oy-hero-copy h1{font-size:clamp(32px, 5vw, 64px);line-height:.92;margin:0 0 10px;font-weight:760;letter-spacing:-.045em}
.oy-kicker{color:#00e0f0;letter-spacing:.22em;text-transform:uppercase;font-size:13px;font-weight:750;font-family:"Segoe UI",system-ui,sans-serif}
.oy-lede{max-width:46rem;color:#b0b0b0;font-size:18px;line-height:1.45}
.oy-row{margin:8px 0 22px}
.oy-row h2{font-size:22px;font-weight:740;letter-spacing:-.03em;margin:0 0 10px}
.oy-rail{
	display:flex;
	gap:14px;
	overflow:auto;
	padding:4px 2px 14px;
	scrollbar-width:thin;
	scrollbar-color:rgba(255,0,240,.45) transparent;
}
.oy-card{
	flex:0 0 168px;
	border:0;
	padding:0;
	background:transparent;
	color:inherit;
	text-align:left;
	cursor:pointer;
	transition:transform .18s ease;
}
.oy-card:hover{transform:translateY(-4px)}
.oy-poster{
	aspect-ratio:2/3;
	border-radius:14px;
	background:
		linear-gradient(160deg, rgba(255,0,240,.35), rgba(0,224,240,.12) 40%, #141414);
	background-size:cover;
	background-position:center;
	box-shadow:0 16px 40px rgba(0,0,0,.35);
	position:relative;
	transition:box-shadow .18s ease, transform .18s ease;
}
.oy-card:hover .oy-poster{box-shadow:0 22px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,224,240,.28)}
.oy-poster span,.oy-badge{
	position:absolute;
	left:8px;
	bottom:8px;
	background:rgba(32,32,32,.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:#b0b0b0;font-size:13px;font-family:system-ui,sans-serif}
.oy-empty{color:#b0b0b0;max-width:40rem;line-height:1.5}
.oy-stage{display:grid;grid-template-columns:minmax(240px, 420px) 1fr;gap:22px}
.oy-player{
	background:#161616;
	border-radius:18px;
	overflow:hidden;
	min-height:220px;
	border:1px solid rgba(240,240,240,.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-lock .oy-field{text-align:left;max-width:280px;margin:10px auto}
.oy-lock-offers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.oy-geo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:8px 0 16px}
.oy-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.oy-meta{color:#b0b0b0;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%, #ff00f0, #2a2a2a);
	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(240,240,240,.1);
	border-radius:16px;
	overflow:hidden;
	background:#161616;
	transition:border-color .16s ease, transform .16s ease;
}
.oy-merch:hover{border-color:rgba(0,224,240,.45);transform:translateY(-2px)}
.oy-merch img,.oy-merch .oy-ph{width:100%;aspect-ratio:1;object-fit:cover;background:#2a2a2a;display:block}
.oy-merch div{padding:10px 12px 12px}
.oy-merch strong{display:block}
.oy-merch .oy-field{margin:8px 0 10px}
.oy-merch .oy-btn{margin-top:6px}
.oy-merch-gallery{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:8px 0;
}
.oy-merch-gallery img{
	width:44px;
	height:44px;
	aspect-ratio:1;
	object-fit:cover;
	border-radius:8px;
	border:1px solid rgba(240,240,240,.12);
}
.oy-merch-video{
	width:100%;
	max-height:180px;
	margin:8px 0;
	border-radius:10px;
	background:#161616;
}
.oy-price-line{margin:6px 0}
.oy-sale{color:#00e0f0;font-weight:600}
.oy-was{color:#b0b0b0;margin-left:6px}
.oy-variant-row{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 80px auto;
	gap:8px;
	margin:0 0 8px;
	align-items:center;
}
.oy-variant-row input{
	background:#161616;
	color:#f0f0f0;
	border:1px solid rgba(240,240,240,.16);
	border-radius:12px;
	padding:10px 12px;
	min-width:0;
}
.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(240,240,240,.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:#b0b0b0;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(240,240,240,.08)}
.oy-btn-aqua,.oy-nav button.oy-btn-aqua{background:rgba(32,32,32,.35);color:#00e0f0;border-color:#00e0f0}
.oy-plans{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:14px;
	margin-top:18px;
}
.oy-plan{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:18px;
	padding:16px;
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}
.oy-plan.on{border-color:#00e0f0;box-shadow:0 0 0 1px rgba(0,224,240,.35)}
.oy-plan.rec{border-color:rgba(0,224,240,.45)}
.oy-plan h2{margin:0;font-weight:500;font-size:28px}
.oy-price{font-size:34px;line-height:1;margin:0;color:#00e0f0}
.oy-price em{font-style:normal;font-size:14px;color:#b0b0b0;margin-left:4px}
.oy-plan-list{list-style:none;margin:8px 0 0;padding:0;font-family:system-ui,sans-serif;font-size:13px}
.oy-plan-list li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(240,240,240,.08)}
.oy-plan-list span{color:#b0b0b0}
.oy-plan-list strong{font-weight:600;text-align:right}
.oy-badge-inline{
	display:inline-block;
	border-radius:999px;
	padding:8px 12px;
	background:rgba(0,224,240,.16);
	color:#00e0f0;
	font-family:system-ui,sans-serif;
	font-size:13px;
}
.oy-plan-strip{grid-column:1 / -1}
.oy-view-channel{display:none}
.oy-mode-studio .oy-nav{display:none}
.oy-mode-studio .oy-view-channel{display:inline-flex}
.oy-backoffice{
	display:grid;
	grid-template-columns:220px minmax(0, 1fr);
	gap:18px 22px;
	align-items:start;
}
.oy-bo-side{
	position:sticky;
	top:72px;
}
.oy-studio-nav{
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
	gap:4px;
	margin:0;
}
.oy-studio-nav button{
	text-align:left;
	border-radius:10px;
	padding:8px 12px;
	width:100%;
}
.oy-studio-sub{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.oy-create-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:12px;
	margin:12px 0 22px;
}
.oy-create-card{
	text-align:left;
	border:1px solid rgba(240,240,240,.12);
	background:rgba(16,19,28,.92);
	color:#f0f0f0;
	border-radius:16px;
	padding:14px 16px;
	cursor:pointer;
	font-family:inherit;
	display:flex;
	flex-direction:column;
	gap:6px;
	min-height:120px;
}
.oy-create-card strong{font-size:18px;font-weight:500}
.oy-create-card span{color:#b0b0b0;font-family:system-ui,sans-serif;font-size:13px;flex:1}
.oy-create-card em{font-style:normal;color:#00e0f0;font-family:system-ui,sans-serif;font-size:13px}
.oy-create-card:hover{border-color:#00e0f0}
.oy-ai-examples{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.oy-ai-chip{
	text-align:left;
	max-width:100%;
	border:1px solid rgba(0,224,240,.28);
	background:rgba(0,224,240,.08);
	color:#d6fbff;
	border-radius:999px;
	padding:8px 12px;
	font-size:13px;
	font-family:system-ui,sans-serif;
	cursor:pointer;
}
.oy-ai-chip:hover{border-color:#00e0f0}
.oy-ai-prompt textarea{min-height:120px;resize:vertical}
.oy-ait-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
	gap:8px;
	margin:8px 0 4px;
}
.oy-ait-tool{
	text-align:left;
	border:1px solid rgba(240,240,240,.12);
	background:rgba(16,19,28,.92);
	color:#f0f0f0;
	border-radius:14px;
	padding:10px 12px;
	font-family:system-ui,sans-serif;
	cursor:pointer;
	min-height:78px;
}
.oy-ait-tool strong{display:block;font-size:13px;margin-bottom:4px}
.oy-ait-tool span{display:block;font-size:12px;color:#b0b0b0;line-height:1.35}
.oy-ait-tool.on,.oy-ait-tool:hover{border-color:#00e0f0;color:#d6fbff}
.oy-rights-banner{
	border-color:rgba(0,224,240,.35);
	background:linear-gradient(180deg, rgba(0,224,240,.1), rgba(16,19,28,.92));
	margin-bottom:16px;
}
.oy-rights-tag{
	margin:0 0 8px;
	font-size:22px;
	line-height:1.25;
	font-weight:740;
	letter-spacing:-.02em;
	color:#00e0f0;
}
.oy-rights-value{
	display:block;
	margin:4px 0;
	font-size:20px;
	font-weight:700;
	color:#00e0f0;
}
.oy-ait-out{
	white-space:pre-wrap;
	margin:8px 0 0;
	padding:10px 12px;
	background:rgba(0,224,240,.06);
	border:1px solid rgba(0,224,240,.16);
	border-radius:10px;
	color:#d6fbff;
	font-size:13px;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	max-height:220px;
	overflow:auto;
}
.oy-kpi-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));
	gap:10px;
	margin:8px 0 22px;
}
.oy-kpi{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:16px;
	padding:12px 14px;
	min-width:0;
}
.oy-kpi-label{
	font-family:system-ui,sans-serif;
	font-size:12px;
	color:#b0b0b0;
	letter-spacing:.03em;
}
.oy-kpi-value{font-size:26px;line-height:1.15;margin:8px 0 0;color:#00e0f0}
.oy-kpi.soon .oy-kpi-value,.oy-activity li.soon span{color:#b0b0b0}
.oy-kpi-hint{font-family:system-ui,sans-serif;font-size:11px;color:#b0b0b0;margin-top:6px}
.oy-meter-row{margin:10px 0}
.oy-meter-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-family:system-ui,sans-serif;font-size:13px}
.oy-meter-head strong{font-weight:600}
.oy-meter-head span{color:#b0b0b0}
.oy-meter{height:8px;background:rgba(240,240,240,.08);border-radius:99px;overflow:hidden;margin-top:6px}
.oy-meter > span{display:block;height:100%;background:#00e0f0;border-radius:99px}
.oy-activity-panel{margin-top:8px}
.oy-activity-panel h2,.oy-activity-panel h3{margin:0 0 8px;font-weight:500}
.oy-activity-panel h3{margin-top:16px;font-size:16px;color:#ff00f0}
.oy-activity{list-style:none;margin:0;padding:0}
.oy-activity li{
	display:flex;
	justify-content:space-between;
	gap:12px;
	align-items:baseline;
	padding:10px 0;
	border-bottom:1px solid rgba(240,240,240,.08);
	font-size:17px;
}
.oy-activity time{color:#b0b0b0;font-family:system-ui,sans-serif;font-size:12px;white-space:nowrap}
.oy-plan .oy-actions{margin-top:auto}
.oy-creator-page{
	margin:0 0 22px;
	border-radius:18px;
	overflow:hidden;
	background:var(--oy-secondary, #202020);
	color:#f0f0f0;
	font-family:var(--oy-font-body, "Segoe UI", system-ui, sans-serif);
	border:1px solid rgba(240,240,240,.1);
}
.oy-creator-page h1{
	font-family:var(--oy-font-heading, "Segoe UI", system-ui, sans-serif);
	color:var(--oy-primary, #ff00f0);
}
.oy-creator-page .oy-kicker{color:var(--oy-primary, #ff00f0)}
.oy-creator-page .oy-lede,.oy-creator-page p{color:inherit;opacity:.92}
.oy-creator-page .oy-btn{background:var(--oy-accent, #00e0f0);border-color:var(--oy-accent, #00e0f0);color:#042924}
.oy-cover{
	min-height:180px;
	background:
		linear-gradient(160deg, rgba(255,0,240,.35), rgba(0,224,240,.12) 40%, #141414);
	background-size:cover;
	background-position:center;
	position:relative;
}
.oy-logo{
	width:64px;height:64px;border-radius:14px;
	background-size:cover;background-position:center;
	box-shadow:0 8px 24px rgba(0,0,0,.35);
	border:1px solid rgba(240,240,240,.2);
}
.oy-cover .oy-logo{position:absolute;left:18px;bottom:-22px;background-color:#161616}
.oy-logo-inline{margin:8px 0}
.oy-creator-page .oy-creator-head{padding:28px 18px 18px;align-items:flex-start}
.oy-cover + .oy-creator-head{padding-top:36px}
.oy-socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.oy-social{
	display:inline-flex;
	align-items:center;
	border:1px solid rgba(240,240,240,.2);
	border-radius:999px;
	padding:6px 10px;
	color:inherit;
	text-decoration:none;
	font-family:system-ui,sans-serif;
	font-size:13px;
}
.oy-brand-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:12px 18px;
}
.oy-split-parties{display:grid;gap:8px;margin:8px 0 12px}
.oy-split-row{
	display:grid;
	grid-template-columns:minmax(110px, 0.9fr) minmax(120px, 1.2fr) 72px minmax(90px, 0.8fr) auto;
	gap:8px;
	align-items:center;
}
.oy-split-row input,.oy-split-row select{
	width:100%;
	min-width:0;
	background:rgba(240,240,240,.06);
	border:1px solid rgba(240,240,240,.16);
	border-radius:8px;
	color:inherit;
	padding:8px 10px;
	font:inherit;
}
.oy-brand-form h3,.oy-content-form h3{margin:18px 0 8px;font-weight:500;font-size:18px;color:#ff00f0}
.oy-content-form{grid-column:1 / -1}
.oy-subtitle{margin:6px 0 0;font-size:20px;color:#ff00f0;font-weight:500}
.oy-card-sub{display:block;margin-top:2px;color:#b0b0b0;font-size:12px;font-family:system-ui,sans-serif}
.oy-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.oy-tags span{
	border:1px solid rgba(240,240,240,.16);
	border-radius:999px;
	padding:4px 10px;
	font-family:system-ui,sans-serif;
	font-size:12px;
	color:#b0b0b0;
}
.oy-facts{display:grid;gap:8px;margin:14px 0;font-family:system-ui,sans-serif;font-size:14px}
.oy-facts > div{display:grid;grid-template-columns:110px 1fr;gap:8px}
.oy-facts dt{margin:0;color:#ff00f0;font-weight:500}
.oy-facts dd{margin:0;color:#b0b0b0}
.oy-checks{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.oy-check{
	display:inline-flex;
	align-items:center;
	gap:6px;
	border:1px solid rgba(240,240,240,.14);
	border-radius:999px;
	padding:6px 10px;
	font-family:system-ui,sans-serif;
	font-size:12px;
	cursor:pointer;
}
.oy-check.off{opacity:.45}
.oy-check input{margin:0}
.oy-checks.oy-stack{
	display:grid;
	gap:8px;
}
.oy-checks.oy-stack .oy-check{
	border-radius:10px;
	padding:8px 12px;
}
.oy-sponsor-mark{
	width:72px;
	height:72px;
	border-radius:16px;
	background:#161616 center/cover no-repeat;
	border:1px solid rgba(240,240,240,.14);
	margin-bottom:10px;
}
.oy-sponsor-card .oy-sponsor-mark{margin-bottom:12px}
.oy-ad-card{position:relative}
.oy-ad-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#00e0f0}
.oy-preroll{
	position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
	padding:18px;background:linear-gradient(180deg,rgba(32,32,32,.2),rgba(32,32,32,.86));
	border-radius:16px;
}
.oy-preroll h2{margin:0 0 6px;font-size:22px}
.oy-player{position:relative}
.oy-sheet{
	position:fixed;
	inset:0;
	z-index:40;
	background:rgba(32,32,32,.72);
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:48px 16px 24px;
	overflow:auto;
}
.oy-sheet-card{
	width:min(640px, 100%);
	background:#10121c;
	border:1px solid rgba(240,240,240,.16);
	border-radius:16px;
	padding:22px 22px 18px;
	box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.oy-sheet-card h2{margin:0 0 8px;font-size:26px}
.oy-sheet-card h3{margin:16px 0 8px;font-weight:500;font-size:18px;color:#ff00f0}
.oy-sheet-card .oy-checks{margin:10px 0 12px}
.oy-embed-mode .oy-top{display:none}
.oy-embed-mode #oy_main{padding:0}
.oy-embed-mode .oy-player{min-height:100dvh}
body.oy-embed-on .ap-top,
body.oy-embed-on .ph-top,
body.ap-kind-observableyou:has(#oy_app.oy-embed-mode) .ap-top,
body.ap-kind-observableyou:has(#oy_app.oy-embed-mode) .ph-top{display:none}
.oy-still{min-height:220px;border-radius:12px}
.oy-brand-preview{margin-bottom:16px}
.oy-brand-preview .oy-creator-page{pointer-events:none}
.oy-creator-chip{display:inline-flex;align-items:center;gap:8px}
.oy-chip-photo{
	width:22px;height:22px;border-radius:50%;
	background-size:cover;background-position:center;
	display:inline-block;
}
.oy-theme-light,.oy-theme-light .oy-lede,.oy-theme-light p,.oy-theme-light .oy-meta{color:#1a1408}
.oy-theme-light .oy-kicker{color:#1a4d4a}
.oy-theme-light .oy-social{border-color:rgba(26,20,8,.2);color:#1a1408}
.oy-theme-light .oy-btn-ghost{color:#1a1408;border-color:rgba(26,20,8,.25)}
@media (max-width: 1100px){
	.oy-plans{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 900px){
	.oy-backoffice{grid-template-columns:1fr}
	.oy-bo-side{position:static}
	.oy-studio-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
	.oy-studio-nav button{width:auto;border-radius:999px}
}
@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}
	.oy-hero-banner{padding:20px 16px}
	.oy-hero-art{min-height:180px}
	.oy-plans{grid-template-columns:1fr}
	.oy-kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.oy-kpi-value{font-size:22px}
	.oy-activity li{flex-direction:column;gap:4px}
	.oy-brand-grid{grid-template-columns:1fr}
	.oy-split-row{grid-template-columns:1fr 1fr}
	.oy-content-form{grid-column:auto}
	.oy-facts > div{grid-template-columns:1fr}
	.oy-live-layout{grid-template-columns:1fr}
	.oy-chat{min-height:220px}
	.oy-audience-layout{grid-template-columns:1fr}
	.oy-campaign-grid{grid-template-columns:1fr}
	.oy-campaign-layout{grid-template-columns:1fr}
	.oy-variant-grid{grid-template-columns:1fr}
	.oy-social-layout{grid-template-columns:1fr}
	.oy-merch .oy-field{margin:8px 0}
	.oy-variant-row{grid-template-columns:1fr 1fr}
	.oy-ticket-type-row,.oy-ticket-code-row,.oy-engage-item-row{grid-template-columns:1fr 1fr}
}
.oy-live-badge,.oy-poster span.oy-live-badge{
	background:#c23b3b;
	color:#fff;
	letter-spacing:.12em;
	font-weight:700;
}
.oy-live-dot{
	display:inline-block;
	width:8px;height:8px;border-radius:50%;
	background:#c23b3b;
	margin-right:6px;
	box-shadow:0 0 0 4px rgba(194,59,59,.25);
}
.oy-live-layout{
	display:grid;
	grid-template-columns:minmax(240px, 1.4fr) minmax(220px, .7fr);
	gap:18px;
	align-items:start;
}
.oy-chat{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:16px;
	padding:12px;
	min-height:280px;
	display:flex;
	flex-direction:column;
}
.oy-chat h2{margin:0 0 8px;font-size:18px;font-weight:500}
.oy-chat-log{
	flex:1;
	overflow:auto;
	max-height:320px;
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0 0 10px;
}
.oy-chat-log p{margin:0;font-size:14px;line-height:1.35}
.oy-chat-log strong{color:#ff00f0;font-weight:500;margin-right:6px}
.oy-chat-form{display:flex;gap:8px}
.oy-chat-form input{flex:1}
.oy-host-panel .oy-player{margin:8px 0 12px}
.oy-live-count{font-family:system-ui,sans-serif;font-size:13px;color:#00e0f0}
.oy-audience-layout{
	display:grid;
	grid-template-columns:minmax(240px, .9fr) minmax(260px, 1.1fr);
	gap:18px;
	align-items:start;
}
.oy-seg-nav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.oy-fan-list{max-height:560px;overflow:auto}
.oy-fan-row button[data-oy-act="edit-fan"]{text-align:left}
.oy-hist{list-style:none;margin:0 0 12px;padding:0;font-family:system-ui,sans-serif;font-size:13px}
.oy-hist li{padding:6px 0;border-bottom:1px solid rgba(240,240,240,.08);color:#b0b0b0}
#oy_fan_history h3{margin:14px 0 6px;font-size:16px;font-weight:500;color:#ff00f0}
.oy-campaign-grid{
	display:grid;
	grid-template-columns:minmax(240px, 1fr) minmax(260px, 1.1fr);
	gap:18px;
	margin-top:18px;
	align-items:start;
}
.oy-saved-chip{display:inline-flex;align-items:center;gap:2px}
.oy-saved-chip .oy-btn-ghost{padding:4px 8px;min-width:0}
.oy-campaign-layout{
	display:grid;
	grid-template-columns:minmax(280px, 1.3fr) minmax(240px, .8fr);
	gap:18px;
	align-items:start;
}
.oy-variant-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:12px;
	margin:10px 0 16px;
}
.oy-variant-card{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:16px;
	padding:12px;
}
.oy-variant-card h3{margin:0 0 8px;font-size:16px;font-weight:500;color:#ff00f0}
.oy-inbox{margin:8px 0 18px}
.oy-inbox h2{margin:0 0 10px;font-weight:500}
.oy-inbox-card{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:16px;
	padding:12px 14px;
	margin:0 0 10px;
}
.oy-inbox-card p{margin:8px 0;white-space:pre-wrap}
.oy-social-layout{
	display:grid;
	grid-template-columns:minmax(280px, 1.3fr) minmax(240px, .8fr);
	gap:18px;
	align-items:start;
}
.oy-social-side{display:flex;flex-direction:column;gap:18px}
.oy-ticket-type-row,.oy-ticket-code-row,.oy-engage-item-row{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)) auto;
	gap:8px;
	margin:0 0 8px;
	align-items:center;
}
.oy-ticket-type-row input,.oy-ticket-type-row select,.oy-ticket-code-row input,.oy-ticket-code-row select,.oy-engage-item-row input{
	background:#161616;
	color:#f0f0f0;
	border:1px solid rgba(240,240,240,.16);
	border-radius:12px;
	padding:10px 12px;
	min-width:0;
}
.oy-tier-card{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:16px;
	padding:16px 18px;
	margin:0 0 12px;
}
.oy-wallet-break .oy-film-mini{align-items:flex-start}
.oy-tier-card h2{margin:4px 0 8px;font-weight:600}
.oy-poll-choice{display:block;width:100%;text-align:left;margin:0 0 8px;position:relative;overflow:hidden}
.oy-poll-bar{display:block;height:4px;background:rgba(255,0,240,.35);margin-top:6px;border-radius:4px}
.oy-poll-bar > span{display:block;height:4px;background:#ff00f0;border-radius:4px}
.oy-aff-card .oy-qr{margin:12px 0}
.oy-qr{
	width:148px;
	height:148px;
	background:#f0f0f0;
	border-radius:12px;
	padding:8px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.oy-qr img,.oy-qr canvas{width:132px;height:132px}
.oy-qr-lg{width:200px;height:200px;margin:0 auto}
.oy-qr-lg img,.oy-qr-lg canvas{width:184px;height:184px}
.oy-cal-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
	margin:0 0 10px;
}
.oy-cal{
	display:grid;
	grid-template-columns:repeat(7, minmax(0, 1fr));
	gap:4px;
}
.oy-cal-name{
	font-family:system-ui,sans-serif;
	font-size:11px;
	letter-spacing:.08em;
	text-align:center;
	color:#b0b0b0;
}
.oy-cal-empty{min-height:52px}
.oy-cal-day{
	min-height:52px;
	padding:6px 4px;
	border:1px solid rgba(240,240,240,.1);
	background:rgba(16,19,28,.7);
	color:#f0f0f0;
	border-radius:10px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:2px;
}
.oy-cal-day.has{border-color:rgba(255,0,240,.45)}
.oy-cal-day em{font-style:normal;font-size:11px;color:#00e0f0}
.oy-cal-dots{display:flex;gap:3px}
.oy-cal-dot{width:6px;height:6px;border-radius:50%;background:#ff00f0}
.oy-cal-dot.scheduled{background:#00e0f0}
.oy-cal-dot.published{background:#f0f0f0}
.oy-cal-dot.draft{background:#b0b0b0}
.oy-social-feed{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:12px;
}
.oy-social-card{
	background:rgba(16,19,28,.92);
	border:1px solid rgba(240,240,240,.1);
	border-radius:16px;
	padding:12px;
	text-align:left;
	color:inherit;
}
.oy-social-card p{margin:8px 0;white-space:pre-wrap}
@media (min-width: 1100px){
	body.ap-kind-observableyou .ap-top{
		position:absolute;
		top:0;
		right:0;
		left:auto;
		width:auto;
		background:transparent;
		border:0;
		z-index:12;
		padding:12px 16px 0 0;
		gap:8px;
		pointer-events:none;
	}
	body.ap-kind-observableyou .ap-actions,
	body.ap-kind-observableyou .ap-btn{
		pointer-events:auto;
	}
	body.ap-kind-observableyou .ap-brand,
	body.ap-kind-observableyou #ap_hub_back,
	body.ap-kind-observableyou #ap_desk_shortcut,
	body.ap-kind-observableyou #ap_install_app{display:none!important}
	body.ap-kind-observableyou #ap_install_app span,
	body.ap-kind-observableyou #ap_sign_in{white-space:nowrap}
	body.ap-kind-observableyou .ap-actions{display:flex;gap:8px}
	body.ap-kind-observableyou .ap-btn{
		padding:7px 12px;
		font-size:12px;
	}
	body.ap-kind-observableyou #ap_settings_btn.ap-gear{
		position:static;
		transform:none;
		width:40px;
		min-width:40px;
	}
	.oy-top{
		flex-wrap:nowrap;
		gap:16px 20px;
		padding:16px 36px 12px;
		padding-right:180px;
		background:rgba(32,32,32,.88);
		border-bottom:1px solid rgba(176,176,176,.12);
	}
	.oy-logo-mark{height:42px}
	.oy-brand{font-size:24px;flex:0 0 auto}
	.oy-nav{
		flex:1 1 auto;
		flex-wrap:nowrap;
		min-width:0;
		gap:8px;
		overflow-x:auto;
		scrollbar-width:none;
	}
	.oy-nav::-webkit-scrollbar{display:none}
	.oy-nav > button{white-space:nowrap;flex:0 0 auto}
	.oy-nav-more{
		display:block;
		position:relative;
		flex:0 0 auto;
	}
	.oy-more-btn{
		display:inline-flex;
		align-items:center;
		white-space:nowrap;
	}
	.oy-nav-more.has-on .oy-more-btn,
	.oy-nav-more.open .oy-more-btn{
		border-color:#00e0f0;
		color:#d6fbff;
	}
	.oy-nav-extra{
		display:none;
		position:absolute;
		top:calc(100% + 8px);
		left:0;
		min-width:220px;
		padding:10px;
		flex-direction:column;
		gap:6px;
		background:#161616;
		border:1px solid rgba(240,240,240,.14);
		border-radius:16px;
		box-shadow:0 18px 40px rgba(0,0,0,.45);
		z-index:8;
	}
	.oy-nav-more.open .oy-nav-extra{display:flex}
	.oy-nav-extra button{
		width:100%;
		text-align:left;
		border-radius:10px;
	}
	.oy-search{margin-left:0;flex:0 0 auto}
	.oy-search input{width:260px}
	.oy-view-channel{margin-left:auto;white-space:nowrap}
	.oy-mode-studio .oy-top{padding-right:180px}
	#oy_toast{margin:8px auto 0;max-width:1440px;width:calc(100% - 72px)}
	#oy_main{padding:18px 36px 72px}
	.oy-hero-banner{
		padding:48px 52px 44px;
		border-radius:28px;
		min-height:280px;
		display:flex;
		align-items:flex-end;
	}
	.oy-hero-has-art{
		min-height:460px;
		border-radius:28px;
		display:grid;
		grid-template-columns:1fr;
		align-items:end;
	}
	.oy-hero-has-art .oy-hero-art{
		position:absolute;
		inset:0;
		width:100%;
		height:100%;
		min-height:0;
		aspect-ratio:auto;
		border-radius:0;
	}
	.oy-hero-art::after{
		background:
			linear-gradient(90deg, rgba(32,32,32,.88) 0%, rgba(32,32,32,.42) 52%, rgba(32,32,32,.12) 100%),
			linear-gradient(180deg, transparent 35%, rgba(32,32,32,.55) 100%);
	}
	.oy-hero-has-art .oy-hero-copy{
		position:relative;
		z-index:1;
		padding:48px 52px 44px;
		max-width:40rem;
	}
	.oy-hero-copy h1{font-size:clamp(44px, 4.6vw, 72px)}
	.oy-lede{font-size:19px;max-width:38rem}
	.oy-row{margin:10px 0 28px}
	.oy-row h2{font-size:26px;margin:0 0 14px}
	.oy-card{flex:0 0 196px}
	.oy-rail{gap:16px}
	.oy-stage{
		grid-template-columns:minmax(640px, 1.65fr) minmax(280px, .7fr);
		gap:28px;
		align-items:start;
	}
	.oy-player video,.oy-player iframe{height:min(52vw, 640px)}
	.oy-player{border-radius:22px;min-height:320px}
	.oy-backoffice{
		grid-template-columns:248px minmax(0, 1fr);
		gap:22px 28px;
	}
	.oy-bo-side{
		top:88px;
		background:rgba(16,19,28,.78);
		border:1px solid rgba(240,240,240,.1);
		border-radius:18px;
		padding:12px 10px;
		max-height:calc(100dvh - 110px);
		overflow:auto;
		scrollbar-width:thin;
	}
	.oy-studio-nav button{padding:9px 12px;border-radius:12px}
	.oy-studio-nav button.on{box-shadow:0 0 0 1px rgba(255,0,240,.25)}
	.oy-kpi-grid{grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));gap:14px}
	.oy-kpi{padding:16px 18px;border-radius:18px}
	.oy-kpi-value{font-size:30px}
	.oy-create-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:14px}
	.oy-grid{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));gap:18px}
	.oy-merch{border-radius:18px}
	.oy-panel{border-radius:18px;padding:18px}
	.oy-live-layout,.oy-audience-layout,.oy-campaign-grid,.oy-campaign-layout,.oy-social-layout{
		gap:22px;
	}
	.oy-cover{min-height:240px}
}
@media (min-width: 801px) and (max-width: 1099px){
	.oy-top{flex-wrap:nowrap;padding:14px 18px 10px}
	.oy-nav{
		flex:1 1 auto;
		flex-wrap:nowrap;
		overflow-x:auto;
		min-width:0;
		scrollbar-width:none;
	}
	.oy-nav::-webkit-scrollbar{display:none}
	.oy-nav button{white-space:nowrap;flex:0 0 auto}
	.oy-search{flex:0 0 auto}
	.oy-hero-has-art{min-height:320px}
}
@media (min-width: 1100px) and (max-width: 1279px){
	.oy-brand span{display:none}
	.oy-search input{width:180px}
}
@media (min-width: 1440px){
	#oy_main{max-width:1600px;padding-left:48px;padding-right:48px}
	.oy-top{padding-left:48px}
	#oy_toast{max-width:1600px;width:calc(100% - 96px)}
	.oy-hero-has-art{min-height:520px}
	.oy-card{flex:0 0 212px}
}
.oy-nav button.oy-nav-hide{display:none!important}
.oy-onboard{margin:0 0 22px}
.oy-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.oy-step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid rgba(240,240,240,.12);border-radius:16px;background:rgba(240,240,240,.03)}
.oy-step.done{border-color:rgba(0,224,240,.35)}
.oy-step.open{border-color:#ff00f0;box-shadow:0 0 0 1px rgba(255,0,240,.35)}
.oy-step-n{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#161616;border:1px solid rgba(240,240,240,.2);font-weight:700;font-size:13px}
.oy-step.done .oy-step-n{background:#00e0f0;color:#052026;border-color:#00e0f0}
.oy-step p{margin:.2rem 0 0;color:#b0b0b0}
.oy-gtm-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.oy-csv{min-height:140px;width:100%;font:inherit}