:root{--primary:#315bc7;--primary2:#315bc7;--soft:#eef3ff}
html:not([data-theme="dark"]) body{background:#f3f5fa!important}
html:not([data-theme="dark"]) .hero{background:linear-gradient(115deg,#fff 25%,#eef3ff 75%,#fff0df)!important;box-shadow:0 8px 35px #233b7205}
html:not([data-theme="dark"]) .step-mascot{background:linear-gradient(155deg,#eef3ff,#fffaf5)!important}
html:not([data-theme="dark"]) .title-accent{color:#315bc7!important}
html:not([data-theme="dark"]) .primary,html:not([data-theme="dark"]) .progress-fill{background:#315bc7!important}
html:not([data-theme="dark"]) .model-capsule{background:#ffffffc9;color:#596278}
html:not([data-theme="dark"]) .wizard-actions button:not(.secondary){background:#315bc7!important;color:white}
body::before,body::after{box-shadow:none!important}
.studio-header-art{position:absolute;right:30px;top:105px;width:200px;height:130px;object-fit:contain;pointer-events:none}
@media(min-width:1101px){.hero h1.editorial-title,.hero .activity-description,.hero .prompt-disclaimer{max-width:calc(100% - 240px)!important}.hero .hero-brand>div:last-child{width:100%}}
@media(max-width:1100px){.studio-header-art{display:none}}
html[data-theme="dark"] .hero{background:linear-gradient(115deg,#292534,#302b40 70%,#3a2f3c)!important}
html[data-theme="dark"] .step-mascot{background:linear-gradient(155deg,#332e43,#302b3b 70%,#392e3b)!important}
html[data-theme="dark"] .studio-header-art{filter:brightness(.9)}
/* Clearly outlined edit and restart actions in both themes. */
html .secondary:is(.edit-choices,[onclick="startAgain()"]){border:2px solid #284da8;background:#fff;color:#284da8;font-weight:700;min-height:46px;padding:11px 18px;border-radius:12px;box-shadow:0 2px 4px #233b7210}
html .secondary:is(.edit-choices,[onclick="startAgain()"]):hover{background:#edf2ff;filter:none}
html[data-theme="dark"] #resultCard .secondary:is(.edit-choices,[onclick="startAgain()"]){border-color:#c3b0e0;background:#302a3e;color:#f0e8fc;box-shadow:none}
html[data-theme="dark"] #resultCard .secondary:is(.edit-choices,[onclick="startAgain()"]):hover{background:#463957}
html .secondary:is(.edit-choices,[onclick="startAgain()"]):focus-visible{outline:3px solid #284da8;outline-offset:3px}
html[data-theme="dark"] .secondary:is(.edit-choices,[onclick="startAgain()"]):focus-visible{outline-color:#d7caec}
html #resultCard .secondary:is(.edit-choices,[onclick="startAgain()"]){border-color:#284da8!important}
html[data-theme="dark"] #resultCard .secondary:is(.edit-choices,[onclick="startAgain()"]){border-color:#c3b0e0!important}
/* Match WebAI's masthead spacing for forms, preparation and results. */
.container>.hero{margin-bottom:0}
.container>.progress-shell,.container>#resultCard,.container>#preparationScreen{margin-top:24px}
@media(max-width:650px){.container>.progress-shell,.container>#resultCard,.container>#preparationScreen{margin-top:20px}}
/* Consistent, uncropped companion artwork at each breakpoint. */
.step-mascot img{display:block;height:auto;max-width:100%;object-fit:contain;flex:none}
@media(min-width:651px){.step-card.active-step .step-mascot{align-self:stretch;position:static;justify-content:flex-start;min-height:0;height:auto;padding:28px 24px}.step-mascot img{width:min(100%,330px);max-height:360px}}
@media(max-width:650px){.step-mascot{grid-template-columns:76px minmax(0,1fr);align-items:center}.step-mascot img{width:76px;height:auto;max-height:120px;align-self:center}}