#reaction-mode-picker.reaction-mode-picker{width:min(1240px,100%);max-width:none;margin:20px auto 14px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
#reaction-mode-picker .reaction-mode-heading{margin:0 0 18px;text-align:start}
#reaction-mode-picker .reaction-mode-heading h1{margin:5px 0 7px;font-size:clamp(30px,4vw,48px);letter-spacing:-.045em}
#reaction-mode-picker .reaction-mode-heading>p:last-child{margin:0;color:var(--muted);font-size:14px}
#reaction-mode-picker .reaction-mode-options{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
#reaction-mode-picker .reaction-mode-card{min-width:0;min-height:148px;gap:7px;padding:14px 13px;border-color:#29343a;border-radius:7px;background:linear-gradient(150deg,#121719,#0d1114);box-shadow:none;transition:transform .18s,border-color .18s,background .18s}
#reaction-mode-picker .reaction-mode-card:hover,#reaction-mode-picker .reaction-mode-card:focus-visible{transform:translateY(-2px);border-color:#ff825b;background:linear-gradient(150deg,#201715,#111315);outline:none}
#reaction-mode-picker .reaction-mode-card[aria-pressed="true"]{border-color:#ff825b;background:linear-gradient(150deg,#261a16,#151415);box-shadow:inset 0 0 0 1px #ff825b44,0 10px 25px #0003}
#reaction-mode-picker .reaction-mode-card strong{font:700 14px/1.2 var(--display);margin-top:5px;color:#f2f5f6}
#reaction-mode-picker .reaction-mode-card>span:last-child{font-size:10px;line-height:1.45;color:#a5b0b4}
#reaction-mode-picker .reaction-mode-card .mode-orb{width:29px;height:29px;flex:none}
#reaction-mode-picker .reaction-mode-card[data-reaction-mode="mix"]{grid-column:auto}
.selected-test.reaction-mode-preview{width:min(1240px,100%);min-height:0;grid-template-columns:minmax(220px,1.2fr) minmax(180px,.9fr) minmax(190px,.85fr);gap:0;margin:16px auto 30px;padding:0;overflow:hidden;border-color:#303b40;border-radius:8px;background:linear-gradient(140deg,#111719,#0c1012 75%)}
.selected-test .reaction-preview-visual{height:100%;min-height:270px;border:0;border-inline-end:1px solid #303b40;border-radius:0;background:radial-gradient(ellipse at 50% 66%,#26343a,#090d11 74%)}
.selected-test .reaction-preview-visual:before{opacity:.45}
.selected-test .reaction-preview-copy{align-self:stretch;padding:25px 23px;display:flex;flex-direction:column;justify-content:center}
.selected-test .reaction-preview-copy .eyebrow{margin:0 0 8px;color:#ff906c;font-size:9px;letter-spacing:.14em}
.selected-test .reaction-preview-copy h2{font-size:clamp(24px,3vw,34px);color:#f5f7f7}
.selected-test .reaction-preview-copy>p:not(.eyebrow){margin:0;color:#b1bfc2;font-size:12px;line-height:1.55}
.selected-test .reaction-preview-copy .reaction-selection-meta{margin-top:16px;padding-top:13px;border-top:1px solid #293338;color:#84959b;font:700 9px var(--display);letter-spacing:.09em;text-transform:uppercase}
.reaction-selection-controls{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:22px 20px;border-inline-start:1px solid #293338}
.reaction-selection-controls .reaction-display-choice{display:grid;gap:7px;margin:0;padding:0;border:0}
.reaction-selection-controls .reaction-display-choice legend{margin:0 0 7px;padding:0;color:#7f9298;font:700 8px var(--display);letter-spacing:.14em}
.reaction-selection-controls .reaction-display-choice label{min-width:0;display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid #303a3f;border-radius:5px;background:#111619;cursor:pointer}
.reaction-selection-controls .reaction-display-choice label:has(input:checked){border-color:#ff825b;background:#221815}
.reaction-selection-controls .reaction-display-choice input{accent-color:#ff825b;flex:none}
.reaction-selection-controls .reaction-display-choice label>span{min-width:0;display:grid;gap:2px}
.reaction-selection-controls .reaction-display-choice strong{font:700 11px var(--display);color:#eff3f4}
.reaction-selection-controls .reaction-display-choice small{font-size:9px;line-height:1.35;color:#91a0a5}
.reaction-selection-start{width:100%;justify-content:space-between;min-height:42px;padding:0 14px;background:#ff825b;color:#17100e;font-size:12px}
.reaction-selection-start:hover{background:#ff9977}
.reaction-mode-preview[data-mode="hard"] .reaction-preview-visual{background:radial-gradient(ellipse at center,#261c17,#090d11 72%)}
.reaction-mode-preview[data-mode="realistic"] .reaction-preview-visual{background:linear-gradient(#11191e 0 69%,#202626 70%)}
html[data-site-theme="light"] .selected-test.reaction-mode-preview{background:linear-gradient(140deg,#fff,#f1f5f4);border-color:#d3dcda}
html[data-site-theme="light"] .selected-test .reaction-preview-visual{border-color:#d3dcda}
html[data-site-theme="light"] .selected-test .reaction-preview-copy h2{color:#202a2b}
html[data-site-theme="light"] .selected-test .reaction-preview-copy>p:not(.eyebrow){color:#526164}
html[data-site-theme="light"] .reaction-selection-controls{border-color:#d3dcda}
html[data-site-theme="light"] .reaction-selection-controls .reaction-display-choice label{background:#f6f8f7;border-color:#d4dddb}
html[data-site-theme="light"] .reaction-selection-controls .reaction-display-choice label:has(input:checked){background:#fff2ed;border-color:#c65a3c}
html[data-site-theme="light"] .reaction-selection-controls .reaction-display-choice strong{color:#283334}
@media(max-width:1180px){#reaction-mode-picker .reaction-mode-options{grid-template-columns:repeat(4,minmax(0,1fr))}#reaction-mode-picker .reaction-mode-card[data-reaction-mode="mix"]{grid-column:auto}}
@media(max-width:850px){.selected-test.reaction-mode-preview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.selected-test .reaction-preview-visual{min-height:210px}.selected-test .reaction-preview-copy{padding:20px}.reaction-selection-controls{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.4fr);align-items:end;border-inline-start:0;border-top:1px solid #293338}}
@media(max-width:620px){#reaction-mode-picker.reaction-mode-picker{margin-top:14px}#reaction-mode-picker .reaction-mode-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#reaction-mode-picker .reaction-mode-card{min-height:126px;padding:12px}.selected-test.reaction-mode-preview{grid-template-columns:1fr}.selected-test .reaction-preview-visual{min-height:155px;border-inline-end:0;border-bottom:1px solid #303b40}.selected-test .reaction-preview-copy{padding:17px}.selected-test .reaction-preview-copy h2{margin-bottom:6px}.selected-test .reaction-preview-copy .reaction-selection-meta{margin-top:10px;padding-top:9px}.reaction-selection-controls{grid-column:auto;grid-template-columns:1fr;padding:15px;border-top:1px solid #293338}.reaction-selection-start{min-height:46px}}
@media(max-width:360px){#reaction-mode-picker .reaction-mode-options{grid-template-columns:1fr}#reaction-mode-picker .reaction-mode-card{min-height:112px}}