#blush-form { border-block: 1px solid var(--line-strong); padding: 24px 0; margin: 24px 0; }
#blush-form fieldset { padding: 0; border: 0; margin: 0 0 20px; }
#blush-form legend, .occasion { font-weight: 600; margin-bottom: 12px; }
#blush-form fieldset label { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
#blush-form input { accent-color: var(--accent); width: 20px; height: 20px; }
.occasion { display: block; }
#blush-form select, #blush-form button { font: inherit; min-height: 48px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-md); }
#blush-form select { background: var(--surface); color: var(--text); margin-right: 12px; }
#blush-form button { background: var(--accent-deep); color: var(--on-accent); cursor: pointer; }
.placement-layout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.placement-layout figure { margin: 0; }
.placement-layout figcaption { color: var(--text-2); font-size: 13px; }
.face, .features { fill: none; stroke: var(--text-2); stroke-width: 2; stroke-linecap: round; }
#blush-marks { fill: var(--accent); fill-opacity: .5; }
#result { scroll-margin-top: 24px; }
#result h2 { margin-top: 24px; }
@media (max-width: 500px) { .placement-layout { grid-template-columns: 1fr; gap: 16px; } .placement-layout figure { max-width: 200px; margin: auto; } #blush-form button { display: block; width: 100%; margin-top: 16px; } }
/* Instructions stay visible when results change or the page is captured. */
main.guide h2 { animation: none; }