.home { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.home .h-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.h-hero {
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "org acts" "hello hello" "line line"; align-items: center; gap: 4px 16px;
	padding: 18px 22px 22px; border: 1px solid var(--rule); border-radius: calc(var(--radius) + 4px);
	background: radial-gradient(110% 150% at 100% 0%, var(--h-tint) 0%, transparent 58%), var(--sheet);
}
.h-hero.morning { --h-tint: color-mix(in oklch, var(--staged) 15%, transparent); }
.h-hero.afternoon { --h-tint: color-mix(in oklch, var(--accent) 15%, transparent); }
.h-hero.evening { --h-tint: color-mix(in oklch, var(--ai) 15%, transparent); }
.h-hero.night { --h-tint: color-mix(in oklch, var(--moved) 15%, transparent); }
.home .mark.h-mark { position: absolute; z-index: -1; right: -30px; bottom: -48px; width: 190px; height: 190px; color: var(--ink); opacity: 0.045; pointer-events: none; }
.h-org { grid-area: org; display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 12px; }
.home .obadge.h-logo { --s: 40px; border-radius: 11px; font-size: 0.85rem; }
.h-org-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.3; }
.h-org-text b { font-weight: 700; overflow-wrap: anywhere; }
.h-facts { display: flex; flex-wrap: wrap; margin: 0 0 0 -18px; color: var(--ink-3); font-size: 0.82rem; }
.h-facts span { margin-left: 18px; }
.h-facts span::before { content: "·"; display: inline-block; width: 18px; margin-left: -18px; text-align: center; }
.h-hello { grid-area: hello; font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.1; overflow-wrap: anywhere; animation: h-rise 0.5s var(--ease) both; }
.h-line { grid-area: line; max-width: 70ch; margin-top: 6px; color: var(--ink-2); font-size: 0.98rem; animation: h-fade 0.5s var(--ease) both; }
.h-line b { color: var(--ink); font-weight: 700; }
.h-line .h-skel-line { width: min(420px, 80%); height: 12px; margin-top: 6px; }
.h-head-acts { grid-area: acts; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-self: start; }

.h-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.h-main, .h-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.h-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.h-sec-head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.h-sec-sub { color: var(--ink-3); font-size: 0.86rem; }

.h-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.h-game { container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; animation: h-rise 0.42s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms); }
.h-game:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-sm); }
.h-game.is-current { border-color: var(--accent-line); }
.h-top { position: relative; }
.h-game-open { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.h-game-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; transition: background 0.15s; }
.h-game-open:hover .h-game-head { background: var(--hover); }
.h-thumb {
	position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--rule);
	background:
		radial-gradient(90% 120% at 85% 0%, oklch(calc(var(--av-l) + 0.04) var(--av-c) calc(var(--ah) + 40)) 0%, transparent 65%),
		linear-gradient(140deg, oklch(var(--av-l) var(--av-c) var(--ah)), oklch(calc(var(--av-l) - 0.07) calc(var(--av-c) + 0.03) calc(var(--ah) - 35)));
}
.h-thumb::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(oklch(var(--av-ink) 0.07 var(--ah) / 0.18) 1px, transparent 1.6px); background-size: 14px 14px; mask-image: linear-gradient(150deg, transparent 35%, #000 95%); }
.h-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.h-game-open:hover .h-thumb img { transform: scale(1.03); }
.h-thumb-mark {
	position: relative; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px;
	background: color-mix(in oklch, var(--sheet) 60%, transparent); color: oklch(var(--av-ink) 0.1 var(--ah));
	box-shadow: 0 1px 2px oklch(0 0 0 / 0.08), 0 10px 26px oklch(var(--av-ink) 0.07 var(--ah) / 0.2);
	font: 700 1.45rem/1 var(--f-display); letter-spacing: 0.02em; transition: transform 0.3s var(--spring);
}
.h-game-open:hover .h-thumb-mark { transform: translateY(-2px); }
.h-addthumb {
	position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
	border: 1px solid color-mix(in oklch, var(--rule) 70%, transparent); border-radius: 99px; background: color-mix(in oklch, var(--sheet) 78%, transparent);
	backdrop-filter: blur(6px); color: var(--ink-2); font-size: 0.76rem; font-weight: 650; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.h-addthumb:hover { background: var(--sheet); color: var(--ink); }
.h-addthumb .i { width: 13px; height: 13px; }
.h-game-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.h-game-name b { font-family: var(--f-display); font-size: 1.1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-game-name small { font-size: 0.76rem; font-weight: 700; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-game-name small.mono { color: var(--ink-3); font-weight: 400; }
.h-go { color: var(--ink-3); transition: transform 0.2s var(--ease), color 0.2s; }
.h-game-open:hover .h-go { transform: translateX(3px); color: var(--accent); }

.h-mod { display: flex; flex-direction: column; gap: 8px; padding: 6px 12px 12px; min-width: 0; }
.h-mod-h { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.h-mod-h .i { width: 13px; height: 13px; }
.h-envs { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.h-env { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 52px; padding: 8px 10px; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; animation: h-fade 0.3s var(--ease) both; }
.h-env:first-child { border-top: 0; }
button.h-env { cursor: pointer; transition: background 0.15s; }
button.h-env:hover { background: var(--hover); }
.h-env-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--sunk); color: var(--ink-2); }
.h-env.production .h-env-ic { background: var(--live-soft); color: var(--live); }
.h-env-ic .i { width: 15px; height: 15px; }
.h-env-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.h-env-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.h-env-top b { font-size: 0.9rem; }
.h-ver { font-size: 0.8rem; font-weight: 650; color: var(--ink-2); white-space: nowrap; }
.h-env-main small { font-size: 0.78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-env-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 55%; }
.h-env-chips:empty { display: none; }
@container (max-width: 380px) {
	.h-env { flex-wrap: wrap; row-gap: 6px; }
	.h-env-chips { flex-basis: 100%; max-width: none; justify-content: flex-start; padding-left: 38px; }
}
.h-skel-line { display: block; height: 10px; width: 70%; margin-top: 5px; }
.h-skel-line.h-short { width: 40%; }
.h-skel-dot { width: 30px; height: 30px; border-radius: 50%; flex: none; }

.h-sync { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 7px 10px; border: 1px dashed var(--accent-line); border-radius: 9px; background: none; color: var(--ink-2); font-size: 0.82rem; text-align: left; line-height: 1.3; }
.h-sync .i { width: 14px; height: 14px; color: var(--accent); }
button.h-sync { cursor: pointer; transition: background 0.15s; }
button.h-sync:hover { background: var(--accent-soft); }
.h-sync-go { font-weight: 700; color: var(--accent); }

.h-pulse { display: flex; align-items: flex-end; gap: 10px; padding: 2px 4px 0; min-width: 0; }
.h-bars { display: flex; align-items: stretch; height: 26px; flex: none; }
.h-bar { width: 8px; display: flex; align-items: flex-end; padding: 0 1px; }
.h-bar::before { content: ""; width: 100%; height: max(2px, calc(var(--v, 0) * 100%)); border-radius: 3px 3px 1px 1px; background: var(--accent-line); transform-origin: bottom; transition: height 0.3s var(--ease); animation: h-grow 0.5s var(--ease) both; }
.h-bar.now::before { background: var(--accent); }
.h-bar.zero::before { height: 2px; border-radius: 1px; background: var(--rule-strong); }
.h-bar:hover::before { background: var(--accent); }
.h-pulse-t { font-size: 0.78rem; color: var(--ink-3); min-width: 0; line-height: 1.3; }

.h-setup { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 8px 10px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.15s; }
.h-setup:hover { border-color: var(--accent); }
.h-setup .grow { display: flex; flex-direction: column; line-height: 1.3; }
.h-setup b { font-size: 0.84rem; }
.h-setup small { font-size: 0.78rem; color: var(--ink-2); }
.h-setup > .i { width: 16px; height: 16px; color: var(--accent); }
.h-steps { display: flex; gap: 3px; flex: none; }
.h-steps i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--accent); }
.h-steps i.on { background: var(--accent); }

.h-links { display: flex; margin-top: auto; border-top: 1px solid var(--rule); }
.h-links button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 0; background: none; color: var(--ink-2); font-weight: 650; font-size: 0.84rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.h-links button + button { border-left: 1px solid var(--rule); }
.h-links button:hover { background: var(--hover); color: var(--ink); }
.h-links .i { width: 15px; height: 15px; }

.home .h-env:focus-visible, .home .h-links button:focus-visible, .home .h-item:focus-visible { outline-offset: -2px; border-radius: 0; }
.home .h-game-open:focus-visible { outline: none; }
.h-game-open:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 2px solid var(--accent); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; pointer-events: none; }

.h-empty { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

.h-activity { overflow: hidden; }
.h-feed { display: flex; flex-direction: column; padding-bottom: 6px; }
.h-day { padding: 12px 16px 4px; border-top: 1px solid var(--rule); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.h-item { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 8px 16px; border: 0; background: none; color: var(--ink); text-align: left; animation: h-fade 0.3s var(--ease) both; }
button.h-item { cursor: pointer; transition: background 0.15s; }
button.h-item:hover { background: var(--hover); }
.h-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sunk); color: var(--ink-2); }
.h-ic.ai { background: var(--ai-soft); color: var(--ai); }
.h-ic .i { width: 16px; height: 16px; }
.h-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.h-item-line { font-size: 0.9rem; overflow-wrap: anywhere; }
.h-item-main small { font-size: 0.8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-game-tag { font-weight: 650; color: var(--ink-2); }
.h-item-end { display: flex; align-items: center; gap: 8px; flex: none; }
.h-when { font-size: 0.78rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.h-item-skel { padding-block: 10px; }
.h-none { padding: 0 16px 16px; font-size: 0.86rem; color: var(--ink-3); }

.h-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; animation: h-rise 0.42s var(--ease) both; }
.h-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.h-card-head h2 { font-size: 1rem; }
.h-card-head .link .i { width: 14px; height: 14px; }
.h-card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.h-faces { display: flex; align-items: center; }
.h-faces .avatar { box-shadow: 0 0 0 2px var(--sheet); margin-left: -6px; }
.h-faces .avatar:first-child { margin-left: 0; }
.h-more { margin-left: 8px; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); }
.h-recent { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; font-size: 0.84rem; }
.h-recent li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h-recent .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-recent .faint { flex: none; font-size: 0.78rem; }

.h-todos { display: flex; flex-direction: column; margin: 0 -16px -14px; }
.h-todo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--rule); animation: h-fade 0.3s var(--ease) both; }
.h-todo .grow { display: flex; flex-direction: column; line-height: 1.3; }
.h-todo b { font-size: 0.88rem; }
.h-todo small { font-size: 0.78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-todo-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.h-todo-ic .i { width: 15px; height: 15px; }
.h-todo-ic.ai { background: var(--ai-soft); color: var(--ai); }
.h-todo-ic.bad { background: var(--bad-soft); color: var(--bad); }

@media (max-width: 1080px) {
	.h-layout { display: flex; flex-direction: column; align-items: stretch; }
	.h-main, .h-side { display: contents; }
	.h-attn { order: -1; }
	.h-activity { order: 1; }
	.h-side > .h-card:not(.h-attn) { order: 2; }
}
@media (max-width: 760px) {
	.home { gap: 16px; }
	.h-layout, .h-main, .h-side { gap: 16px; }
	.h-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "org" "hello" "line" "acts"; padding: 16px 16px 18px; }
	.h-head-acts { justify-content: stretch; margin-top: 14px; }
	.h-head-acts .btn { flex: 1 1 auto; }
	.h-item { align-items: flex-start; }
	.h-item-end { flex-direction: column; align-items: flex-end; gap: 4px; }
	.h-item-main small { white-space: normal; }
}

@keyframes h-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes h-fade { from { opacity: 0; } }
@keyframes h-grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) {
	.home *, .home *::before { animation: none !important; transition: none !important; }
}
:root[data-motion="reduced"] .home *, :root[data-motion="reduced"] .home *::before { animation: none !important; transition: none !important; }