.universe-home {
	--universe-ink: #f0f3fb;
	--universe-muted: #98a4bc;
	--universe-line: rgba(167, 187, 224, .16);
	--universe-nebula-spread: .6;
	color: var(--universe-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	width: min(100%, 1280px);
	margin-inline: auto;
	padding: clamp(12px, 2.6vw, 34px) clamp(12px, 3vw, 38px) 26px;
	box-sizing: border-box;
}
.universe-home *, .universe-home *::before, .universe-home *::after { box-sizing: border-box; }
.universe-scene {
	position: relative;
	isolation: isolate;
	min-height: clamp(480px, 57vw, 650px);
	overflow: hidden;
	border: 1px solid rgba(167, 187, 224, .095);
	border-radius: 28px;
	background:
		radial-gradient(ellipse calc(48% * var(--universe-nebula-spread)) calc(37% * var(--universe-nebula-spread)) at 50% 51%, rgba(70, 84, 133, .26), transparent 76%),
		radial-gradient(ellipse 28% 30% at 19% 27%, rgba(52, 116, 133, .13), transparent 78%),
		radial-gradient(ellipse 28% 31% at 81% 28%, rgba(101, 77, 143, .15), transparent 78%),
		radial-gradient(ellipse 31% 34% at 26% 76%, rgba(137, 76, 99, .12), transparent 78%),
		radial-gradient(ellipse 30% 31% at 77% 75%, rgba(135, 111, 62, .11), transparent 78%),
	linear-gradient(145deg, #0a0e1a 0%, #0c1120 53%, #090d18 100%);
	box-shadow: inset 0 0 80px rgba(1, 4, 12, .3);
}
.universe-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 43%, rgba(3, 6, 14, .38) 100%);
}
.universe-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.universe-heading {
	position: absolute;
	z-index: 2;
	top: 50%; left: 50%;
	width: min(40%, 370px);
	min-width: 245px;
	transform: translate(-50%, -52%);
	text-align: center;
	text-shadow: 0 3px 24px rgba(3, 7, 18, .9);
}
.universe-eyebrow, .universe-total, .universe-watched, .universe-status, .universe-title { margin: 0; }
.universe-eyebrow { color: #9eabc3; font-size: 10px; font-weight: 700; letter-spacing: .32em; }
.universe-title { margin-top: 12px; color: #f0f3fb; font-size: clamp(21px, 3vw, 31px); font-weight: 500; letter-spacing: .13em; line-height: 1.2; }
.universe-total { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-top: 15px; color: #b6c0d3; font-size: 10px; letter-spacing: .17em; }
.universe-total strong { color: #fff; font-size: clamp(27px, 4vw, 40px); font-weight: 400; letter-spacing: .015em; line-height: 1; font-variant-numeric: tabular-nums; }
.universe-watched { margin-top: 11px; color: #a5b6c5; font-size: 10px; letter-spacing: .18em; }
.universe-status { min-height: 17px; margin-top: 15px; color: #9ca9bf; font-size: 11px; line-height: 1.55; }
.universe-status[data-state="error"] { color: #e2a4a3; }
.universe-status[data-state="stale"] { color: #d3c497; }
.universe-format-orbits { position: absolute; z-index: 3; inset: 0; }
.universe-format-star {
	--format-accent: #b4bed0;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: clamp(110px, 13vw, 148px);
	height: clamp(110px, 13vw, 148px);
	padding: 13px;
	transform: translate(-50%, -50%);
	border: 1px solid color-mix(in srgb, var(--format-accent), transparent 70%);
	border-radius: 50%;
	background: radial-gradient(circle at 48% 42%, color-mix(in srgb, var(--format-accent), transparent 91%), rgba(9, 14, 26, .55) 67%, rgba(9, 14, 26, .25));
	box-shadow: 0 0 28px color-mix(in srgb, var(--format-accent), transparent 92%), inset 0 0 22px rgba(203, 218, 248, .035);
	color: var(--universe-ink);
	font: inherit;
	cursor: pointer;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
	-webkit-tap-highlight-color: transparent;
}
.universe-format-star::before, .universe-format-star::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 180%; height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--format-accent), transparent 74%), transparent);
	pointer-events: none;
}
.universe-format-star::after { transform: rotate(60deg); }
.universe-format-movie { --format-accent: #7dcbd7; left: 19%; top: 27%; }
.universe-format-anime { --format-accent: #b6a0e3; left: 81%; top: 27%; }
.universe-format-anime-movie { --format-accent: #e0a0ad; left: 23%; top: 75%; }
.universe-format-drama { --format-accent: #dfc48d; left: 77%; top: 75%; }
.universe-format-star:hover { transform: translate(-50%, -50%) scale(1.045); border-color: color-mix(in srgb, var(--format-accent), transparent 35%); box-shadow: 0 0 42px color-mix(in srgb, var(--format-accent), transparent 78%), inset 0 0 28px rgba(203, 218, 248, .07); }
.universe-format-star:focus-visible, .universe-footer-button:focus-visible, .universe-other-formats:focus-visible { outline: 2px solid color-mix(in srgb, var(--format-accent, #c4d2f1), white 20%); outline-offset: 4px; }
.universe-format-glint { color: var(--format-accent); font-size: 15px; line-height: 1; text-shadow: 0 0 14px color-mix(in srgb, var(--format-accent), transparent 20%); }
.universe-format-title { color: #e8edf8; font-size: 13px; font-weight: 600; letter-spacing: .035em; white-space: nowrap; }
.universe-format-count { color: color-mix(in srgb, var(--format-accent), white 13%); font-size: 10px; letter-spacing: .055em; font-variant-numeric: tabular-nums; }
.universe-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 78px;
	padding: 15px 5px 0;
}
.universe-footer-note { margin: 0; color: #8794ab; font-size: 12px; letter-spacing: .035em; }
.universe-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.universe-footer-button, .universe-other-formats {
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid var(--universe-line);
	border-radius: 999px;
	background: rgba(13, 19, 33, .78);
	color: #d5dced;
	font: inherit;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .12em;
	cursor: pointer;
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.universe-footer-button:hover, .universe-other-formats:hover { border-color: rgba(172, 195, 235, .42); background: rgba(26, 35, 55, .82); color: #fff; }
.universe-worlds-button { border-color: rgba(125, 203, 215, .33); color: #a7dce3; }
.universe-worlds-button:hover { border-color: rgba(125, 203, 215, .66); }
.universe-other-formats { min-height: 38px; padding-inline: 13px; color: #c4cce0; font-size: 9px; }
.universe-meta { min-height: 14px; margin: 0; color: #69758b; font-size: 9px; letter-spacing: .12em; text-align: right; }
.universe-other-formats[hidden] { display: none; }

@media (max-width: 680px) {
	.universe-home { padding: 8px 9px 17px; }
	.universe-scene { min-height: min(650px, 157vw); height: max(530px, 148vw); border-radius: 22px; }
	.universe-heading { top: 50%; width: 72%; min-width: 0; }
	.universe-title { margin-top: 8px; font-size: 22px; }
	.universe-total { margin-top: 10px; font-size: 9px; }
	.universe-total strong { font-size: 34px; }
	.universe-watched { margin-top: 8px; }
	.universe-status { margin-top: 9px; font-size: 10px; }
	.universe-format-star { width: clamp(100px, 29vw, 132px); height: clamp(100px, 29vw, 132px); padding: 9px; }
	.universe-format-movie { left: 23%; top: 23%; }
	.universe-format-anime { left: 77%; top: 23%; }
	.universe-format-anime-movie { left: 23%; top: 77%; }
	.universe-format-drama { left: 77%; top: 77%; }
	.universe-format-title { font-size: 12px; }
	.universe-footer { align-items: flex-start; flex-direction: column; gap: 9px; padding: 15px 4px 0; }
	.universe-footer-note { padding-left: 3px; font-size: 11px; }
	.universe-footer-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 7px; }
	.universe-footer-button { min-height: 44px; padding-inline: 14px; }
	.universe-other-formats { min-height: 40px; }
	.universe-meta { align-self: flex-end; }
}
@media (max-width: 370px) {
	.universe-scene { height: 560px; }
	.universe-format-star { width: 102px; height: 102px; }
	.universe-format-title { font-size: 11px; }
	.universe-heading { width: 67%; }
	.universe-title { font-size: 20px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
	.universe-format-star, .universe-footer-button, .universe-other-formats { transition: none; }
}
/* Fit the available app viewport instead of pushing controls below it. */
.universe-home{height:100%;display:flex;flex-direction:column;padding:8px 16px 8px}
.universe-scene{flex:1;min-height:320px;height:auto;border-radius:22px}
.universe-footer{flex-wrap:wrap;min-height:72px;gap:8px 18px;padding-top:12px}
.universe-meta{flex-basis:100%;font-size:9px}
.universe-format-movie{left:22%;top:28%}.universe-format-anime{left:78%;top:28%}
.universe-format-anime-movie{left:25%;top:72%}.universe-format-drama{left:75%;top:72%}
@media(max-width:680px){.universe-home{padding:0 0 6px}.universe-scene{height:auto;min-height:340px}.universe-footer{gap:8px;min-height:90px}.universe-heading{width:58%}.universe-title{font-size:19px}.universe-format-star{width:100px;height:100px}.universe-format-movie{left:22%;top:23%}.universe-format-anime{left:78%;top:23%}.universe-format-anime-movie{left:25%;top:77%}.universe-format-drama{left:75%;top:77%}}
@media(max-height:680px){body[data-view=universe]{overflow:auto}body[data-view=universe] .shell{height:auto;min-height:100dvh}#universeHome{min-height:440px}}