:root {
	--on-bg: var(--drumix-color-background);
	--on-panel: color-mix(in srgb, var(--drumix-color-surface) 92%, transparent);
	--on-ink: var(--drumix-color-text);
	--on-sub: var(--drumix-color-muted);
	--on-line: var(--drumix-color-border);
	--on-accent: var(--drumix-color-primary);
	--on-accent-2: var(--drumix-color-primary-hover);
	--on-shadow: var(--drumix-shadow-raised);
	color-scheme: light;
}
html.pb-public-dark {
	--on-bg: var(--drumix-color-background);
	--on-panel: color-mix(in srgb, var(--drumix-color-surface) 92%, transparent);
	--on-ink: var(--drumix-color-text);
	--on-sub: var(--drumix-color-muted);
	--on-line: var(--drumix-color-border);
	--on-accent: var(--drumix-color-primary);
	--on-accent-2: var(--drumix-color-primary-hover);
	--on-shadow: var(--drumix-shadow-raised);
	color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100%; margin: 0; }
body {
	min-height: 100dvh;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--on-accent) 16%, transparent), transparent 32%),
		radial-gradient(circle at 88% 84%, color-mix(in srgb, var(--on-accent-2) 14%, transparent), transparent 34%),
		var(--on-bg);
	color: var(--on-ink);
	font: 400 16px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
}
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.onboarding-noscript { margin: 18px; padding: 16px; border: 1px solid var(--on-line); border-radius: 14px; background: var(--on-panel); }
.onboarding-noscript a { color: var(--on-accent-2); font-weight: 750; }
.onboarding-top {
	min-height: 72px;
	padding: 12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.onboarding-logo { width: 142px; height: 38px; display: flex; align-items: center; }
.onboarding-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
html.pb-public-dark .onboarding-logo img { filter: invert(1) hue-rotate(180deg); }
.onboarding-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.onboarding-skip,
.onboarding-back,
.onboarding-next {
	min-height: 46px;
	border-radius: 14px;
	font-weight: 760;
	cursor: pointer;
	transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.onboarding-skip,
.onboarding-back {
	padding: 0 18px;
	border: 1px solid var(--on-line);
	background: var(--on-panel);
	color: var(--on-ink);
}
.onboarding-skip:hover,
.onboarding-back:hover { background: color-mix(in srgb, var(--on-panel) 86%, var(--on-accent) 14%); }
.onboarding-next {
	min-width: 190px;
	padding: 0 24px;
	border: 0;
	background: linear-gradient(135deg, var(--on-accent), var(--on-accent-2));
	color: #fff;
	box-shadow: 0 12px 28px rgba(72,74,211,.26);
}
.onboarding-next:hover { transform: translateY(-1px); }
.onboarding-next:disabled,
.onboarding-skip:disabled { opacity: .58; cursor: wait; transform: none; }
.onboarding-page {
	height: calc(100dvh - 72px);
	max-width: 1500px;
	margin: 0 auto;
	padding: 14px clamp(24px, 4vw, 62px) max(28px, env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
	align-items: center;
	gap: clamp(34px, 5vw, 80px);
}
.onboarding-visual {
	min-width: 0;
	max-height: min(720px, calc(100dvh - 130px));
	padding: 10px;
	border: 1px solid var(--on-line);
	border-radius: 28px;
	background: var(--on-panel);
	box-shadow: var(--on-shadow);
	backdrop-filter: blur(24px) saturate(140%);
	overflow: hidden;
}
.onboarding-browser-bar {
	height: 38px;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 0 8px;
	color: var(--on-sub);
	font-size: 10px;
	font-weight: 820;
	letter-spacing: .16em;
}
.onboarding-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(128,128,136,.42); }
.onboarding-browser-bar i:nth-child(1) { background: #ff6b63; }
.onboarding-browser-bar i:nth-child(2) { background: #ffc64c; }
.onboarding-browser-bar i:nth-child(3) { background: #35c95a; }
.onboarding-browser-bar span { margin-left: auto; }
.onboarding-shot-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	border-radius: 19px;
	background: #121318;
	overflow: hidden;
}
.onboarding-shot-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #111217;
	opacity: 1;
	transition: opacity .22s ease;
}
.onboarding-shot-wrap.is-loading img { opacity: .12; }
.onboarding-image-loader {
	position: absolute;
	width: 30px;
	height: 30px;
	border: 3px solid rgba(255,255,255,.22);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: onboarding-spin .8s linear infinite;
}
.onboarding-shot-wrap.is-loading .onboarding-image-loader { opacity: 1; }
.onboarding-caption {
	min-height: 22px;
	margin: 10px 8px 2px;
	overflow: hidden;
	color: var(--on-sub);
	font-size: 12px;
	font-weight: 650;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.onboarding-copy { min-width: 0; max-width: 520px; }
.onboarding-step-label {
	margin: 0 0 16px;
	color: var(--on-accent-2);
	font-size: 12px;
	font-weight: 820;
	letter-spacing: .11em;
	text-transform: uppercase;
}
.onboarding-copy h1 {
	margin: 0;
	font-size: clamp(38px, 4.2vw, 66px);
	font-weight: 820;
	line-height: .99;
	letter-spacing: -.052em;
	text-wrap: balance;
}
.onboarding-copy h1:focus { outline: none; }
.onboarding-text {
	max-width: 480px;
	min-height: 78px;
	margin: 22px 0 0;
	color: var(--on-sub);
	font-size: clamp(17px, 1.55vw, 21px);
	line-height: 1.42;
	text-wrap: balance;
}
.onboarding-progress {
	min-height: 20px;
	margin: 28px 0 24px;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	list-style: none;
}
.onboarding-progress li {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--on-sub) 35%, transparent);
	transition: width .2s ease, background .2s ease;
}
.onboarding-progress li[aria-current="step"] { width: 30px; background: linear-gradient(90deg, var(--on-accent), var(--on-accent-2)); }
.onboarding-controls { display: flex; align-items: center; gap: 10px; }
.onboarding-back[hidden] { display: none; }
.onboarding-status { min-height: 22px; margin: 12px 0 0; color: #d34242; font-size: 13px; font-weight: 650; }
.onboarding-skip:focus-visible,
.onboarding-back:focus-visible,
.onboarding-next:focus-visible,
.pbPublicThemeToggle:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--on-accent-2) 68%, white);
	outline-offset: 3px;
}
@keyframes onboarding-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
	body { overflow: auto; }
	.onboarding-top {
		min-height: 62px;
		padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
	}
	.onboarding-logo { width: 112px; height: 32px; }
	.onboarding-actions { gap: 7px; }
	.onboarding-skip { min-height: 44px; padding: 0 11px; border: 0; background: transparent; font-size: 13px; }
	.onboarding-page {
		height: auto;
		min-height: calc(100dvh - 62px);
		padding: 8px max(12px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: start;
		gap: 18px;
	}
	.onboarding-visual { width: 100%; max-height: none; padding: 6px; border-radius: 20px; }
	.onboarding-browser-bar { height: 24px; font-size: 8px; }
	.onboarding-browser-bar i { width: 6px; height: 6px; }
	.onboarding-shot-wrap { max-height: 31vh; min-height: 190px; border-radius: 14px; }
	.onboarding-caption { min-height: 18px; margin: 6px 6px 1px; font-size: 10px; }
	.onboarding-copy { width: 100%; max-width: none; }
	.onboarding-step-label { margin-bottom: 8px; font-size: 10px; }
	.onboarding-copy h1 { font-size: clamp(31px, 9.4vw, 46px); line-height: 1.02; }
	.onboarding-text { min-height: 50px; margin-top: 10px; font-size: 16px; line-height: 1.36; }
	.onboarding-progress { margin: 14px 0; }
	.onboarding-controls { gap: 8px; }
	.onboarding-back { flex: 0 0 auto; min-height: 50px; padding: 0 14px; }
	.onboarding-next { flex: 1 1 auto; min-width: 0; min-height: 50px; padding: 0 14px; }
	.onboarding-status { margin-top: 7px; }
}

@media (max-width: 420px) and (max-height: 740px) {
	.onboarding-shot-wrap { min-height: 170px; max-height: 27vh; }
	.onboarding-copy h1 { font-size: 29px; }
	.onboarding-text { font-size: 15px; }
	.onboarding-progress { margin: 10px 0; }
}

@media (max-height: 620px) and (orientation: landscape) {
	body { overflow: auto; }
	.onboarding-top { min-height: 54px; }
	.onboarding-page {
		min-height: calc(100dvh - 54px);
		height: auto;
		grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
		grid-template-rows: auto;
		gap: 24px;
		padding-top: 6px;
	}
	.onboarding-shot-wrap { max-height: 68vh; }
	.onboarding-copy h1 { font-size: 34px; }
	.onboarding-text { min-height: 44px; margin-top: 10px; font-size: 15px; }
	.onboarding-progress { margin: 12px 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}