/* Microscope Finder. Rooted on #msf so it beats the theme's `.t33-single-main .entry-content a/img/ul/dl` and the
 * page-template equivalents at (0,2,1) with no !important. Article cards sit outside #msf and use a tripled class. */
#msf {
	--ink: #0b1220; --soft: #566077; --line: #dfe6ee; --bg2: #f3f8fb;
	--teal: #0fa3b8; --teal-d: #0c7f97; --teal-l: #e4f6f9; --cyan: var(--t33-cyan, #2bc8e8);
	--amber1: #ffd166; --amber2: #ffae42;
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 26px;
	min-height: 600px; margin: 32px 0; padding: 28px;
	border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: #fff;
	box-shadow: 0 18px 44px rgba(11, 18, 32, .09);
	font-size: 16px; line-height: 1.45; font-family: inherit;
	transition: background-color .4s ease, border-color .4s ease;
}
#msf *, #msf *::before, #msf *::after { box-sizing: border-box; }
#msf p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
#msf ul, #msf dl, #msf dd, #msf dt { margin: 0; padding: 0; list-style: none; }
#msf li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
#msf li::marker { content: ''; }
#msf img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
#msf svg { display: block; }
#msf a { text-decoration: none; border: 0; box-shadow: none; }
#msf button { appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; margin: 0; text-transform: none; letter-spacing: normal; }
#msf button:focus-visible, #msf a:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
#msf .msf-question:focus, #msf .msf-headline:focus { outline: none; }
#msf .msf-sr, #msf .msf-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#msf .msf-ico { width: 24px; height: 24px; flex: none; }
#msf .msf-ico-sm { width: 18px; height: 18px; }
#msf .msf-ico-xs { width: 14px; height: 14px; }

/* Rail: the objective turret + focus ring */
.msf-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 240px; }
#msf .msf-turret { width: 116px; height: 116px; filter: drop-shadow(0 10px 18px rgba(12, 127, 151, .2)); }
#msf .msf-turret-svg { width: 100%; height: 100%; overflow: visible; }
.msf-t-base { fill: #fff; stroke: var(--line); stroke-width: 1; }
.msf-t-track { fill: none; stroke: #d6edf2; stroke-width: 3.5; }
.msf-t-arc { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.3, 1, .4, 1); }
.msf-t-rot { transform-origin: 50px 50px; transition: transform .75s cubic-bezier(.3, 1.35, .45, 1); }
.msf-t-plate { fill: #0e1a24; }
.msf-t-ticks path { stroke: #3f5a6b; stroke-width: 1.3; stroke-linecap: round; fill: none; }
.msf-t-barrel { fill: #aebfcb; }
.msf-t-lens { fill: #16232e; }
.msf-t-glass { fill: var(--cyan); opacity: .9; }
.msf-t-hub { fill: var(--teal-d); }
.msf-t-text { fill: #fff; font-size: 10.5px; font-weight: 800; font-family: inherit; }
.msf-t-pin { fill: var(--teal); }
.msf-steplabel { font-size: 13px; font-weight: 700; color: var(--soft); text-align: center; }

/* Screens */
.msf-stage { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
#msf[data-state="result"] .msf-stage { justify-content: flex-start; }
.msf-screen { width: 100%; }
#msf .msf-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-d); margin-bottom: 8px; }

/* Intro: dark panel with a light beam */
#msf[data-state="intro"] { display: block; padding: 0; min-height: 0; background: #06121a; border-color: #06121a; }
#msf[data-state="intro"] .msf-rail { display: none; }
.msf-intro { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 12px 24px; min-height: 440px; padding: 52px 44px 44px; color: #eaf6fa; background: radial-gradient(700px 360px at 80% 0%, rgba(43, 200, 232, .2), transparent 65%), linear-gradient(165deg, #0a1a24, #050d13); }
.msf-beam { position: absolute; top: -12%; left: 70%; width: 78%; height: 135%; margin-left: -39%; pointer-events: none; z-index: 0; background: linear-gradient(180deg, rgba(150, 236, 250, .38), rgba(43, 200, 232, .1) 52%, transparent 82%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(5px); transform-origin: 50% 0; animation: msf-beam 7s ease-in-out infinite alternate; }
@keyframes msf-beam { from { opacity: .55; transform: skewX(-4deg); } to { opacity: 1; transform: skewX(4deg); } }
.msf-intro-copy { position: relative; z-index: 1; }
#msf .msf-intro .msf-eyebrow { color: var(--cyan); }
#msf .msf-title { font-size: clamp(30px, 4.6vw, 46px); font-weight: 900; line-height: 1.08; letter-spacing: -.015em; color: #fff; margin-bottom: 14px; text-wrap: balance; }
#msf .msf-lede { font-size: 18px; color: #b9ccd7; margin-bottom: 26px; max-width: 40ch; }
#msf .msf-start { min-height: 52px; padding: 14px 34px; border-radius: 999px; font-size: 17px; font-weight: 800; color: #04141b; background: linear-gradient(120deg, var(--cyan), #8fe9c9); box-shadow: 0 10px 28px rgba(43, 200, 232, .35); transition: transform .2s, box-shadow .2s; }
#msf .msf-start:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(43, 200, 232, .45); }
#msf .msf-start:disabled { opacity: .6; cursor: default; }
#msf .msf-strip { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px 24px; margin-top: 30px; }
#msf .msf-strip li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.25; color: #9fb7c4; }
#msf .msf-strip b { display: block; font-size: 14px; color: #fff; }
#msf .msf-strip-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #7fe4f4; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.msf-fov-wrap { position: relative; z-index: 1; justify-self: center; width: min(100%, 300px); }
#msf .msf-fov { width: 100%; height: auto; filter: drop-shadow(0 0 34px rgba(43, 200, 232, .35)); }
.msf-drift { animation: msf-drift 9s ease-in-out infinite alternate; }
.msf-drift.d2 { animation-duration: 12s; animation-direction: alternate-reverse; }
.msf-drift.d3 { animation-duration: 7s; }
@keyframes msf-drift { from { transform: translate(-8px, 5px) rotate(-6deg); } to { transform: translate(10px, -9px) rotate(8deg); } }

/* Question screens */
.msf-qtop { display: flex; align-items: center; min-height: 44px; margin-bottom: 6px; }
#msf .msf-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -8px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--soft); transition: background .15s, color .15s; }
#msf .msf-back:hover { background: var(--bg2); color: var(--ink); }
#msf .msf-question { font-size: clamp(24px, 3.2vw, 32px); font-weight: 900; line-height: 1.15; color: var(--ink); margin-bottom: 6px; text-wrap: balance; }
#msf .msf-hint { color: var(--soft); margin-bottom: 20px; }

.msf-options { display: grid; gap: 10px; }
.msf-n6, .msf-n7, .msf-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msf-n7 .msf-opt:last-child { grid-column: 1 / -1; }
.msf-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#msf .msf-opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px; text-align: left; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .18s, box-shadow .18s, transform .18s; }
@media (hover: hover) { #msf .msf-opt:hover { box-shadow: inset 0 0 0 2px var(--teal), 0 8px 20px rgba(12, 127, 151, .12); transform: translateY(-2px); } }
#msf .msf-opt[aria-pressed="true"] { background: var(--teal-l); box-shadow: inset 0 0 0 2px var(--teal); }
.msf-opt-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; color: var(--teal-d); background: var(--teal-l); transition: background .18s, color .18s; }
#msf .msf-opt[aria-pressed="true"] .msf-opt-ico { background: var(--teal); color: #fff; }
.msf-opt-text { display: flex; flex-direction: column; min-width: 0; }
.msf-opt-label { font-weight: 800; color: var(--ink); line-height: 1.2; }
.msf-opt-hint { font-size: 14px; color: var(--soft); line-height: 1.3; margin-top: 3px; }
#msf .msf-n3 .msf-opt { flex-direction: column; justify-content: flex-start; text-align: center; gap: 10px; padding: 18px 12px; min-height: 150px; }
#msf .msf-n3 .msf-opt-ico { width: 54px; height: 54px; border-radius: 16px; }
#msf .msf-n3 .msf-opt-text { align-items: center; }

/* Result */
#msf[data-state="result"] { grid-template-columns: minmax(0, 1fr); }
#msf[data-state="result"] .msf-rail { display: none; }
#msf .msf-headline { font-size: clamp(26px, 3.8vw, 38px); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; text-wrap: balance; }
#msf .msf-explain { font-size: 17px; line-height: 1.55; color: #2a3446; max-width: 68ch; margin-bottom: 10px; }
#msf a.msf-typeslink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--teal-d); }
#msf a.msf-typeslink:hover { text-decoration: underline; }
#msf .msf-note { margin: 4px 0 10px; padding: 10px 14px; border-radius: 12px; font-size: 14px; color: #7a4a00; background: #fff6e5; box-shadow: inset 0 0 0 1px #ffe2a8; }
.msf-reshead { margin-bottom: 8px; }

#msf .msf-card { position: relative; display: grid; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(11, 18, 32, .06); overflow: hidden; }
#msf .msf-card-top { grid-template-columns: 240px minmax(0, 1fr); margin: 12px 0 6px; box-shadow: inset 0 0 0 2px var(--teal), 0 16px 40px rgba(12, 127, 151, .16); }
.msf-card-media { background: #fff; padding: 16px; border-right: 1px solid var(--line); }
#msf a.msf-imglink { display: block; background: #fff; }
.msf-card-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 18px 20px; }
#msf .msf-badge { display: inline-block; margin-bottom: 8px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--teal-d); }
#msf .msf-tag { display: inline-block; margin-bottom: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--teal-d); background: var(--teal-l); }
#msf .msf-name { font-size: clamp(20px, 2.6vw, 25px); font-weight: 900; line-height: 1.15; color: var(--ink); }
#msf .msf-best { margin-top: 4px; font-weight: 700; color: var(--teal-d); }
#msf .msf-why { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; color: #2a3446; }
#msf .msf-why .msf-ico { margin-top: 3px; color: #1e9e5a; }
#msf .msf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; width: 100%; margin: 14px 0 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#msf .msf-facts dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
#msf .msf-facts dd { margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
#msf a.msf-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 28px; border-radius: 999px; font-size: 17px; font-weight: 800; color: #1a1205; background: linear-gradient(120deg, var(--amber1), var(--amber2)); box-shadow: 0 10px 24px rgba(255, 174, 66, .32); transition: transform .2s, box-shadow .2s; }
#msf a.msf-cta:hover { transform: translateY(-2px); color: #1a1205; box-shadow: 0 14px 30px rgba(255, 174, 66, .42); }
#msf a.msf-cta-sm { min-height: 44px; margin-top: auto; padding: 9px 20px; font-size: 15px; }

#msf .msf-sub { margin: 26px 0 10px; font-weight: 900; font-size: 18px; color: var(--ink); }
#msf .msf-sub span { font-size: 14px; font-weight: 600; color: var(--soft); }
.msf-alts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#msf .msf-card-alt { grid-template-columns: 112px minmax(0, 1fr); }
#msf .msf-card-alt a.msf-imglink { padding: 12px; border-right: 1px solid var(--line); align-self: stretch; display: flex; align-items: flex-start; }
#msf .msf-card-alt .msf-card-body { padding: 14px 16px; }
#msf .msf-card-alt .msf-name { font-size: 18px; }
#msf .msf-card-alt .msf-why { margin-top: 6px; font-size: 14px; color: var(--soft); }
#msf .msf-mini { margin: 8px 0 10px; font-size: 13px; color: var(--soft); line-height: 1.35; }
.msf-acc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
#msf .msf-card-acc { grid-template-columns: 76px minmax(0, 1fr); }
#msf .msf-card-acc a.msf-imglink { padding: 8px; border-right: 1px solid var(--line); align-self: center; }
#msf .msf-card-acc .msf-card-body { padding: 12px 14px; }
#msf .msf-card-acc .msf-name { font-size: 15px; line-height: 1.2; }
#msf .msf-card-acc .msf-best { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--soft); }
#msf a.msf-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 800; color: var(--teal-d); }
#msf a.msf-link:hover { text-decoration: underline; }

.msf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#msf .msf-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
#msf .msf-chip .msf-ico-sm { color: var(--teal-d); }
#msf .msf-chip .msf-ico-xs { color: var(--soft); }
#msf .msf-chip:hover { background: var(--teal-l); box-shadow: inset 0 0 0 1.5px var(--teal); }
.msf-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
#msf .msf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 999px; font-weight: 800; color: var(--teal-d); background: #fff; box-shadow: inset 0 0 0 2px var(--teal); transition: background .15s, color .15s; }
#msf .msf-btn:hover { background: var(--teal); color: #fff; }
#msf .msf-disclosure { margin-top: 18px; font-size: 12.5px; color: var(--soft); }
.msf-noscript { grid-column: 1 / -1; color: var(--soft); }

@media (max-width: 860px) {
	.msf-intro { grid-template-columns: minmax(0, 1fr); padding: 40px 30px 36px; }
	.msf-fov-wrap { order: -1; width: min(60%, 200px); justify-self: start; }
	.msf-beam { left: 30%; }
	#msf .msf-card-top { grid-template-columns: 200px minmax(0, 1fr); }
	.msf-alts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
	#msf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 640px; margin-left: -24px; margin-right: -24px; padding: 16px 14px 22px; border-radius: 16px; gap: 2px; }
	#msf .msf-rail { flex-direction: row; justify-content: flex-start; min-height: 0; gap: 12px; }
	#msf .msf-turret { width: 60px; height: 60px; filter: none; }
	#msf .msf-t-text { font-size: 12px; }
	#msf .msf-stage { justify-content: flex-start; padding-top: 6px; }
	#msf[data-state="intro"] { min-height: 0; grid-template-rows: none; }
	.msf-intro { padding: 30px 20px 28px; min-height: 0; }
	.msf-fov-wrap { width: 130px; }
	#msf .msf-lede { font-size: 16px; }
	#msf .msf-strip { grid-template-columns: minmax(0, 1fr); }
	#msf .msf-strip li { flex-direction: row; align-items: center; gap: 10px; }
	.msf-n6, .msf-n7, .msf-n4, .msf-n3 { grid-template-columns: minmax(0, 1fr); }
	#msf .msf-opt { min-height: 64px; padding: 10px 12px; }
	.msf-opt-ico { width: 42px; height: 42px; }
	#msf .msf-n3 .msf-opt { flex-direction: row; text-align: left; min-height: 64px; padding: 10px 12px; gap: 12px; }
	#msf .msf-n3 .msf-opt-ico { width: 42px; height: 42px; border-radius: 13px; }
	#msf .msf-n3 .msf-opt-text { align-items: flex-start; }
	#msf .msf-card-top { grid-template-columns: minmax(0, 1fr); }
	.msf-card-media { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
	#msf .msf-card-top a.msf-imglink { max-width: 230px; margin: 0 auto; }
	.msf-card-body { padding: 16px; }
	#msf .msf-facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	#msf a.msf-cta { width: 100%; }
	#msf .msf-card-alt { grid-template-columns: 92px minmax(0, 1fr); }
	#msf .msf-card-alt .msf-card-body { padding: 12px; }
	#msf .msf-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
	#msf, #msf * { transition: none !important; animation: none !important; }
}

/* Article cards and disclosure, outside #msf. Tripled class: (0,3,2) beats the theme's (0,2,1) and (0,3,1) rules. */
body .msf-acard.msf-acard.msf-acard { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; margin: 22px 0; padding: 16px; border: 1px solid #dfe6ee; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(11, 18, 32, .06); }
body .msf-acard.msf-acard.msf-acard img { display: block; width: 100%; height: auto; margin: 0; border-radius: 8px; box-shadow: none; }
body .msf-acard.msf-acard.msf-acard a.msf-acard-img { display: block; border: 0; }
body .msf-acard.msf-acard.msf-acard p { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }
body .msf-acard.msf-acard.msf-acard p.msf-acard-label { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #0c7f97; }
body .msf-acard.msf-acard.msf-acard p.msf-acard-name { font-size: 18px; font-weight: 800; line-height: 1.25; color: #0b1220; }
body .msf-acard.msf-acard.msf-acard p.msf-acard-facts { font-size: 14px; color: #566077; }
body .msf-acard.msf-acard.msf-acard a.msf-acard-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 9px 22px; border: 0; border-radius: 999px; font-weight: 800; font-size: 15px; color: #1a1205; background: linear-gradient(120deg, #ffd166, #ffae42); text-decoration: none; }
body p.msf-disclosure.msf-disclosure { font-size: 14px; color: #566077; }
@media (max-width: 560px) {
	body .msf-acard.msf-acard.msf-acard { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; align-items: start; margin-left: -18px; margin-right: -18px; }
	body .msf-acard.msf-acard.msf-acard a.msf-acard-cta { padding: 8px 14px; font-size: 14px; text-align: center; max-width: 100%; }
}

/* Page template: the quiz plays the featured image's part (the image still serves og:image and hub cards).
 * Without this the 1024px hero image pushed the quiz to y=1219 on a 1366x900 desktop. */
body.page .t33-article-media:has(~ * #msf), body.page:has(#msf) .t33-article-media { display: none; }
body.page:has(#msf) .t33-page-main #msf { margin-top: -70px; z-index: 5; }