@property --canvas {
	syntax: "<color>";
	inherits: true;
	initial-value: #f3f3f3;
}

@property --card {
	syntax: "<color>";
	inherits: true;
	initial-value: #ffffff;
}

@property --text {
	syntax: "<color>";
	inherits: true;
	initial-value: #242424;
}

@property --muted {
	syntax: "<color>";
	inherits: true;
	initial-value: #5c5c5c;
}

@property --stroke {
	syntax: "<color>";
	inherits: true;
	initial-value: #e0e0e0;
}

@property --stroke-strong {
	syntax: "<color>";
	inherits: true;
	initial-value: #d1d1d1;
}

@property --accent {
	syntax: "<color>";
	inherits: true;
	initial-value: #0f6cbd;
}

@property --accent-hover {
	syntax: "<color>";
	inherits: true;
	initial-value: #115ea3;
}

@property --accent-soft {
	syntax: "<color>";
	inherits: true;
	initial-value: #ebf3fc;
}

@property --control {
	syntax: "<color>";
	inherits: true;
	initial-value: #ffffff;
}

@property --danger {
	syntax: "<color>";
	inherits: true;
	initial-value: #b10e1c;
}

:root {
	--canvas: #f3f3f3;
	--card: #ffffff;
	--text: #242424;
	--muted: #5c5c5c;
	--stroke: #e0e0e0;
	--stroke-strong: #d1d1d1;
	--accent: #0f6cbd;
	--accent-hover: #115ea3;
	--accent-soft: #ebf3fc;
	--control: #ffffff;
	--danger: #b10e1c;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
	--nav: 248px;
	--font: "Montserrat", "Segoe UI", sans-serif;
	color-scheme: light;
}

html.theme-ready {
	transition:
		--canvas 0.35s ease,
		--card 0.35s ease,
		--text 0.35s ease,
		--muted 0.35s ease,
		--stroke 0.35s ease,
		--stroke-strong 0.35s ease,
		--accent 0.35s ease,
		--accent-hover 0.35s ease,
		--accent-soft 0.35s ease,
		--control 0.35s ease,
		--danger 0.35s ease;
}

[data-theme="dark"] {
	--canvas: #1f1f1f;
	--card: #292929;
	--text: #ffffff;
	--muted: #adadad;
	--stroke: #3d3d3d;
	--stroke-strong: #525252;
	--accent: #479ef5;
	--accent-hover: #62abf5;
	--accent-soft: #0f2f4a;
	--control: #2b2b2b;
	--danger: #ff99a4;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html {
	scrollbar-gutter: stable;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	background: var(--canvas);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

img {
	max-width: 100%;
}

a {
	color: inherit;
}

button,
input,
select {
	font: inherit;
	color: inherit;
}

.app {
	display: none;
	grid-template-columns: var(--nav) 1fr;
	min-height: 100vh;
}

html.signed-in .app {
	display: grid;
}

.gate {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}

html.signed-in .gate {
	display: none;
}

.gate-card {
	width: min(440px, 100%);
	padding: 28px 24px 24px;
	display: grid;
	justify-items: center;
	gap: 8px;
	text-align: center;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.gate-logo {
	width: 88px;
	height: 88px;
	border-radius: 16px;
	border: 1px solid var(--stroke);
	object-fit: cover;
}

.gate-card h1 {
	margin: 8px 0 0;
	font-size: 28px;
	letter-spacing: -0.03em;
}

.gate-lead[hidden] {
	display: none;
}

.gate-lead,
.gate-help {
	margin: 0;
	color: var(--muted);
	font-weight: 600;
}

.gate-form,
.gate-check {
	width: 100%;
	display: grid;
	gap: 12px;
	margin-top: 12px;
	text-align: left;
}

.gate-form[hidden],
.gate-check[hidden] {
	display: none;
}

.gate-form > .btn,
.gate-check > .btn {
	width: 100%;
}

.gate-code {
	margin: 0;
	padding: 14px 12px;
	border-radius: 4px;
	border: 1px solid var(--stroke);
	background: var(--canvas);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
}

.gate-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gate-actions .btn {
	flex: 1;
}

.account-view {
	display: grid;
	gap: 10px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--stroke);
}

.account-row {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.account-row img {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--canvas);
	border: 1px solid var(--stroke);
}

.account-row img[hidden] {
	display: none;
}

.account-id {
	display: grid;
	min-width: 0;
}

.account-id strong,
.account-id span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-id span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.account-logout {
	width: 100%;
}

.intro-list {
	display: grid;
	gap: 12px;
}

.intro {
	display: grid;
	gap: 10px;
}

.intro h2,
.intro p {
	margin: 0;
}

.intro a {
	color: var(--accent);
	font-weight: 700;
}

.home-block {
	display: grid;
	gap: 14px;
	margin-top: 28px;
}

.home-block > h2,
.home-lead {
	margin: 0;
}

.home-block > h2 {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.home-lead {
	color: var(--muted);
}

.credit-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.credit-person {
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 8px 8px 4px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.credit-person img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	background: #111;
}

.credit-person span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.credit-person strong {
	color: var(--accent);
	font-size: 16px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nav {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 16px 12px;
	background: var(--card);
	border-right: 1px solid var(--stroke);
}

.brand {
	align-self: center;
	display: block;
	width: 156px;
	padding: 4px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 16px;
	box-shadow: var(--shadow);
	text-decoration: none;
	line-height: 0;
	view-transition-name: site-logo;
}

.brand img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	max-width: none;
	border-radius: 12px;
	object-fit: cover;
	display: block;
}

.nav-links {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 0;
	overflow: auto;
}

.nav-links a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 700;
	color: var(--text);
	transition: background 0.16s ease, color 0.16s ease;
}

.nav-icon {
	width: 20px;
	height: 20px;
	flex: none;
	display: block;
}

.nav-split {
	width: 1px;
	height: 16px;
	flex: none;
	background: var(--stroke-strong);
}

.nav-admin {
	display: grid;
	gap: 8px;
	margin-top: 4px;
}

.nav-admin[hidden] {
	display: none;
}

html.is-admin .nav-admin[hidden] {
	display: grid;
}

.nav-rule {
	height: 1px;
	margin: 8px 12px 0;
	background: var(--stroke-strong);
}

.admin-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
	gap: 16px;
	align-items: start;
}

.admin-form,
.admin-saved {
	display: grid;
	gap: 12px;
}

.admin-form h2,
.admin-saved h2 {
	margin: 0;
}

.admin-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.admin-stats {
	display: grid;
	gap: 12px;
}

.admin-stat-card {
	display: grid;
	gap: 10px;
	padding: 14px;
	background: var(--canvas);
	border-radius: 8px;
}

.admin-stat-card h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.stat-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 10px 12px;
	align-items: stretch;
}

.stat-fields .field {
	height: 100%;
	align-content: end;
}

.stat-fields .field > span {
	line-height: 1.25;
}

.admin-list {
	display: grid;
	gap: 8px;
}

.admin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: var(--canvas);
	border-radius: 8px;
}

.admin-row div {
	display: grid;
	min-width: 0;
}

.admin-row span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.admin-empty {
	margin: 0;
	color: var(--muted);
	font-weight: 600;
}

#admin-base-field[hidden] {
	display: none;
}

.nav-links a:hover,
.nav-links a:focus-visible {
	background: var(--accent-soft);
}

.nav-links a[aria-current="page"] {
	background: var(--accent-soft);
	color: var(--accent);
}

.nav-foot {
	margin-top: auto;
	display: grid;
	gap: 8px;
}

.nav-user {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--stroke);
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
}

.nav-user span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nav-logout {
	flex: none;
	min-height: 28px;
	padding: 0 8px;
	font-size: 12px;
}

#build-board[hidden],
#build-gate[hidden] {
	display: none;
}

.account-card h2 {
	margin: 0 0 6px;
}

.account-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.account-form {
	display: grid;
	gap: 12px;
	max-width: 360px;
	margin-top: 14px;
}

.account-form .btn {
	justify-self: start;
}

.shell {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.top {
	display: none;
	align-items: center;
	gap: 12px;
	height: 52px;
	padding: 0 16px;
	background: var(--card);
	border-bottom: 1px solid var(--stroke);
	position: sticky;
	top: 0;
	z-index: 15;
}

.menu-btn,
.settings-btn,
.theme-switch button,
.chip,
.copy,
.btn,
.rank-current,
.rank-menu button {
	border: 1px solid var(--stroke-strong);
	background: var(--control);
	color: var(--text);
	border-radius: 4px;
	font-weight: 700;
	cursor: pointer;
}

.menu-btn,
.settings-btn {
	min-height: 32px;
	padding: 0 12px;
}

.crumb-dot {
	color: var(--muted);
	font-weight: 700;
	line-height: 1;
}

.wrap {
	width: min(1080px, calc(100% - 48px));
	margin: 0 auto;
}

.build-wrap {
	width: min(1240px, calc(100% - 48px));
}

.page {
	flex: 1;
	padding: 32px 0 48px;
}

@media (prefers-reduced-motion: no-preference) {
	main.page {
		animation: page-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	body.is-leaving main.page {
		animation: page-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards;
	}
}

@keyframes page-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes page-out {
	to {
		opacity: 0;
		transform: translateY(-10px);
	}
}

.page-head {
	margin-bottom: 20px;
}

.build-browser {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.build-controls {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 12px;
	background: var(--canvas);
}

.build-sides {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.build-side {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	padding: 0 14px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	color: var(--text);
	font-weight: 700;
	cursor: pointer;
}

.build-side b {
	min-width: 22px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12px;
	text-align: center;
}

.build-side[aria-selected="true"] {
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.build-side[aria-selected="true"] b {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.build-tools {
	display: grid;
	grid-template-columns: minmax(200px, 1.5fr) minmax(150px, 1fr) minmax(130px, 0.8fr);
	gap: 10px;
}

.build-search,
.build-pick {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.build-browser .filters {
	margin-bottom: 0;
}

.build-count {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.build-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 12px;
	align-items: stretch;
}

.build-card .build-mark {
	width: 84px;
	height: 48px;
	border-radius: 12px;
}

.build-card .build-mark img {
	max-height: 36px;
}

.build-card .build-card-copy {
	min-width: 0;
	flex: 1;
}

.build-card,
.build-empty {
	padding: 14px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.build-empty,
.build-card-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.build-card-head {
	align-items: flex-start;
}

.build-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	min-width: 0;
}

.build-empty {
	grid-column: 1 / -1;
}

.build-card > .btn {
	justify-self: start;
	align-self: start;
}

body.build-open {
	overflow: hidden;
}

.build-screen {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	background: var(--canvas);
	overflow: auto;
}

.build-screen-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	flex: 0 0 auto;
	min-height: 56px;
	padding: 10px 20px;
	padding-top: max(10px, env(safe-area-inset-top));
	padding-left: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
	background: var(--card);
	border-bottom: 1px solid var(--stroke);
}

.build-screen-where {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	min-width: 0;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
}

.build-screen-body {
	width: min(880px, calc(100% - 48px));
	margin: 28px auto 48px;
	display: grid;
	gap: 22px;
}

.build-hero {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.build-hero-copy {
	min-width: 0;
	flex: 1;
}

.build-screen .build-mark img {
	height: 96px;
}

.build-hero h2 {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.build-hero p {
	margin: 6px 0 0;
	color: var(--muted);
	font-weight: 600;
}

.build-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.build-fact {
	padding: 14px 16px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.build-fact span {
	display: block;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.build-fact strong {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
}

.build-sheet {
	display: grid;
	gap: 12px;
}

.build-sheet h3 {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.build-screen-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.build-badge-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.build-badge-group {
	display: grid;
	align-content: start;
	gap: 4px;
	padding: 14px 16px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.build-badge-group h4 {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
}

.build-badge-row {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 48px;
}

.build-badge-row img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.build-badge-row span {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.build-badge-row b {
	font-size: 14px;
	font-weight: 700;
}

.rank-bronze { color: #8a5a30; }
.rank-silver { color: #5e6770; }
.rank-gold { color: #9a7420; }
.rank-diamond { color: #0c86a8; }
.rank-amethyst { color: #8d2ec4; }

[data-theme="dark"] .rank-bronze { color: #be7d4b; }
[data-theme="dark"] .rank-silver { color: #bec8d2; }
[data-theme="dark"] .rank-gold { color: #ffc832; }
[data-theme="dark"] .rank-diamond { color: #5adcff; }
[data-theme="dark"] .rank-amethyst { color: #c83dff; }

.build-screen .build-stat {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
	padding: 14px 16px;
	background: var(--card);
	border: 1px solid var(--stroke);
	overflow-wrap: break-word;
}

.build-screen .build-stat strong {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
}

.build-stat-block {
	display: grid;
	gap: 14px;
}

.build-stat-block .filters {
	margin-bottom: 0;
}

.build-card-copy {
	min-width: 0;
	flex: 1;
}

.build-title-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.build-title-row h2 {
	margin: 0;
}

.build-card .filters {
	margin-bottom: 0;
}

.build-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.build-stats.cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.build-stat {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	background: var(--canvas);
	border-radius: 4px;
	font-size: 13px;
}

.build-stat span {
	color: var(--muted);
	font-weight: 700;
}

.build-card h2,
.build-empty p,
.build-card p {
	margin: 0;
}

.build-card p,
.build-empty p {
	color: var(--muted);
	font-weight: 600;
}

.build-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.build-card h2 {
	margin-bottom: 4px;
	font-size: 16px;
}

.build-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 128px;
	height: 64px;
	padding: 4px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 16px;
	box-shadow: var(--shadow);
	line-height: 0;
}

.build-mark img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 52px;
}

.build-screen .build-mark {
	display: block;
	width: auto;
	height: auto;
}

.build-screen .build-mark img {
	width: auto;
	height: 96px;
	max-width: none;
	max-height: none;
}

.build-mark span {
	display: none;
}

.build-mark.is-letters {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.build-mark.is-letters span {
	display: block;
}

.page-head h1,
.hero h1 {
	margin: 0 0 8px;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.page-head p,
.lede {
	margin: 0;
	max-width: 62ch;
	color: var(--muted);
	font-weight: 600;
}

.update-date {
	margin: 0 0 8px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.update h2 {
	margin: 0 0 6px;
}

.update-version {
	margin: 0;
	color: var(--muted);
	font-weight: 600;
}

.release-log {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.release-side {
	display: grid;
	gap: 8px;
}

.release-label,
.release-count {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.release-list {
	display: grid;
	gap: 8px;
}

.release-pick {
	display: grid;
	gap: 2px;
	width: 100%;
	padding: 12px 14px;
	text-align: left;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.release-pick strong {
	font-size: 16px;
	line-height: 1.2;
}

.release-pick span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.release-pick[aria-selected="true"] {
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.release-pick[aria-selected="true"] span {
	color: rgba(255, 255, 255, 0.82);
}

.release-sheet {
	min-width: 0;
}

.release-detail {
	display: grid;
	gap: 0;
	padding: 22px;
}

.release-detail[hidden] {
	display: none;
}

.release-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.release-top .update-date {
	margin: 0;
}

.release-badge {
	margin: 0;
	flex: none;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--accent);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.card.release-detail h2 {
	margin: 16px 0 8px;
	font-size: 32px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.update-block {
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--canvas);
	border-radius: 8px;
}

.update-block h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.update-block .info-rule {
	margin: 8px 0 0;
}

.update-block .list {
	margin-top: 10px;
}

.hero-actions,
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 16px;
	text-decoration: none;
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.btn:hover,
.btn:focus-visible {
	background: var(--accent-hover);
}

.btn-quiet {
	background: var(--card);
	border-color: var(--stroke-strong);
	color: var(--text);
}

.btn-quiet:hover,
.btn-quiet:focus-visible {
	background: var(--accent-soft);
}

.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
	margin-top: 28px;
}

.tile,
.card,
.code,
.step {
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.tile {
	display: block;
	padding: 18px;
	text-decoration: none;
}

.tile:hover,
.tile:focus-visible {
	border-color: var(--accent);
}

.tile h2,
.card h2,
.card h3,
.step h2,
.code h2 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
}

.card h2.follow {
	margin-top: 16px;
}

.tile p,
.card p,
.step p,
.code p,
.note {
	margin: 0;
	color: var(--muted);
	font-weight: 600;
}

.note.space {
	margin-top: 14px;
}

.stack {
	display: grid;
	gap: 12px;
}

.split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 12px;
	align-items: center;
}

.card {
	padding: 18px;
}

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 12px;
}

.reward-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 12px;
	margin-top: 12px;
}

.step {
	padding: 18px;
}

.step span {
	display: block;
	margin-bottom: 8px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.list {
	margin: 12px 0 0;
	padding-left: 18px;
}

.list li + li {
	margin-top: 8px;
}

.codes-board {
	display: grid;
	gap: 12px;
}

.redeem h2 {
	margin: 0;
}

.redeem-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: redeem;
}

.redeem-steps li {
	counter-increment: redeem;
	display: grid;
	align-content: start;
	gap: 6px;
	min-width: 0;
	padding: 14px;
	background: var(--canvas);
	border: 1px solid var(--stroke);
	border-radius: 8px;
}

.redeem-steps li::before {
	content: counter(redeem);
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-bottom: 4px;
	border-radius: 7px;
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 13px;
	font-weight: 700;
}

.redeem-steps strong,
.redeem-steps span {
	display: block;
	line-height: 1.35;
}

.redeem-steps strong {
	font-size: 14px;
	font-weight: 700;
}

.redeem-steps span {
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
}

.redeem .note {
	margin-top: 14px;
}

.codes {
	display: grid;
	gap: 8px;
	container-type: inline-size;
}

.code {
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
}

.code-name {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.status {
	display: block;
	margin-bottom: 4px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
}

.copy,
.sheet-copy {
	min-height: 32px;
	padding: 0 12px;
}

.copy.copied,
.sheet-copy.copied {
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.builder {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 12px;
	align-items: start;
}

.form-block + .form-block {
	margin-top: 12px;
}

.field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.span-2 {
	grid-column: span 2;
}

.field {
	display: grid;
	gap: 6px;
}

.field > span {
	font-size: 13px;
	font-weight: 700;
}

.measure {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.field label {
	font-size: 13px;
	font-weight: 700;
}

.field .measure label {
	display: grid;
	gap: 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

input,
select {
	width: 100%;
	height: 36px;
	padding: 0 10px;
	background: var(--control);
	border: 1px solid var(--stroke-strong);
	border-radius: 4px;
}

input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

input:disabled,
select:disabled {
	opacity: 0.6;
}

input.invalid {
	border-color: var(--danger);
}

.hint,
.field-error {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
}

.field-error {
	color: var(--danger);
}

.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 6px;
	margin-bottom: 14px;
}

.pos-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.pos-side {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.pos-split {
	width: 1px;
	height: 16px;
	margin: 0 4px;
	background: var(--stroke-strong);
}

.chip {
	min-height: 32px;
	padding: 0 12px;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.chip[aria-selected="true"] {
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.sheet {
	position: sticky;
	top: 16px;
}

.sheet-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}

.pill {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
}

.sheet h2 {
	margin: 0 0 4px;
	font-size: 22px;
}

.sheet > p {
	margin: 0 0 12px;
}

.focus-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.focus-list li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--stroke);
	font-size: 13px;
}

.focus-list span {
	color: var(--muted);
}

.focus-list strong {
	text-align: right;
	font-weight: 700;
}

.sheet-copy {
	width: 100%;
	margin-top: 14px;
	height: 36px;
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.rules {
	margin-top: 12px;
}

.rule-list {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.rule-list li {
	display: grid;
	gap: 2px;
	padding-top: 10px;
	border-top: 1px solid var(--stroke);
}

.rule-list span {
	color: var(--muted);
	font-weight: 600;
}

.settings {
	position: relative;
}

.settings-btn {
	width: 100%;
}

.settings-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 8px);
	max-height: min(420px, calc(100vh - 80px));
	overflow: auto;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	padding: 12px;
	box-shadow: var(--shadow);
	z-index: 30;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.settings-panel.is-open {
	opacity: 1;
	transform: none;
}

.settings-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}

.theme-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.theme-switch button {
	min-height: 32px;
}

.theme-switch button[aria-pressed="true"] {
	background: var(--accent);
	border-color: transparent;
	color: #ffffff;
}

.badge-list {
	display: grid;
	gap: 8px;
}

.badge-list[hidden] {
	display: none;
}

.admin-badges {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

.admin-badges h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}

.badge-item {
	position: relative;
	background: var(--canvas);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.badge-item.is-on {
	border-color: var(--accent);
	background: var(--card);
}

.badge-item.is-open {
	z-index: 4;
}

.badge-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
}

.badge-check {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.check-box {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1px solid var(--stroke-strong);
	display: grid;
	place-items: center;
	flex: none;
	background: var(--card);
}

.check-box svg {
	width: 12px;
	height: 12px;
	stroke: #ffffff;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 16;
	stroke-dashoffset: 16;
	transition: stroke-dashoffset 0.22s ease;
}

.badge-item.is-on .check-box {
	background: var(--accent);
	border-color: var(--accent);
}

.badge-item.is-on .check-box svg {
	stroke-dashoffset: 0;
}

.badge-art,
.picked-badge img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.badge-art.is-locked,
.rank-current img.is-locked {
	filter: none;
	opacity: 1;
}

.rank-choose {
	color: var(--muted);
}

.badge-name {
	min-width: 0;
	flex: 1;
	font-weight: 700;
}

.badge-rank {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.24s ease, opacity 0.2s ease;
}

.badge-item.is-expanded .badge-rank {
	grid-template-rows: 1fr;
	opacity: 1;
}

.badge-rank-inner {
	overflow: hidden;
	min-height: 0;
}

.rank-drop {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.24s ease;
}

.badge-item.is-open .rank-drop {
	grid-template-rows: 1fr;
}

.rank-drop-inner {
	overflow: hidden;
	min-height: 0;
}

.rank-pick {
	position: relative;
	padding: 0 12px 12px 40px;
}

.rank-current,
.rank-menu button {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	padding: 4px 8px;
	text-align: left;
}

.rank-current img,
.rank-menu img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.rank-menu {
	display: grid;
	gap: 4px;
	margin: 0 12px 12px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	padding: 4px;
}

.rank-menu button[aria-selected="true"] {
	background: var(--accent-soft);
}

.sheet-badges {
	display: grid;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--stroke);
}

.picked-badge {
	display: flex;
	align-items: center;
	gap: 8px;
}

.picked-badge strong,
.picked-badge span {
	display: block;
	font-size: 13px;
}

.picked-badge span {
	color: var(--muted);
	font-weight: 600;
}

.link-list {
	display: grid;
	gap: 8px;
}

.link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.link-row h2 {
	margin: 0 0 4px;
}

.link-row p {
	margin: 0;
}

@media (max-width: 560px) {
	.link-row {
		flex-direction: column;
		align-items: flex-start;
	}
}

.site-footer {
	padding: 8px 0 calc(24px + env(safe-area-inset-bottom));
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 16px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

.footer-inner p {
	margin: 0;
	max-width: 36rem;
	line-height: 1.45;
}

.faq {
	display: grid;
	gap: 8px;
}

.faq-item {
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--text);
	border-bottom: 2px solid var(--text);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

@supports (interpolate-size: allow-keywords) {
	.faq-item {
		interpolate-size: allow-keywords;
	}

	.faq-item::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size 0.24s ease, opacity 0.2s ease, content-visibility 0.24s ease allow-discrete;
	}

	.faq-item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

.faq-item[open] summary::after {
	transform: translateY(2px) rotate(225deg);
}

.faq-body {
	display: grid;
	gap: 12px;
	padding: 0 16px 16px;
}

.faq-body p {
	margin: 0;
	color: var(--muted);
	font-weight: 600;
}

.faq-body h3 {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
}

.faq-body code {
	font-family: inherit;
	font-weight: 700;
	color: var(--text);
}

.attr-list {
	display: grid;
	gap: 8px;
	margin: 0;
}

.attr-list div {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 10px;
	align-items: baseline;
}

.attr-list dt,
.attr-list dd {
	margin: 0;
}

.attr-list dt {
	font-weight: 700;
	color: var(--accent);
}

.attr-list dd {
	color: var(--muted);
	font-weight: 600;
}

.attr-list strong {
	color: var(--text);
}

.arch-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.arch-list[hidden] {
	display: none;
}

.arch-list li + li {
	margin-top: 8px;
}

.arch-list li {
	font-weight: 600;
}

ul.list,
.arch-list {
	list-style: none;
	padding-left: 0;
}

ul.list li,
.arch-list li {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.bullet,
ul.list li::before,
.arch-list li::before {
	color: var(--muted);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

ul.list li::before,
.arch-list li::before {
	content: "•";
	flex: none;
}

.star {
	color: var(--accent);
	font-weight: 700;
}

.role-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: 8px;
}

.role-grid.cols-3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.role-grid article {
	padding: 10px 12px;
	background: var(--canvas);
	border: 1px solid var(--stroke);
	border-radius: 8px;
}

.role-grid h3 {
	margin: 0 0 2px;
	font-size: 13px;
}

.role-grid p {
	font-size: 12px;
}

.info-group {
	display: grid;
	gap: 8px;
}

.faq-body .info-label {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.game-cards h3 {
	margin: 0;
}

.info-rule {
	display: block;
	height: 1px;
	margin: 8px 0;
	background: var(--stroke-strong);
}

.tier-list {
	display: grid;
	grid-template-columns: 1.75em 1px max-content auto minmax(0, 1fr) auto;
	column-gap: 14px;
	row-gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tier-list li {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
}

.tier-num {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--accent);
}

.tier-bar {
	width: 1px;
	height: 16px;
	justify-self: center;
	background: var(--stroke-strong);
}

.tier-list .bullet {
	justify-self: center;
}

.tier-list strong {
	color: var(--text);
}

.tier-list .tier-states {
	color: var(--muted);
	font-weight: 600;
}

.tier-odd {
	font-weight: 700;
	color: var(--text);
	text-align: right;
}

@media (max-width: 720px) {
	.tier-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.tier-list li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		column-gap: 10px;
		row-gap: 2px;
	}

	.tier-num {
		width: 1.75em;
	}

	.tier-odd {
		order: 1;
		margin-left: auto;
	}

	.tier-list .bullet,
	.tier-states {
		order: 2;
	}

	.tier-list .bullet {
		margin-left: calc(1.75em + 21px);
	}

	.tier-states {
		flex: 1;
	}
}

@keyframes rise-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes rise-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(site-logo),
::view-transition-old(site-logo),
::view-transition-new(site-logo) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-old(swap-panel) {
	animation: 0.16s ease both rise-out;
}

::view-transition-new(swap-panel) {
	animation: 0.2s ease both rise-in;
}

@media (prefers-reduced-motion: reduce) {
	.page,
	body.is-leaving .page,
	.rank-drop,
	.build-screen,
	::view-transition-old(swap-panel),
	::view-transition-new(swap-panel) {
		animation: none;
	}

	html.theme-ready {
		transition: none;
	}

	.settings-panel,
	.badge-rank,
	.rank-drop,
	.faq-item summary::after,
	.faq-item::details-content,
	.nav-links a,
	.chip,
	.nav {
		transition: none;
	}
}

.backdrop {
	display: none;
}

@media (max-width: 900px) {
	.app {
		grid-template-columns: 1fr;
	}

	.top {
		display: flex;
	}

	.nav {
		position: fixed;
		z-index: 40;
		width: min(280px, calc(100% - 48px));
		transform: translateX(-105%);
		transition: transform 0.18s ease;
		box-shadow: var(--shadow);
	}

	.nav.open {
		transform: none;
	}

	.backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 35;
		border: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.backdrop[hidden] {
		display: none;
	}

	.wrap,
	.build-wrap {
		width: min(1240px, calc(100% - 32px));
	}

	.build-controls {
		top: 52px;
	}

	.builder,
	.field-grid {
		grid-template-columns: 1fr;
	}

	.menu-btn,
	.chip,
	.copy,
	.btn {
		min-height: 40px;
	}

	.span-2 {
		grid-column: auto;
	}

	.sheet {
		position: static;
	}

	.build-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.build-facts,
	.build-badge-groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.top {
		width: 100%;
		height: auto;
		min-height: 52px;
		padding-top: env(safe-area-inset-top);
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
	}
}

@media (max-width: 800px) {
	.admin-layout,
	.admin-grid,
	.release-log {
		grid-template-columns: 1fr;
	}

	.release-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card.release-detail h2 {
		font-size: 26px;
	}

	.redeem-steps {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.code {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 8px;
	}
}

@media (max-width: 520px) {
	.redeem-steps {
		grid-template-columns: 1fr;
	}
}

@container (max-width: 460px) {
	.code {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 8px;
	}
}

@media (max-width: 720px) {
	.build-tools {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.pos-group {
		flex: 1 0 100%;
	}

	.pos-split {
		display: none;
	}

	.build-card-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 420px) {
	.build-hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.build-screen .build-mark img {
		height: 72px;
	}

	.build-hero h2 {
		font-size: 28px;
	}

	.build-screen-body {
		width: min(880px, calc(100% - 32px));
		margin: 20px auto 32px;
	}
}

@media (max-width: 360px) {
	.build-facts,
	.build-badge-groups {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav {
		transition: none;
	}
}

#assistant-ask[hidden],
#assistant-result[hidden],
#ask-back[hidden],
#ask-error[hidden] {
	display: none;
}

.ask-count {
	margin: 0;
	color: var(--accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.ask-help {
	margin: 8px 0 0;
	color: var(--muted);
}

#ask-body {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.ask-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ask-stack .chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	width: min(100%, 560px);
	min-height: 44px;
	padding-top: 8px;
	padding-bottom: 8px;
	white-space: normal;
}

.ask-choices .chip small {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.82;
}

.ask-facts,
.ask-notes {
	display: grid;
	gap: 8px;
	margin-top: 16px;
}

.ask-facts p,
.ask-notes p {
	margin: 0;
}

.ask-stats {
	width: 100%;
	margin-top: 18px;
	border-collapse: collapse;
}

.ask-stats th,
.ask-stats td {
	padding: 8px 10px 8px 0;
	border-bottom: 1px solid var(--stroke);
	text-align: left;
	font-size: 14px;
}

.ask-stats th {
	color: var(--muted);
	font-size: 12px;
}

.ask-export {
	margin: 18px 0 0;
	padding: 14px;
	overflow: auto;
	background: var(--bg);
	border: 1px solid var(--stroke);
	border-radius: 12px;
	white-space: pre-wrap;
	font: 600 13px/1.5 Montserrat, "Segoe UI", sans-serif;
}