/* QF3's explainer layout and controls, with this site's existing Inter typography. */
.wp-explainer { width: 100%; max-width: var(--overview-box-width); margin: 0 auto; padding: 16px 18px 14px; border: 2px dotted #d4d4d4; border-radius: 15px; background: #fff; }
.wp-explainer button { font-family: inherit; }
.in-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; }
.in-prev,.in-next { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #e6e6e6; border-radius: 8px; background: #fff; color: #6b7280; cursor: pointer; transition: background .2s,color .2s; }
.in-prev:hover,.in-next:hover { background: #f3f4f6; color: #111; }
.wp-explainer button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.in-words { display: grid; text-align: center; align-content: center; min-height: 108px; }
.section .in-title { text-align: center; display: block; margin: 0; color: #222; font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: normal; }
.section .in-title::after { display: none; }
.in-lede { margin: 4px 0 0; color: #444; font-size: 16px; line-height: 24px; text-wrap: balance; }
.in-lede--compact { font-size: 14px; line-height: 22px; }
.in-sentence { display: block; }
.in-title--single-line { white-space: nowrap; }
.in-lede strong { font-weight: 700; }
.in-stage { position: relative; overflow: hidden; aspect-ratio: 1200/540; cursor: grab; background: #fff; touch-action: pan-y; }
.in-stage svg { display: block; width: 100%; height: 100%; }
.in-stage text { font-family: var(--font-sans); }
.in-stage.dragging { cursor: grabbing; }
.in-scrub { display: grid; grid-template-columns: minmax(0,1fr) auto; width: min(100%,660px); gap: 18px; align-items: start; margin: 10px auto 0; }
.in-buttons { display: flex; gap: 6px; }
.in-play,.in-replay { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #555; border-radius: 50%; background: #555; color: #fff; cursor: pointer; transition: background .15s,border-color .15s,color .15s; }
.in-play:hover { background: #333; border-color: #333; }
.in-replay { border-color: #ddd; background: #fff; color: #666; }
.in-replay:hover { border-color: #aaa; background: #f7f7f7; }
.in-track { position: relative; display: flex; gap: 20px; align-items: center; height: 32px; margin-top: -3px; cursor: pointer; touch-action: none; }
.in-chap { display: flex; flex: 1 1 0; gap: 3px; }
.in-seg { position: relative; flex: 1; height: 10px; overflow: hidden; border-radius: 999px; background: #e3e5e8; transition: height .15s; }
.in-track:hover .in-seg,.in-track.dragging .in-seg { height: 12px; }
.in-seg i { position: absolute; inset: 0 auto 0 0; background: #94969e; width: 0; border-radius: inherit; }
.in-seg b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; }
.in-knob { position: absolute; top: 9px; z-index: 1; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #ff8486; box-shadow: 0 0 0 2px #fff; pointer-events: none; transition: transform .15s; }
.in-track:hover .in-knob,.in-track.dragging .in-knob { transform: scale(1.3); }
.in-parts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.in-part { padding: 0; border: 0; background: none; color: #9aa1a9; font: inherit; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; transition: color .3s; }
.in-part:hover { color: #4b5563; }
.in-part.on { color: #222; font-weight: 600; }
.wp-explainer :focus-visible { outline: 2px solid #b95660; outline-offset: 3px; }
.illustration-note { font-size: .78rem; color: #6b7280; margin: 14px 0 0; }
.illustration-note summary { cursor: pointer; text-align: center; }
.illustration-note[open] summary { margin-bottom: 10px; }
.illustration-note p { margin: 8px 0; line-height: 1.6; }
.wp-video { margin: 17px 0 0; color: #66716c; text-align: center; font-size: .82rem; }
.wp-video summary { cursor: pointer; }
.method-details { border-top: 1px solid var(--border); margin-top: 1.5rem; padding-top: 1rem; }
.method-details summary { cursor: pointer; color: #4d6056; font-weight: 500; }
.method-details[open] summary { margin-bottom: 1rem; }
.method-details p { font-size: .93rem; }
.result-switch { display: flex; align-items: center; gap: 6px; margin: 1.5rem 0 1rem; font-size: .85rem; }
.result-switch span { margin-right: 8px; color: #66716c; }
.result-switch button { border: 1px solid #dce3df; border-radius: 5px; min-width: 42px; padding: 6px 12px; background: white; }
.result-switch button[aria-pressed=true] { background: #32776a; border-color: #32776a; color: #fff; }
.result-panel[hidden] { display: none; }
.data-table caption { caption-side: top; text-align: left; padding: 0 0 10px; color: #66716c; font-size: .8rem; }
.result-panel tbody th[scope=row], .diagnostic-table tbody th[scope=row] { text-align: left; font-weight: 500; }
.result-panel th, .result-panel td { padding: .65rem .7rem; }
.diagnostic-table { font-size: .77rem; }
.diagnostic-table td { white-space: nowrap; }
section[id] { scroll-margin-top: 90px; }
@media(max-width: 600px) {
 .wp-explainer { padding: 12px; }
 .in-stage { margin: 0 -12px; }
 .in-words { min-height: 154px; }
 .section .in-title { font-size: 17px; line-height: 23px; }
 .section .in-title--single-line { font-size: clamp(14px,3.8vw,17px); }
 .in-lede { font-size: 14px; line-height: 20px; }
 .in-head { gap: 8px; }
 .in-part { font-size: 10px; line-height: 15px; }
 .in-scrub { gap: 8px; }
 .in-track,.in-parts { gap: 12px; }
 .wp-video video { width: 100% !important; }
 .result-panel table { min-width: 500px; }
}
@media(prefers-reduced-motion: reduce) { .wp-explainer * { transition: none; } }