/* My Reflections interactive phone demo — dark app UI scoped under .mr-demo */

.mr-demo {
	--mr-demo-page: #14121a;
	--mr-demo-chrome: #1b1a24;
	--mr-demo-surface: #1c1a24;
	--mr-demo-border: #2e2a38;
	--mr-demo-border-light: #26222e;
	--mr-demo-ink: #f4f2f7;
	--mr-demo-muted: #9a93a8;
	--mr-demo-soft: #a8a1b5;
	--mr-demo-body: #d4cfdc;
	--mr-demo-purple: #a78bcc;
	--mr-demo-purple-dark: #c4b0de;
	--mr-demo-purple-tint: #2a2438;
	--mr-demo-positive: #5bb892;
	--mr-demo-positive-dark: #7dcea8;
	--mr-demo-positive-bg: #1a2a24;
	--mr-demo-negative: #e07a6e;
	--mr-demo-negative-dark: #f09a90;
	--mr-demo-negative-bg: #2a1e1c;
	--mr-demo-neutral: #4a4555;
	--mr-demo-scrim: rgba(0, 0, 0, 0.55);
	--mr-demo-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--mr-demo-sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
	--mr-demo-week-empty: #3a3544;
	--mr-demo-search-bg: #f4f2f7;

	width: 100%;
	max-width: 100%;
	font-family: var(--mr-demo-sans);
	color: var(--mr-demo-ink);
	-webkit-font-smoothing: antialiased;
}

.mr-demo__noscript {
	margin: 0;
	padding: 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mr-text-muted, #6e6862);
}

.mr-demo__noscript a {
	color: var(--mr-accent, #6b4a9e);
}

.mr-demo__device {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.mr-demo__bezel {
	position: relative;
	border-radius: 36px;
	padding: 10px;
	background: linear-gradient(160deg, #3a3548 0%, #1a1820 40%, #0e0d12 100%);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		0 20px 40px rgba(25, 23, 32, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.mr-demo__screen {
	position: relative;
	height: min(640px, 78vh);
	border-radius: 28px;
	overflow: hidden;
	background: var(--mr-demo-page);
	isolation: isolate;
}

.mr-demo__island {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 26px;
	border-radius: 20px;
	background: #0a090e;
	z-index: 40;
	pointer-events: none;
}

.mr-demo__app {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	background: var(--mr-demo-page);
}

.mr-demo__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 22px 0;
	height: 44px;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 500;
	color: var(--mr-demo-ink);
	position: relative;
	z-index: 30;
	background: var(--mr-demo-chrome);
}

.mr-demo__status-icons {
	display: flex;
	align-items: center;
	gap: 5px;
}

.mr-demo__status-icons svg {
	display: block;
}

.mr-demo__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 16px 12px;
	flex-shrink: 0;
	background: var(--mr-demo-chrome);
}

.mr-demo__brand {
	display: flex;
	align-items: center;
	gap: 9px;
}

.mr-demo__logo {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #b5a0d4;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mr-demo-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	line-height: 1;
	padding-bottom: 1px;
	flex-shrink: 0;
}

.mr-demo__brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
	gap: 2px;
}

.mr-demo__brand-my {
	font-size: 7.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(244, 242, 247, 0.55);
}

.mr-demo__brand-name {
	font-family: var(--mr-demo-serif);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--mr-demo-ink);
}

.mr-demo__avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #3d3550;
	border: 1.5px solid #5a4f6e;
	color: #e8e2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mr-demo-sans);
	font-style: normal;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	text-decoration: none;
	cursor: pointer;
}

.mr-demo__avatar:hover,
.mr-demo__avatar:focus-visible {
	border-color: var(--mr-demo-purple);
	color: #e8e2f2;
	outline: none;
}

.mr-demo__avatar:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 2px;
}

.mr-demo__scroll {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px 16px 96px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.mr-demo__scroll::-webkit-scrollbar {
	display: none;
}

.mr-demo__date {
	font-family: var(--mr-demo-serif);
	font-size: 26px;
	line-height: 1.15;
	font-weight: 400;
	color: var(--mr-demo-ink);
	margin: 4px 0 0;
}

.mr-demo__subhead {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: var(--mr-demo-muted);
}

.mr-demo__card {
	margin-top: 12px;
	background: var(--mr-demo-surface);
	border: 1px solid var(--mr-demo-border);
	border-radius: 16px;
	padding: 16px 16px 14px;
}

.mr-demo__streak-num {
	font-family: var(--mr-demo-serif);
	font-size: 32px;
	line-height: 1;
	color: var(--mr-demo-purple);
}

.mr-demo__streak-label {
	font-family: var(--mr-demo-serif);
	font-size: 18px;
	color: var(--mr-demo-purple);
	margin-left: 6px;
}

.mr-demo__week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-top: 14px;
}

.mr-demo__week-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.mr-demo__week-bar {
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--mr-demo-week-empty);
}

.mr-demo__week-bar.is-done {
	background: var(--mr-demo-purple);
}

.mr-demo__week-label {
	font-size: 10px;
	color: var(--mr-demo-muted);
	letter-spacing: 0.02em;
}

.mr-demo__label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--mr-demo-muted);
}

.mr-demo__avg-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.mr-demo__avg-row {
	display: flex;
	align-items: baseline;
	gap: 7px;
	flex-shrink: 0;
}

.mr-demo__avg-value {
	font-family: var(--mr-demo-serif);
	font-size: 28px;
	line-height: 1;
	color: var(--mr-demo-ink);
}

.mr-demo__avg-delta {
	font-size: 13px;
	font-weight: 500;
	color: var(--mr-demo-positive);
}

.mr-demo__avg-delta.is-down {
	color: var(--mr-demo-negative);
}

.mr-demo__spark {
	margin-top: 12px;
	width: 100%;
	height: 44px;
	display: block;
}

.mr-demo__spark-meta {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 10px;
	color: var(--mr-demo-muted);
	letter-spacing: 0.04em;
}

.mr-demo__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mr-demo__link {
	font-size: 13px;
	color: var(--mr-demo-purple);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: default;
	font-family: inherit;
}

.mr-demo__goal {
	margin-top: 12px;
}

.mr-demo__goal-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 14px;
	color: var(--mr-demo-ink);
}

.mr-demo__goal-count {
	color: var(--mr-demo-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.mr-demo__progress {
	margin-top: 8px;
	height: 5px;
	border-radius: 3px;
	background: var(--mr-demo-border);
	overflow: hidden;
}

.mr-demo__progress-fill {
	height: 100%;
	background: var(--mr-demo-purple);
	border-radius: 3px;
	width: 0;
}

.mr-demo__recent {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mr-demo__recent-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mr-demo__thumb {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--mr-demo-purple-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	color: var(--mr-demo-purple);
}

.mr-demo__thumb--photo {
	background: linear-gradient(135deg, #3d3558, #2a2438);
}

.mr-demo__recent-body {
	flex: 1;
	min-width: 0;
}

.mr-demo__recent-title {
	font-size: 13.5px;
	color: var(--mr-demo-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mr-demo__recent-meta {
	margin-top: 2px;
	font-size: 11.5px;
	color: var(--mr-demo-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mr-demo__recent-score {
	font-family: var(--mr-demo-serif);
	font-size: 16px;
	line-height: 1;
	color: var(--mr-demo-ink);
	flex-shrink: 0;
}

.mr-demo__tabbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 78px;
	padding: 8px 10px 22px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr 48px 1fr 1fr;
	align-items: start;
	gap: 0;
	background: var(--mr-demo-surface);
	border-top: 1px solid var(--mr-demo-border);
	z-index: 20;
	pointer-events: none;
}

.mr-demo__tabbar > * {
	pointer-events: auto;
}

.mr-demo__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: none;
	border: 0;
	padding: 2px 4px 0;
	color: var(--mr-demo-muted);
	font-family: inherit;
	font-size: 9.5px;
	line-height: 1;
	cursor: default;
}

.mr-demo__tab.is-active {
	color: var(--mr-demo-purple);
	font-weight: 500;
}

.mr-demo__tab svg {
	display: block;
	stroke-width: 1.55;
}

.mr-demo__fab {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: var(--mr-demo-purple);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 2px auto 0;
	box-shadow: none;
	transform: none;
	position: relative;
	z-index: 25;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mr-demo__fab svg {
	stroke-width: 2.25;
}

.mr-demo__fab:hover,
.mr-demo__fab:focus-visible {
	transform: scale(1.05);
	outline: none;
	box-shadow: 0 4px 14px rgba(167, 139, 204, 0.4);
}

.mr-demo__fab:focus-visible {
	outline: 2px solid var(--mr-demo-purple-dark);
	outline-offset: 3px;
}

@keyframes mr-demo-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(167, 139, 204, 0.35);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(167, 139, 204, 0);
	}
}

.mr-demo__fab.is-pulse {
	animation: mr-demo-pulse 2s ease-in-out infinite;
}

.mr-demo__hotspot {
	position: absolute;
	left: 50%;
	bottom: 78px;
	transform: translateX(-50%);
	z-index: 30;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	animation: mr-demo-hotspot-bob 2.4s ease-in-out infinite;
}

.mr-demo__hotspot-label {
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--mr-demo-ink);
	color: #191720;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.mr-demo__hotspot-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mr-demo-ink);
	position: relative;
}

.mr-demo__hotspot-dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 2px;
	height: 8px;
	background: var(--mr-demo-ink);
	transform: translateX(-50%);
	border-radius: 1px;
}

@keyframes mr-demo-hotspot-bob {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(-4px);
	}
}

.mr-demo__scrim {
	position: absolute;
	inset: 0;
	background: var(--mr-demo-scrim);
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}

.mr-demo__scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mr-demo__sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 88%;
	background: var(--mr-demo-surface);
	border-radius: 22px 22px 0 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	transform: translateY(110%);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
}

.mr-demo__sheet.is-open {
	transform: translateY(0);
}

.mr-demo__sheet-handle {
	width: 38px;
	height: 4px;
	border-radius: 2px;
	background: #4a4555;
	margin: 10px auto 0;
	flex-shrink: 0;
}

.mr-demo__sheet-head {
	display: grid;
	grid-template-columns: 64px 1fr 64px;
	align-items: center;
	padding: 12px 16px 8px;
	flex-shrink: 0;
}

.mr-demo__sheet-title {
	margin: 0;
	text-align: center;
	font-family: var(--mr-demo-serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--mr-demo-ink);
}

.mr-demo__sheet-cancel {
	grid-column: 3;
	justify-self: end;
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--mr-demo-soft);
	cursor: pointer;
}

.mr-demo__sheet-cancel:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 2px;
}

.mr-demo__sheet-body {
	flex: 1;
	overflow-y: auto;
	padding: 0 16px 28px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.mr-demo__search {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 13px;
	border-radius: 11px;
	background: var(--mr-demo-search-bg);
	margin-top: 8px;
}

.mr-demo__search svg {
	flex-shrink: 0;
	color: #a39cb0;
}

.mr-demo__search input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 14.5px;
	color: #191720;
	outline: none;
	min-width: 0;
	padding: 0;
}

.mr-demo__search input::placeholder {
	color: #a39cb0;
}

.mr-demo__section-label {
	margin: 18px 0 10px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--mr-demo-muted);
}

.mr-demo__type-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.mr-demo__type-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 78px;
	padding: 12px 6px;
	border-radius: 14px;
	border: 1px solid var(--mr-demo-border);
	background: var(--mr-demo-page);
	color: var(--mr-demo-ink);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.mr-demo__type-tile:hover:not(:disabled),
.mr-demo__type-tile:focus-visible {
	border-color: var(--mr-demo-purple);
	outline: none;
}

.mr-demo__type-tile:disabled,
.mr-demo__type-tile.is-locked {
	opacity: 0.45;
	cursor: not-allowed;
	color: var(--mr-demo-muted);
}

.mr-demo__type-lock {
	position: absolute;
	top: 6px;
	right: 6px;
	color: var(--mr-demo-muted);
}

.mr-demo__type-tile svg {
	display: block;
}

.mr-demo__type-row {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 4px;
}

.mr-demo__type-icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--mr-demo-purple-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mr-demo-purple);
	flex-shrink: 0;
}

.mr-demo__type-name {
	font-size: 15px;
	font-weight: 500;
	color: var(--mr-demo-ink);
	text-transform: capitalize;
}

.mr-demo__type-when {
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--mr-demo-muted);
}

.mr-demo__field-label {
	margin: 22px 0 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--mr-demo-ink);
}

.mr-demo__rating-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 8px;
}

.mr-demo__rating-value {
	font-family: var(--mr-demo-serif);
	font-size: 36px;
	line-height: 1;
	color: var(--mr-demo-ink);
}

.mr-demo__rating-meta {
	font-size: 13.5px;
	color: var(--mr-demo-muted);
}

.mr-demo__rating-chips {
	display: flex;
	gap: 5px;
	margin-top: 12px;
}

.mr-demo__rating-chip {
	flex: 1;
	height: 36px;
	border-radius: 8px;
	border: 1px solid var(--mr-demo-border);
	background: var(--mr-demo-page);
	color: var(--mr-demo-muted);
	font-family: var(--mr-demo-serif);
	font-size: 14px;
	cursor: pointer;
	padding: 0;
}

.mr-demo__rating-chip.is-active {
	background: var(--mr-demo-purple);
	border-color: var(--mr-demo-purple);
	color: #fff;
}

.mr-demo__rating-chip:focus-visible {
	outline: 2px solid var(--mr-demo-purple-dark);
	outline-offset: 2px;
}

.mr-demo__note {
	margin-top: 11px;
	width: 100%;
	min-height: 92px;
	resize: vertical;
	box-sizing: border-box;
	padding: 13px 15px;
	border-radius: 12px;
	border: 1px solid var(--mr-demo-border);
	background: var(--mr-demo-page);
	color: var(--mr-demo-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.7;
	outline: none;
}

.mr-demo__note:focus {
	border-color: var(--mr-demo-purple);
}

.mr-demo__note::placeholder {
	color: var(--mr-demo-muted);
}

.mr-demo__detail-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 13px;
	border: 1px solid var(--mr-demo-border);
	background: var(--mr-demo-page);
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.mr-demo__detail-row:hover,
.mr-demo__detail-row:focus-visible {
	border-color: var(--mr-demo-purple);
	outline: none;
}

.mr-demo__detail-row:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 2px;
}

.mr-demo__detail-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1;
}

.mr-demo__detail-title {
	font-size: 14px;
	font-weight: 500;
	color: var(--mr-demo-ink);
}

.mr-demo__detail-sub {
	font-size: 12px;
	color: var(--mr-demo-muted);
}

.mr-demo__detail-chevron {
	font-size: 18px;
	line-height: 1;
	color: var(--mr-demo-muted);
}

.mr-demo__extras-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px 4px;
	flex-shrink: 0;
}

.mr-demo__extras-back,
.mr-demo__extras-skip,
.mr-demo__extras-cancel {
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.mr-demo__extras-back {
	color: var(--mr-demo-soft);
}

.mr-demo__extras-skip {
	color: var(--mr-demo-purple);
	font-weight: 500;
}

.mr-demo__extras-cancel {
	display: block;
	width: 100%;
	margin-top: 14px;
	color: var(--mr-demo-soft);
	text-align: center;
}

.mr-demo__extras-back:focus-visible,
.mr-demo__extras-skip:focus-visible,
.mr-demo__extras-cancel:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 2px;
}

.mr-demo__extras-title {
	margin: 8px 0 0;
	font-family: var(--mr-demo-serif);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--mr-demo-ink);
}

.mr-demo__extras-help {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mr-demo-soft);
}

.mr-demo__hla-tabs {
	display: flex;
	gap: 6px;
	margin-top: 18px;
	padding: 4px;
	border-radius: 11px;
	background: var(--mr-demo-page);
}

.mr-demo__hla-tab {
	flex: 1;
	padding: 8px 4px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--mr-demo-muted);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	text-align: center;
}

.mr-demo__hla-tab.is-active {
	background: var(--mr-demo-surface);
	color: var(--mr-demo-ink);
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.mr-demo__hla-tab:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 1px;
}

.mr-demo__hla-input-row {
	display: flex;
	align-items: stretch;
	gap: 9px;
	margin-top: 16px;
}

.mr-demo__hla-input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--mr-demo-border);
	background: var(--mr-demo-page);
	color: var(--mr-demo-ink);
	font-family: inherit;
	font-size: 14px;
	outline: none;
}

.mr-demo__hla-input:focus {
	border-color: var(--mr-demo-purple);
}

.mr-demo__hla-input::placeholder {
	color: var(--mr-demo-muted);
}

.mr-demo__hla-add {
	width: 50px;
	flex-shrink: 0;
	border: 0;
	border-radius: 12px;
	background: var(--mr-demo-purple);
	color: #191720;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mr-demo__hla-add:hover,
.mr-demo__hla-add:focus-visible {
	filter: brightness(1.08);
	outline: none;
}

.mr-demo__hla-add:focus-visible {
	outline: 2px solid var(--mr-demo-purple-dark);
	outline-offset: 2px;
}

.mr-demo__hla-list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.mr-demo__hla-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--mr-demo-border-light);
}

.mr-demo__hla-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--mr-demo-purple);
	margin-top: 8px;
	flex-shrink: 0;
}

.mr-demo__hla-text {
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mr-demo-body);
}

.mr-demo__hla-remove {
	background: none;
	border: 0;
	padding: 0 4px;
	color: var(--mr-demo-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.mr-demo__hla-remove:hover,
.mr-demo__hla-remove:focus-visible {
	color: var(--mr-demo-negative);
	outline: none;
}

.mr-demo__hla-count {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--mr-demo-muted);
}

.mr-demo__skip-callout {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--mr-demo-border);
	background: var(--mr-demo-page);
}

.mr-demo__skip-icon {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--mr-demo-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 11px;
	font-style: italic;
	color: var(--mr-demo-muted);
	margin-top: 1px;
}

.mr-demo__skip-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mr-demo-body);
}

.mr-demo__primary {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 14px 0;
	border: 0;
	border-radius: 13px;
	background: var(--mr-demo-ink);
	color: #191720;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	text-align: center;
}

.mr-demo__primary:hover,
.mr-demo__primary:focus-visible {
	outline: none;
	filter: brightness(1.05);
}

.mr-demo__primary:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 2px;
}

.mr-demo__primary:disabled {
	background: var(--mr-demo-border);
	color: var(--mr-demo-muted);
	cursor: default;
	filter: none;
}

.mr-demo__saved {
	padding: 28px 8px 8px;
	text-align: left;
}

.mr-demo__check {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1.5px solid #4a3d66;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mr-demo-purple);
	font-size: 24px;
}

.mr-demo__saved-headline {
	margin: 22px 0 0;
	font-family: var(--mr-demo-serif);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--mr-demo-ink);
}

.mr-demo__saved-sub {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--mr-demo-soft);
}

.mr-demo__sentiment {
	margin-top: 24px;
	border: 1px solid var(--mr-demo-border);
	border-radius: 16px;
	padding: 18px 18px 16px;
	background: var(--mr-demo-page);
}

.mr-demo__sentiment-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.mr-demo__tone {
	margin: 0;
	font-family: var(--mr-demo-serif);
	font-size: 22px;
	line-height: 1.2;
	color: var(--mr-demo-ink);
}

.mr-demo__tone-meta {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--mr-demo-muted);
}

.mr-demo__mood {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0;
}

.mr-demo__mood.is-pos {
	background: var(--mr-demo-positive-bg);
	color: var(--mr-demo-positive);
}

.mr-demo__mood.is-neg {
	background: var(--mr-demo-negative-bg);
	color: var(--mr-demo-negative);
}

.mr-demo__mood.is-neu {
	background: var(--mr-demo-border-light);
	color: var(--mr-demo-muted);
}

.mr-demo__tone-bar {
	display: flex;
	gap: 2px;
	margin-top: 18px;
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
}

.mr-demo__tone-seg {
	border-radius: 3px;
	min-width: 0;
}

.mr-demo__tone-seg.is-pos {
	background: var(--mr-demo-positive);
}

.mr-demo__tone-seg.is-neu {
	background: var(--mr-demo-neutral);
}

.mr-demo__tone-seg.is-neg {
	background: var(--mr-demo-negative);
}

.mr-demo__tone-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
	font-size: 11.5px;
}

.mr-demo__tone-legend .pos {
	color: var(--mr-demo-positive-dark);
}

.mr-demo__tone-legend .neu {
	color: var(--mr-demo-soft);
}

.mr-demo__tone-legend .neg {
	color: var(--mr-demo-negative-dark);
}

.mr-demo__nudge {
	margin-top: 24px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--mr-demo-page);
	font-size: 13px;
	line-height: 1.55;
	color: var(--mr-demo-body);
}

.mr-demo__saved-actions {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.mr-demo__done {
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--mr-demo-soft);
	cursor: pointer;
	padding: 8px 16px;
}

.mr-demo__done:focus-visible {
	outline: 2px solid var(--mr-demo-purple);
	outline-offset: 2px;
}

.mr-demo__get-app {
	font-size: 13px;
	color: var(--mr-demo-purple);
	text-decoration: none;
}

.mr-demo__get-app:hover {
	text-decoration: underline;
}

.mr-demo__toast {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 96px;
	z-index: 80;
	padding: 12px 14px;
	border-radius: 12px;
	background: #2a2438;
	border: 1px solid var(--mr-demo-border);
	color: var(--mr-demo-ink);
	font-size: 13px;
	line-height: 1.45;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.mr-demo__toast.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.mr-demo__toast a {
	color: var(--mr-demo-purple);
	font-weight: 500;
	text-decoration: none;
	margin-left: 4px;
}

.mr-demo__toast a:hover {
	text-decoration: underline;
}

.mr-demo__panel {
	position: absolute;
	inset: 0;
	z-index: 55;
	background: var(--mr-demo-surface);
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.mr-demo__panel.is-open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.mr-demo__panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 52px 22px 28px;
}

@media (prefers-reduced-motion: reduce) {
	.mr-demo__fab.is-pulse,
	.mr-demo__hotspot {
		animation: none;
	}

	.mr-demo__sheet,
	.mr-demo__scrim,
	.mr-demo__panel,
	.mr-demo__toast {
		transition: none;
	}
}