@media screen {
	:root {
		--steel: #2F6F9F;
		--navy: #0F2538;
		--navy-2: #071827;
		--brass: #E0A100;
		--paper: #F4F7FA;
		--text: #0B1B28;
		--muted: #526273;
		--line: rgba(15, 37, 56, .15);
	}

	* {
		box-sizing: border-box;
	}

	body {
		background: var(--paper);
		color: var(--text);
		font-size: 17px;
		line-height: 1.65;
		padding-top: 0 !important;
	}

	a {
		color: var(--steel);
	}

	.article-shell {
		min-height: 100vh;
		background:
			linear-gradient(180deg, rgba(7, 24, 39, .98) 0, rgba(15, 37, 56, .96) 32rem, #F4F7FA 32.1rem),
			linear-gradient(135deg, rgba(224, 161, 0, .16), rgba(47, 111, 159, .12));
	}

	.tool-nav .inner {
		max-width: 1020px;
		margin: 0 auto;
		padding: .75rem 1.25rem;
	}

	.article-main {
		max-width: 1020px;
		margin: 0 auto;
		padding: 0 1.25rem 3.5rem;
	}

	.article-hero {
		padding: 3rem 0 2rem;
		color: #fff;
	}

	.article-meta {
		display: inline-flex;
		align-items: center;
		margin-bottom: .75rem;
		color: rgba(255, 255, 255, .78);
		font-size: .84rem;
		font-weight: 900;
		text-transform: uppercase;
	}

	.article-hero h1 {
		max-width: 820px;
		margin: 0;
		color: #fff;
		font-size: clamp(2rem, 4vw, 3.7rem);
		line-height: 1.04;
		letter-spacing: 0;
	}

	.article-hero p {
		max-width: 760px;
		margin: 1rem 0 0;
		color: rgba(255, 255, 255, .84);
	}

	.article-content {
		max-width: 820px;
		padding: 1.4rem;
		border: 1px solid var(--line);
		border-radius: 8px;
		background: rgba(255, 255, 255, .94);
		box-shadow: 0 18px 42px rgba(15, 37, 56, .08);
	}

	.article-content h2 {
		margin: 1.8rem 0 .55rem;
		color: var(--navy);
		font-size: 1.25rem;
		line-height: 1.25;
	}

	.article-content h2:first-child {
		margin-top: 0;
	}

	.article-content p {
		margin: .7rem 0 0;
		color: #31465a;
	}

	.article-content ul {
		margin: .7rem 0 0;
		padding-left: 1.15rem;
		color: #31465a;
	}

	.article-content li {
		margin: .38rem 0;
	}

	.article-actions {
		display: flex;
		flex-wrap: wrap;
		gap: .6rem;
		margin-top: 1.5rem;
	}

	.article-back {
		display: inline-flex;
		align-items: center;
		gap: .45rem;
		padding: .72rem .9rem;
		border: 1px solid rgba(47, 111, 159, .28);
		border-radius: 8px;
		background: rgba(47, 111, 159, .09);
		box-shadow: none;
		color: var(--navy) !important;
		font-weight: 900;
		text-decoration: none;
	}

	.article-back:hover,
	.article-back:focus {
		border-color: rgba(224, 161, 0, .58);
		background: rgba(224, 161, 0, .13);
	}

	.article-source-list {
		list-style: none;
		padding: 0;
	}

	.article-source-list li {
		margin: .55rem 0;
		padding: .75rem;
		border: 1px solid rgba(15, 37, 56, .12);
		border-radius: 8px;
		background: #F8FBFD;
	}

	.article-source-list li span {
		display: block;
		margin-top: .25rem;
		color: var(--muted);
		font-size: .92rem;
	}

	.article-visual {
		margin: 1.25rem 0;
		padding: 1rem;
		border: 1px solid rgba(15, 37, 56, .12);
		border-radius: 8px;
		background: #F8FBFD;
	}

	.article-visual figcaption {
		display: grid;
		gap: .25rem;
		margin-bottom: .85rem;
		color: var(--navy);
	}

	.article-visual figcaption span {
		color: var(--muted);
		font-size: .92rem;
	}

	.article-score-row {
		display: grid;
		grid-template-columns: minmax(8.5rem, 1fr) minmax(9rem, 1.4fr) minmax(7rem, .9fr);
		gap: .7rem;
		align-items: center;
		margin-top: .55rem;
		color: #31465a;
	}

	.article-score-label,
	.article-score-note {
		font-weight: 800;
	}

	.article-score-note {
		color: var(--muted);
		font-size: .9rem;
	}

	.article-score-track {
		display: block;
		height: .65rem;
		overflow: hidden;
		border-radius: 999px;
		background: rgba(15, 37, 56, .12);
	}

	.article-score-track span {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: linear-gradient(90deg, #2F6F9F, #E0A100);
	}

	.article-card-visual ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.article-card-visual li {
		margin: 0;
		padding: .85rem;
		border: 1px solid rgba(15, 37, 56, .1);
		border-radius: 8px;
		background: #fff;
	}

	.article-card-visual li strong,
	.article-card-visual li span {
		display: block;
	}

	.article-card-visual li span {
		margin-top: .25rem;
		color: var(--muted);
	}

	.blog-index {
		max-width: 920px;
	}

	.blog-list {
		display: grid;
		gap: .85rem;
		margin-top: .9rem;
	}

	.blog-card {
		padding: 1rem;
		border: 1px solid rgba(15, 37, 56, .12);
		border-left: 4px solid rgba(224, 161, 0, .72);
		border-radius: 8px;
		background: #F8FBFD;
	}

	.blog-card time {
		display: inline-flex;
		color: #5D4200;
		font-size: .84rem;
		font-weight: 900;
		line-height: 1.25;
	}

	.blog-card h3 {
		margin: .35rem 0 0;
		color: var(--navy);
		font-size: 1.15rem;
		line-height: 1.25;
	}

	.blog-card h3 a {
		color: inherit;
		border-bottom: 0;
		text-decoration: none;
	}

	.blog-card h3 a:hover,
	.blog-card h3 a:focus {
		color: var(--steel);
	}

	html[data-itss-theme] .article-shell,
	html[data-itss-theme] .article-main {
		color: var(--itss-theme-text) !important;
	}

	html[data-itss-theme] .article-shell {
		background:
			linear-gradient(180deg, rgba(7, 24, 39, .98) 0, rgba(15, 37, 56, .96) 32rem, var(--itss-theme-bg) 32.1rem),
			linear-gradient(135deg, rgba(224, 161, 0, .16), rgba(47, 111, 159, .12)) !important;
	}

	html[data-itss-theme] .article-hero h1 {
		color: #fff !important;
	}

	html[data-itss-theme] .article-hero p,
	html[data-itss-theme] .article-meta {
		color: rgba(255, 255, 255, .84) !important;
	}

	html[data-itss-theme] .article-content,
	html[data-itss-theme] .article-source-list li,
	html[data-itss-theme] .article-visual,
	html[data-itss-theme] .blog-card {
		background: var(--itss-theme-bg-card) !important;
		border-color: var(--itss-theme-line) !important;
		color: var(--itss-theme-text) !important;
	}

	html[data-itss-theme] .article-content h2,
	html[data-itss-theme] .article-visual figcaption,
	html[data-itss-theme] .blog-card h3 {
		color: var(--itss-theme-text) !important;
	}

	html[data-itss-theme] .article-content p,
	html[data-itss-theme] .article-content li,
	html[data-itss-theme] .article-source-list li span,
	html[data-itss-theme] .article-visual figcaption span,
	html[data-itss-theme] .article-score-row,
	html[data-itss-theme] .article-score-note,
	html[data-itss-theme] .article-card-visual li span,
	html[data-itss-theme] .blog-card p {
		color: var(--itss-theme-muted) !important;
	}

	html[data-itss-theme] .article-card-visual li {
		background: var(--itss-theme-bg) !important;
		border-color: var(--itss-theme-line) !important;
	}

	html[data-itss-theme] .article-back {
		background: rgba(224, 161, 0, .12) !important;
		border-color: var(--itss-theme-line) !important;
		color: var(--itss-theme-text) !important;
	}

	@media (max-width: 736px) {
		.article-hero {
			padding-top: 2.25rem;
		}

		.article-content {
			padding: 1rem;
		}

		.article-score-row,
		.article-card-visual ul {
			grid-template-columns: 1fr;
		}
	}
}