html body[data-screen="module"] #app #main#main .context-selector-guide{display:grid;grid-template-columns:64px minmax(0,1fr) 300px;align-items:center;gap:20px;margin:24px 0 8px;padding:24px;border:1px solid #cce8fa;border-radius:8px;background:#f2f9ff;text-align:left;box-sizing:border-box}
html body[data-screen="module"] #app #main#main .context-selector-symbol{display:grid;place-items:center;width:64px;height:64px;background:#dcf0ff;color:#098be4;border-radius:50%}
html body[data-screen="module"] #app #main#main .context-selector-symbol .icon{width:34px;height:34px}
html body[data-screen="module"] #app #main#main .context-selector-copy{min-width:0}
html body[data-screen="module"] #app #main#main .context-selector-copy h3{margin:0 0 8px;font-size:24px!important;line-height:1.3;color:#103766}
html body[data-screen="module"] #app #main#main .context-selector-copy p{margin:0;font-size:16px!important;line-height:1.5;color:#456789;text-align:left!important}
html body[data-screen="module"] #app #main#main .context-selector-progress{display:flex;align-items:center;justify-content:space-between;gap:0;padding:0;margin:0;list-style:none;min-width:0}
html body[data-screen="module"] #app #main#main .context-selector-progress li{position:relative;flex:1;display:flex;align-items:center;min-width:0}
html body[data-screen="module"] #app #main#main .context-selector-progress li:not(:last-child)::after{content:"";flex:1;border-top:3px dotted #9db5d1;margin:0 6px}
html body[data-screen="module"] #app #main#main .context-selector-progress li:last-child{flex:0 0 36px}
html body[data-screen="module"] #app #main#main .context-selector-progress li>span{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;box-sizing:border-box;border:2px solid #a9c2dd;border-radius:50%;background:#fff;color:#527398;font-size:17px!important;font-weight:750}
html body[data-screen="module"] #app #main#main .context-selector-progress li.is-current>span{background:#159be9;border-color:#159be9;color:#fff;box-shadow:0 0 0 4px #d9eeff}
html body[data-screen="module"] #app #main#main .context-selector-progress li.is-complete:not(.is-current)>span{background:#e1f6ec;border-color:#65b995;color:#17835d}
html body[data-screen="module"] #app #main#main .context-selector-progress .icon{width:19px;height:19px}
html body[data-screen="module"] #app #main#main .context-sequence .context-tabs{position:relative;top:auto;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(215px,1fr))!important;align-items:stretch;gap:14px;padding:12px 5px 20px;margin:0 -5px;background:#fff;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b5d8eb transparent;scroll-padding:5px}
html body[data-screen="module"] #app #main#main .context-tabs [data-context-tab="0"]{--tab-accent:#0a8ff0;--tab-soft:#eff8ff;--tab-edge:#b8dffa;--reference-context:0}
html body[data-screen="module"] #app #main#main .context-tabs [data-context-tab="1"]{--tab-accent:#1fba70;--tab-soft:#f0fcf6;--tab-edge:#bbecd5;--reference-context:1}
html body[data-screen="module"] #app #main#main .context-tabs [data-context-tab="2"]{--tab-accent:#954de9;--tab-soft:#f9f3ff;--tab-edge:#e2cffa;--reference-context:2}
html body[data-screen="module"] #app #main#main .context-tabs [data-context-tab="3"]{--tab-accent:#ec9909;--tab-soft:#fffaf1;--tab-edge:#f6dfb5;--reference-context:3}
html body[data-screen="module"] #app #main#main .context-tabs [data-context-tab="4"]{--tab-accent:#24b85a;--tab-soft:#f0fbf4;--tab-edge:#c2ecd0;--reference-context:4}
html body[data-screen="module"] #app #main#main .context-sequence .context-tabs button[data-context-tab]{display:block!important;position:relative;box-sizing:border-box;height:202px;min-height:202px!important;min-width:0;aspect-ratio:auto!important;grid-column:auto!important;padding:16px!important;border:1px solid var(--tab-edge)!important;border-radius:8px!important;background:var(--tab-soft)!important;background-image:none!important;color:#143b65!important;white-space:normal;text-align:left;outline:none!important;box-shadow:0 2px 5px #154a7110!important;transition:translate .18s ease,box-shadow .18s ease,border-color .18s ease!important;overflow:hidden;scale:1!important}
html body[data-screen="module"] #app #main#main .context-sequence .context-tabs button[data-context-tab]>*{opacity:1!important;pointer-events:none}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] [data-context-tab-status]{position:absolute;top:16px;left:16px;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border:0;border-radius:8px;background:var(--tab-accent);color:#fff;font-size:24px!important;font-weight:800;box-shadow:inset 0 2px 0 #ffffff40,0 4px 10px #20496c12}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] [data-context-tab-status] .icon{width:25px;height:25px}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-copy{position:absolute;top:16px;left:16px;right:16px;display:block;width:auto;margin:0;min-width:0}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-copy b{display:block;margin:10px 0 22px 56px;color:#12365f!important;font-size:16px!important;line-height:1.35;white-space:nowrap}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-copy small{display:block;margin:0;width:calc(100% - 85px);min-width:102px;color:#365a7e;font-size:14px!important;line-height:1.5;font-weight:500;overflow-wrap:normal;text-align:left!important}
/* Reuse only the illustration region of each existing reference tile. */
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-art{position:absolute;right:8px;top:58px;width:91px;height:102px;border-radius:50%;background-image:url('/static/context-activities-reference-v2.png');background-repeat:no-repeat;background-size:1284px 136.5px;background-position:calc(-159px - var(--reference-context)*256.8px) -20.25px}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab="1"] .context-tab-art{width:81px;background-position:-426.3px -20.25px;filter:hue-rotate(-75deg)}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-meter{position:absolute;left:16px;bottom:20px;width:92px;height:9px;border-radius:5px;background:#dce5ee;overflow:hidden}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-meter>span{display:block;width:0;height:100%;background:var(--tab-accent);border-radius:inherit;transition:width .18s ease}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab][aria-selected="true"] .context-tab-meter>span{width:50%}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab].is-complete .context-tab-meter>span{width:100%}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-arrow{position:absolute;right:14px;bottom:12px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--tab-accent);background:color-mix(in srgb,var(--tab-accent) 14%,white)}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-arrow .icon{width:20px;height:20px}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab][aria-selected="true"]{border-color:var(--tab-accent)!important;outline:1px solid var(--tab-accent)!important;outline-offset:-1px!important;translate:0 -2px!important;box-shadow:0 3px 0 color-mix(in srgb,var(--tab-accent) 24%,white),0 8px 14px #174b7020!important}
@media(hover:hover) and (pointer:fine){html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab]:not(:disabled):hover{border-color:var(--tab-accent)!important;translate:0 -2px!important;box-shadow:0 5px 12px #174b7026!important}}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab]:focus-visible{outline:3px solid var(--tab-accent)!important;outline-offset:2px!important}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab]:not(:disabled):active{translate:0 1px!important;box-shadow:inset 0 2px 4px #174b7018!important}
html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab]:disabled{opacity:.65;translate:none!important;cursor:wait;box-shadow:none!important}
html body[data-screen="module"] #app #main#main .context-sequence .context-position{text-align:left!important}
@media(max-width:1050px){html body[data-screen="module"] #app #main#main .context-selector-guide{grid-template-columns:56px minmax(0,1fr);gap:16px;padding:20px}html body[data-screen="module"] #app #main#main .context-selector-symbol{width:56px;height:56px}html body[data-screen="module"] #app #main#main .context-selector-progress{grid-column:2;width:min(100%,320px)}html body[data-screen="module"] #app #main#main .context-selector-copy h3{font-size:22px!important}}
@media(max-width:520px){html body[data-screen="module"] #app #main#main .context-selector-guide{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px}html body[data-screen="module"] #app #main#main .context-selector-symbol{width:40px;height:40px}html body[data-screen="module"] #app #main#main .context-selector-symbol .icon{width:24px;height:24px}html body[data-screen="module"] #app #main#main .context-selector-copy h3{font-size:19px!important}html body[data-screen="module"] #app #main#main .context-selector-copy p{font-size:14px!important}html body[data-screen="module"] #app #main#main .context-selector-progress{grid-column:1/-1;width:100%;margin-top:4px}html body[data-screen="module"] #app #main#main .context-sequence .context-tabs{grid-template-columns:repeat(5,230px)!important}}
@media(prefers-reduced-motion:reduce){html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab][role="tab"][aria-selected]{transition:none!important;translate:none!important}html body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-meter>span{transition:none}}
html.reduce-motion body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab][role="tab"][aria-selected],html body.reduce-motion[data-screen="module"] #app #main#main .context-tabs button[data-context-tab][role="tab"][aria-selected]{transition:none!important;translate:none!important}
html.reduce-motion body[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-meter>span,html body.reduce-motion[data-screen="module"] #app #main#main .context-tabs button[data-context-tab] .context-tab-meter>span{transition:none}