/* HQ v4.1 • design-led, behavior-preserving presentation layer
 * Limited to discovery pages + explicitly opted-in math/science workspaces.
 * Functional interactions, submissions, and student/teacher boundaries remain in existing engines.
 */
:root{--hq5-navy:#081a4b;--hq5-royal:#075bed;--hq5-cyan:#06c9ff;--hq5-gold:#ffd42e;--hq5-violet:#7249f9;--hq5-green:#0cac75;--hq5-pink:#ed3f87;--hq5-surface:#ffffff;--hq5-deep:#102b5e;--hq5-shadow:0 15px 35px rgba(8,34,89,.16)}
body.hq5-vibrant{background:linear-gradient(115deg,#e7f2ff 0%,#fff 47%,#fff5e4 100%)}
body.hq5-vibrant .site-header{background:linear-gradient(100deg,#061b4b,#06286b 73%,#10275b);border-bottom:5px solid #ffd42e}
body.hq5-vibrant .site-header .brand img{height:49px;filter:brightness(1.14) saturate(1.25)}
/* Homepage: retain working links and authentic screenshots; add vibrant framing, not fictitious UI. */
body.hq5-home .hero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 85% 5%,#03b8ff94,transparent 45%),radial-gradient(circle at 8% 95%,#8c76ff79,transparent 50%),linear-gradient(110deg,#e3f5ff 0%,#b5e4ff 53%,#1176fa 100%)!important;border:1px solid #87c7ff!important;border-bottom:6px solid var(--hq5-gold)!important;box-shadow:0 24px 54px #0040a72d!important;min-height:455px}
body.hq5-home .hero:before,body.hq5-home .hero:after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
body.hq5-home .hero:before{width:620px;height:620px;background:radial-gradient(circle,#03acff52 0%,#367aff2c 55%,transparent 72%);right:-160px;top:-170px}
body.hq5-home .hero:after{width:570px;height:570px;background:radial-gradient(circle,#fbe05470 0%,transparent 70%);bottom:-430px;left:-160px}
body.hq5-home .hero .eyebrow{font-size:12px!important;color:#0869d1!important}
body.hq5-home .hero h1{font-size:clamp(42px,4.4vw,71px);max-width:550px;letter-spacing:-.065em;line-height:1.005;color:#06245a!important;text-shadow:0 2px 0 #ffffff83}
body.hq5-home .hero .lead{font-size:clamp(16px,1.36vw,19px);max-width:500px;color:#163968!important;line-height:1.55}
body.hq5-home .hero .actions .btn{font-weight:900;font-size:15px;min-height:49px;border-radius:13px;box-shadow:0 9px 20px #092c7b30}
body.hq5-home .hero .actions .btn.btn-primary{background:#075dec!important}
body.hq5-home .hero .actions .btn.btn-secondary{background:var(--hq5-gold)!important;color:#092a62!important}
body.hq5-home .hero .trust{margin-top:17px;gap:8px}
body.hq5-home .hero .trust .pill{font-size:12px;font-weight:850;background:#ffffffb6;color:#13529e!important;border:1px solid #a9cfff}
body.hq5-home .hero .hq-v3-showcase{position:relative;z-index:1;filter:drop-shadow(0 14px 18px #001b4b40)}
body.hq5-home .hero .hq-v3-laptop{border:8px solid #061d4f!important;border-radius:18px 18px 6px 6px!important;box-shadow:0 19px 45px #00184255!important}
body.hq5-home .hero .hq-v3-device-tag{background:#ffd737!important;color:#122750!important;border:2px solid #edb80b!important;box-shadow:0 8px 20px #08285038}
body.hq5-home .hero .hq-v3-showcase-caption{font-weight:800;color:#08336f!important;text-shadow:0 2px 2px #ffffffaa}
body.hq5-home .hq4-featured-intro{margin-top:35px}
body.hq5-home .hq4-featured-intro h2{font-weight:950;font-size:clamp(27px,2.5vw,38px)!important}
body.hq5-home .hq4-feature-grid{gap:17px}
body.hq5-home .hq4-feature{border-radius:20px!important;border-width:2px!important;border-top-width:6px!important;box-shadow:0 14px 26px #0b38711d!important;min-height:272px}
body.hq5-home .hq4-feature-copy{padding:17px 17px 9px!important}
body.hq5-home .hq4-feature h3{font-size:20px!important;line-height:1.18}
body.hq5-home .hq4-feature p{font-size:14px!important}
body.hq5-home .hq4-feature-icon{padding:9px 17px 10px;font-size:40px}
body.hq5-home .hq4-feature-action{font-size:14px;min-height:46px;display:grid;place-items:center}
/* Decorative authentic feature illustrations. These are explicitly marked as illustrations, not mock interactive controls. */
body.hq5-home .hq5-card-visual{margin:7px 12px 12px;border-radius:14px;min-height:116px;border:2px solid color-mix(in srgb,var(--accent) 22%,#fff);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #ffffffa8}
body.hq5-home .hq5-card-visual small{position:absolute;bottom:4px;right:8px;font-size:9px;font-weight:800;opacity:.68}
body.hq5-home .hq5-game{background:linear-gradient(135deg,#0b1957,#3634be 69%,#6219a3);color:#fff;padding:12px;display:flex;flex-direction:column;gap:7px}
body.hq5-home .hq5-game strong{font-size:13px;color:#fdf4ac;letter-spacing:.04em}
body.hq5-home .hq5-game .hq5-game-choices{width:90%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
body.hq5-home .hq5-game .hq5-game-choices i{height:27px;border-radius:6px;background:#1774ff;color:#fff;display:grid;place-items:center;font-size:11px;font-style:normal;font-weight:900}
body.hq5-home .hq5-game .hq5-game-choices i:nth-child(2){background:#16a957}
body.hq5-home .hq5-game .hq5-game-choices i:nth-child(3){background:#eaa50c}
body.hq5-home .hq5-game .hq5-game-choices i:nth-child(4){background:#e32e83}
body.hq5-home .hq5-flash{background:linear-gradient(125deg,#70dcff,#e5fbff);padding:12px}
body.hq5-home .hq5-flash-inner{width:88%;min-height:83px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #ffffff;border-radius:12px;background:linear-gradient(135deg,#0b55e4,#0d85eb);color:#fff;box-shadow:0 8px 15px #0d50b34a}
body.hq5-home .hq5-flash-inner strong{font-size:clamp(18px,2vw,25px);line-height:1.1;color:white}
body.hq5-home .hq5-flash-inner span{font-size:11px;font-weight:800;color:#fff7af}
/* Two real software previews in the main hero: the classroom display and a verified writing/quiz UI. */
body.hq5-home .hq5-hero-mini{position:absolute;z-index:3;right:0;bottom:2%;width:38%;max-width:225px;min-width:130px;border:4px solid #fff;border-radius:15px;transform:rotate(-5deg);background:#fff8d9;box-shadow:0 15px 24px #001a4b55;pointer-events:none;overflow:hidden}
body.hq5-home .hq5-hero-mini img{display:block;width:100%;aspect-ratio:1.8;object-fit:cover;object-position:top left}
body.hq5-home .hq5-hero-mini figcaption{font-size:10px;font-weight:950;padding:3px 8px;color:#233e71}
body.hq5-home .hq-v3-tool-gallery,body.hq5-home .hq-v3-classroom-context{border-width:2px!important;border-color:#acc7ff!important;box-shadow:0 15px 33px #122d7430!important}
body.hq5-home .hq-v3-tool-gallery{background:linear-gradient(120deg,#d1eaff,#ead7ff 56%,#d3fff0)!important}
body.hq5-home .hq-v3-tool-gallery .hq-v3-tool-card{box-shadow:0 12px 25px #18336b20}
body.hq5-home .home-featured{background:linear-gradient(135deg,#e9f5ff,#e8e9ff 70%,#fce9f1)!important;border-radius:23px;box-shadow:0 14px 30px #0c356c20}
/* All directories should have saturated hero and lively cards without altering their links. */
body.hq5-directory .page-hero,body.hq5-directory .stem-hero.hq-v3-directory-head{background:radial-gradient(circle at 81% 0%,#09adfd52,transparent 40%),linear-gradient(110deg,#d4efff,#b5ddff 63%,#fdf0b7)!important;border:2px solid #9bcbf9!important;border-bottom:6px solid #ffce22!important;border-radius:24px!important;box-shadow:0 18px 40px #0d428329!important;padding:25px 30px!important}
body.hq5-directory .page-hero h1,body.hq5-directory .stem-hero h1{color:#082f75!important;font-size:clamp(31px,4vw,52px);line-height:1.1;letter-spacing:-.047em;font-weight:950}
body.hq5-directory .hq-v3-directory-device,body.hq5-directory .hq-experience-hero-image{border-radius:18px;box-shadow:0 14px 24px #09265943;transform:rotate(1.6deg)}
body.hq5-directory .tool-card,body.hq5-directory .tool-hub-card{border-width:2px!important;border-radius:18px!important;box-shadow:0 14px 29px #0f39801b!important;background:linear-gradient(155deg,#fff,#f3f8ff)!important;transition:transform .18s,box-shadow .18s}
body.hq5-directory .tool-card:hover,body.hq5-directory .tool-hub-card:hover{transform:translateY(-4px);box-shadow:0 20px 30px #0c37832d!important}
body.hq5-directory .grid-3 .tool-card:nth-child(6n+1){border-top-color:#ef3881!important;background:linear-gradient(150deg,#fff,#fff0f6)!important}
body.hq5-directory .grid-3 .tool-card:nth-child(6n+2){border-top-color:#187afe!important;background:linear-gradient(150deg,#fff,#ecf6ff)!important}
body.hq5-directory .grid-3 .tool-card:nth-child(6n+3){border-top-color:#814cf1!important;background:linear-gradient(150deg,#fff,#f2ecff)!important}
body.hq5-directory .grid-3 .tool-card:nth-child(6n+4){border-top-color:#11ac75!important;background:linear-gradient(150deg,#fff,#e7fff5)!important}
body.hq5-directory .grid-3 .tool-card:nth-child(6n+5){border-top-color:#f0a800!important;background:linear-gradient(150deg,#fff,#fff8d9)!important}
body.hq5-directory .grid-3 .tool-card:nth-child(6n+6){border-top-color:#00afd4!important;background:linear-gradient(150deg,#fff,#eaf9ff)!important}
body.hq5-directory .tool-card h3{color:#093d91!important;font-weight:900}
body.hq5-directory .tool-card .btn{box-shadow:0 6px 12px #0932691e}
body.hq5-directory .hq4-filter-bar{border:1px solid #a9ccfb;padding:10px;border-radius:17px;background:#e5f2ff;box-shadow:0 7px 15px #1453ae12}
body.hq5-directory .hq4-filter-bar button[aria-pressed="true"]{background:#075deb!important;color:#fff!important}
/* Existing live math and science interfaces: larger, more colorful real controls + output surfaces. */
body.hq5-studio{--hq5-tool:#0b71ec;--hq5-tool2:#6847f4;--hq5-tool-pale:#e5f3ff;background:linear-gradient(115deg,#e8f4ff 0%,#f7faff 65%,#fff8dd 100%)}
body.hq5-studio.hq5-science{--hq5-tool:#078f89;--hq5-tool2:#20b272;--hq5-tool-pale:#e3faf6}
body.hq5-studio.hq5-cer{--hq5-tool:#6351e7;--hq5-tool2:#058e82;--hq5-tool-pale:#f2efff}
body.hq5-studio.hq5-phenomena{--hq5-tool:#067fa6;--hq5-tool2:#8b52e9;--hq5-tool-pale:#e8f7ff}
body.hq5-studio.hq5-graph{--hq5-tool:#0667df;--hq5-tool2:#0c9d94;--hq5-tool-pale:#e5f4ff}
body.hq5-studio .stem-shell{max-width:1350px;margin:auto}
body.hq5-studio .stem-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;background:radial-gradient(circle at 83% -12%,color-mix(in srgb,var(--hq5-tool2) 53%,transparent),transparent 39%),linear-gradient(110deg,#062762,#064d9e 62%,var(--hq5-tool));padding:31px 35px;margin:22px 0 19px;box-shadow:0 16px 32px #0b326f29;border:2px solid #83c5ff;border-bottom:6px solid #ffc927;grid-template-columns:minmax(0,1fr) minmax(240px,305px);align-items:center;gap:18px}
body.hq5-studio .stem-hero:after{content:"";position:absolute;right:-35px;bottom:-155px;width:350px;height:350px;border:35px solid #ffffff10;border-radius:50%;pointer-events:none;z-index:-1}
body.hq5-studio .stem-hero h1{color:#fff!important;font-size:clamp(36px,4.5vw,59px);line-height:1.02;letter-spacing:-.045em;text-shadow:0 2px 10px #00000025;margin:10px 0 12px}
body.hq5-studio .stem-hero .eyebrow{color:#ffdd63!important;font-size:12px;letter-spacing:.1em;font-weight:900}
body.hq5-studio .stem-hero p{color:#edf7ff!important;font-size:clamp(15px,1.4vw,18px);line-height:1.5;max-width:800px}
body.hq5-studio .stem-hero .stem-hero-card{background:#ffffffed;border:3px solid #ffffff90;box-shadow:0 11px 25px #00000032;border-radius:17px;padding:18px}
body.hq5-studio .stem-hero .stem-hero-card strong{color:#0a387d;font-size:18px;font-weight:950}
body.hq5-studio .stem-hero .stem-hero-card p{color:#405675!important;font-size:14px}
body.hq5-studio .stem-layout{grid-template-columns:minmax(0,1fr) minmax(250px,315px);gap:18px}
body.hq5-studio .stem-card{border:2px solid #b9daf7;border-top:6px solid var(--hq5-tool);border-radius:23px;background:#fff;box-shadow:0 12px 30px #0e397f1b;padding:24px;min-width:0}
body.hq5-studio .stem-card>h2,body.hq5-studio .stem-panel h2{color:#113b82;font-size:clamp(23px,2.3vw,30px);line-height:1.17;font-weight:950;letter-spacing:-.025em}
body.hq5-studio .stem-side .stem-card{background:linear-gradient(160deg,#ffffff,var(--hq5-tool-pale));border-top-color:var(--hq5-tool2)}
body.hq5-studio .stem-side .stem-card h3{color:#0e4387;font-size:21px;margin:3px 0 16px}
body.hq5-studio .stem-side-list{display:grid;gap:11px}
body.hq5-studio .stem-side-list>div{background:#fff;border:1px solid #c7dbed;border-left:5px solid #0b71e6;border-radius:11px;padding:12px;box-shadow:0 5px 12px #0b337014}
body.hq5-studio .stem-side-list>div:nth-child(3n+2){border-left-color:#12b376}
body.hq5-studio .stem-side-list>div:nth-child(3n+3){border-left-color:#914cf1}
body.hq5-studio .stem-side-list strong{color:#174b91;font-weight:900}
body.hq5-studio .stem-field label{color:#17426e;font-size:13px;letter-spacing:.008em}
body.hq5-studio .stem-field :is(input,select,textarea){background:#f9fcff;border:2px solid #c5d9f0;border-radius:12px;min-height:47px;box-shadow:inset 0 1px 0 #ffffff;font-size:16px}
body.hq5-studio .stem-field :is(input,select,textarea):focus-visible{outline:3px solid #ffd15a!important;border-color:#2467e3!important;outline-offset:2px}
body.hq5-studio button{touch-action:manipulation}
body.hq5-studio .stem-toolbar{flex-wrap:wrap;gap:10px}
body.hq5-studio .stem-toolbar .btn,body.hq5-studio .stem-submit{border-radius:12px;min-height:47px;font-weight:850;box-shadow:0 5px 12px #113e741b}
body.hq5-studio .stem-submit,body.hq5-studio .stem-toolbar .btn-primary{background:linear-gradient(120deg,#0966e8,#0048b9);color:#fff}
body.hq5-studio :is(.stem-results.show,.stem-results[style*="display: block"],.math2-preview:not([hidden])){border-radius:15px;max-width:100%}
body.hq5-studio .stem-output{background:linear-gradient(155deg,#fbfdff,#eef7ff);border:1px solid #c1dbf4;border-radius:15px;box-shadow:inset 0 1px 0 #fff}
body.hq5-studio .stem-stage{border:2px solid #b8d8ef;border-radius:18px;box-shadow:inset 0 2px 12px #0d448211;background:#f9fcff;min-height:250px}
body.hq5-studio .stem-panel{min-width:0}
/* Math Manipulatives — models visually dominate controls while existing touch logic stays intact. */
body.hq5-studio.hq5-manip .stem-shell{max-width:1350px}
body.hq5-studio.hq5-manip .stem-shell>.stem-card{padding:18px;border-top-color:#ffc530}
body.hq5-studio.hq5-manip .stem-tabbar{display:flex;flex-wrap:wrap;gap:9px;background:#eaf3ff;border:1px solid #b8d5fa;border-radius:16px;padding:11px;margin-bottom:18px}
body.hq5-studio.hq5-manip .stem-tab{--tab:#0c6aed;background:#fff!important;color:#1c3b70!important;border:2px solid #c5d6f0!important;border-radius:12px;box-shadow:0 4px 8px #002a7521;min-height:50px;padding:10px 14px;font-size:15px;font-weight:900;transition:transform .15s}
body.hq5-studio.hq5-manip .stem-tab[data-panel="earlyCounting"]{--tab:#0275ef}
body.hq5-studio.hq5-manip .stem-tab[data-panel="placeValue"]{--tab:#0aa978}
body.hq5-studio.hq5-manip .stem-tab[data-panel="fractions"]{--tab:#0b65ec}
body.hq5-studio.hq5-manip .stem-tab[data-panel="numberline"]{--tab:#13a19a}
body.hq5-studio.hq5-manip .stem-tab[data-panel="counters"]{--tab:#ff981c}
body.hq5-studio.hq5-manip .stem-tab[data-panel="coordinate"]{--tab:#7d50ef}
body.hq5-studio.hq5-manip .stem-tab[data-panel="tiles"]{--tab:#de438c}
body.hq5-studio.hq5-manip .stem-tab.active{background:var(--tab)!important;color:#fff!important;border-color:var(--tab)!important;box-shadow:0 8px 17px color-mix(in srgb,var(--tab) 30%,transparent);transform:translateY(-1px)}
body.hq5-studio.hq5-manip .stem-tab.active .hq-grade-label{color:#fff!important;opacity:1}
body.hq5-studio.hq5-manip .stem-panel.active{background:linear-gradient(150deg,#fff 0%,#f2faff 100%);border:1px solid #d3e8ff;border-radius:18px;padding:clamp(13px,2vw,26px)}
body.hq5-studio.hq5-manip .stem-panel.active>h2{background:linear-gradient(90deg,#0b62d6,#6254d9);background-clip:text;-webkit-background-clip:text;color:transparent!important}
body.hq5-studio.hq5-manip .stem-panel.active .stem-stage{min-height:300px}
body.hq5-studio.hq5-manip .fraction-bar{height:68px;border:2px solid #1f62bf;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px #174b7a15}
body.hq5-studio.hq5-manip #fractionCompare{font-weight:850;font-size:18px;background:#e7f3ff}
body.hq5-studio.hq5-manip .counter-stage,body.hq5-studio.hq5-manip .tile-stage{min-height:350px}
body.hq5-studio.hq5-manip #coordSvg,body.hq5-studio.hq5-manip #nlSvg{max-width:100%;height:auto}
/* Graph & Data Lab: large true graph, controls secondary; retain actual SVG/print functionality. */
body.hq5-studio.hq5-graph .stem-layout{grid-template-columns:minmax(0,1fr) minmax(235px,290px)}
body.hq5-studio.hq5-graph #gdResults.show{display:block}
body.hq5-studio.hq5-graph #gdResults .stem-output{padding:18px;background:#fff}
body.hq5-studio.hq5-graph #hqChartWrap{min-width:0;border:2px solid #c6e0f9;border-radius:16px;padding:12px;background:linear-gradient(#ffffff,#f4fbff);box-shadow:inset 0 3px 15px #0d4d9010}
body.hq5-studio.hq5-graph #hqChartWrap svg{max-width:100%}
body.hq5-studio.hq5-graph .hq-chart-options{background:#e6f2ff;border-radius:10px;padding:10px 13px;color:#0c438c}
body.hq5-studio.hq5-graph .analysis-prompts{background:#f0f9ff;border:1px solid #d3e9f9;border-radius:13px;padding:14px}
/* Math Practice: clear existing stages, only real preview generated after user action. */
body.hq5-studio.hq5-practice .math2-layout{grid-template-columns:minmax(0,1fr) minmax(255px,315px)}
body.hq5-studio.hq5-practice .math2-step{background:linear-gradient(120deg,#e8f3ff,#f0e7ff);border:1px solid #cbdcfb;padding:14px;border-radius:15px}
body.hq5-studio.hq5-practice .math2-preview{border:2px solid #b9d6f6;border-top:6px solid #14b677;border-radius:17px;padding:16px}
body.hq5-studio.hq5-practice .math2-preview-head{background:#e8f8f2;border-radius:12px;padding:10px}
body.hq5-studio.hq5-practice .math2-preview-actions{border-top:2px solid #ddeaf8;margin-top:16px;padding-top:15px}
body.hq5-studio.hq5-practice #mpResults{border-top:4px solid #17b87a}
/* Number Talk — genuine generated teacher output is styled, not placed in a fake projector. */
body.hq5-studio.hq5-talk #ntResults.show{border:2px solid #b5d5fb;border-radius:16px;padding:13px;background:#edf6ff}
body.hq5-studio.hq5-talk #ntOutput{font-size:clamp(15px,1.4vw,18px);line-height:1.6}
/* Science: honest student/teacher information boundaries are unchanged. */
body.hq5-studio.hq5-science .stem-card{border-top-color:#0fa87d}
body.hq5-studio.hq5-science .stem-output{background:linear-gradient(145deg,#ffffff,#e8fff7)}
body.hq5-studio.hq5-cer #cerResults .stem-output{border-left:7px solid #6050e4}
body.hq5-studio.hq5-cer #cerOutput h3:nth-of-type(3n+1){color:#205bcf}
body.hq5-studio.hq5-cer #cerOutput h3:nth-of-type(3n+2){color:#058a61}
body.hq5-studio.hq5-cer #cerOutput h3:nth-of-type(3n+3){color:#7853dc}
body.hq5-studio.hq5-phenomena #phResults .stem-output{border-left:7px solid #0aa4ce;background:linear-gradient(145deg,#f9feff,#e8f9ff)}
/* Chromebook, iPad, phones: no hover dependence; no horizontal clipping. */
@media(max-width:1050px){body.hq5-studio .stem-layout,body.hq5-studio.hq5-practice .math2-layout,body.hq5-studio.hq5-graph .stem-layout{grid-template-columns:1fr}body.hq5-studio .stem-side{position:static}body.hq5-home .hq4-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){body.hq5-studio .stem-hero{grid-template-columns:1fr;padding:22px 22px;margin:10px 0 14px}body.hq5-studio .stem-hero h1{font-size:clamp(31px,5.2vw,45px)}body.hq5-studio .stem-hero-card{max-width:none}body.hq5-home .hero{min-height:0}body.hq5-home .hq5-hero-mini{width:30%;bottom:0}}
@media(max-width:680px){body.hq5-home .hero{background:linear-gradient(145deg,#ddf4ff,#85c9ff 78%,#6893f9)!important;padding:20px!important}body.hq5-home .hero h1{font-size:clamp(34px,9vw,49px)}body.hq5-home .hq5-hero-mini{display:none}body.hq5-home .hq4-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body.hq5-home .hq4-feature{min-height:240px}body.hq5-home .hq4-feature-copy{padding:12px 10px!important}body.hq5-home .hq4-feature h3{font-size:16px!important}body.hq5-home .hq4-feature p{font-size:12px!important}body.hq5-home .hq5-card-visual{min-height:85px;margin:6px 8px 9px}body.hq5-home .hq5-game strong{font-size:11px}body.hq5-home .hq5-flash-inner strong{font-size:16px}body.hq5-directory .page-hero{padding:15px!important}body.hq5-studio .stem-hero{padding:20px 16px;margin:6px 0 12px}body.hq5-studio .stem-card{padding:16px}body.hq5-studio .stem-hero .stem-hero-card{padding:13px}body.hq5-studio.hq5-manip .stem-tabbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:9px;gap:7px}body.hq5-studio.hq5-manip .stem-tab{padding:8px 9px;min-width:0;font-size:13px;line-height:1.25}body.hq5-studio.hq5-manip .stem-panel.active{padding:12px}body.hq5-studio.hq5-manip .stem-panel.active .stem-stage{min-height:225px}body.hq5-studio.hq5-graph #gdResults .stem-output{padding:9px}body.hq5-studio.hq5-graph #hqChartWrap{padding:5px}body.hq5-studio .stem-grid-3,body.hq5-studio .stem-grid-2{grid-template-columns:1fr}}
@media(max-width:390px){body.hq5-home .hq4-feature-grid{grid-template-columns:1fr}body.hq5-home .hq4-feature{min-height:0}body.hq5-studio .stem-hero h1{font-size:31px}}
@media(prefers-reduced-motion:reduce){body.hq5-vibrant :is(.hq4-feature,.tool-card,.tool-hub-card,.stem-tab){transition:none!important;transform:none!important}}
@media print{body.hq5-studio .stem-hero,body.hq5-home .hero{box-shadow:none!important;background:#fff!important;color:#111!important}body.hq5-studio .stem-hero h1{color:#111!important}}
/* QA-verified priority: the old site's !important pale hero must never sit behind white title text. */
body.hq5-vibrant.hq5-studio .stem-shell>.stem-hero{background:radial-gradient(circle at 84% -12%,color-mix(in srgb,var(--hq5-tool2) 45%,transparent),transparent 40%),linear-gradient(110deg,#071d53 0%,#064a9d 62%,var(--hq5-tool) 100%)!important;border-color:#64b5ef!important;border-bottom-color:#ffd12d!important}
body.hq5-vibrant.hq5-studio .stem-shell>.stem-hero h1,body.hq5-vibrant.hq5-studio .stem-shell>.stem-hero>div:first-child p{color:#fff!important;text-shadow:0 1px 7px #0019474a!important}
@media(max-width:900px){body.hq5-vibrant.hq5-studio .stem-shell>.stem-hero{background:linear-gradient(132deg,#071e50 0%,#0752a9 65%,var(--hq5-tool) 100%)!important}}
/* Keep the math tool hero a real block on mobile: prior display:contents otherwise erases its dark backdrop. */
@media(max-width:900px){body.hq5-vibrant.hq5-studio.hq5-manip .stem-shell>.stem-hero{display:grid!important;order:0!important;grid-template-columns:1fr!important;align-items:start!important}body.hq5-vibrant.hq5-studio.hq5-manip .stem-shell>.stem-card{order:1!important}body.hq5-vibrant.hq5-studio.hq5-manip .stem-shell>.stem-hero>.stem-hero-card{order:initial!important;margin-top:0!important}}
/* Math Practice also used a mobile display:contents layout; retain a visible, contrasting header. */
@media(max-width:900px){body.hq5-vibrant.hq5-studio.hq5-practice .math2-shell>.math2-hero{display:grid!important;order:0!important;grid-template-columns:1fr!important;overflow:hidden!important}body.hq5-vibrant.hq5-studio.hq5-practice .math2-shell>.math2-layout{order:1!important;min-width:0}body.hq5-vibrant.hq5-studio.hq5-practice .math2-shell>.math2-hero>.math2-hero-card{order:initial!important;margin-top:0!important}}
@media(max-width:620px){body.hq5-vibrant.hq5-studio.hq5-practice .math2-shell,body.hq5-vibrant.hq5-studio.hq5-practice .math2-layout,body.hq5-vibrant.hq5-studio.hq5-practice .math2-builder{min-width:0;max-width:100%;overflow-x:clip}}