/* Promoted from reviewer-five/style.css: same two-column endpoints, five
   equal response slots, gold circles, fine rules and outlined navigation. */
:root{color-scheme:dark;--gold:#c69b55;--cream:#f3e8d2;--muted:#d5cbb8}
*{box-sizing:border-box}
body.five-question{margin:0;background:#0c0e0c;color:var(--cream);font:16px/1.65 Arial,Helvetica,sans-serif}
header,main,footer{width:min(100% - 40px,760px);margin-inline:auto}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #b3894b55;padding:12px 0}
nav{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted)}
nav a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--muted);text-decoration:none}
nav a[aria-current]{color:var(--gold);text-decoration:underline;text-underline-offset:5px}
main{padding-block:24px 12px}
.eyebrow{font-size:12px;letter-spacing:.09em;color:var(--gold);margin:0 0 10px}
h1{font:40px/1.15 var(--brand-display);margin:0 0 24px;overflow-wrap:break-word}
h2{font-size:19px;font-weight:400;line-height:1.5;margin:24px 0 16px}
.story{color:var(--muted)}.story p{margin:0 0 10px}
.endpoints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.endpoint{min-width:0;border-top:1px solid #b3894b55;padding-top:12px}
/* Pill-inspired wine red and blue, lifted for readable letter markers on dark. */
.endpoint #option-A{color:#c35b68}
.endpoint #option-B{color:#587fae}
.endpoint h3{font-size:18px;font-weight:500;color:inherit;margin:0 0 8px}
.answer{font-size:16px;line-height:1.6;margin:0;overflow-wrap:break-word}
.responses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:24px 0 0;padding:0;border:0;min-width:0}
/* Give the longer English middle label room without reducing type size. */
html[lang=en] .responses{grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.5fr) repeat(2,minmax(0,1fr))}
.five-response{display:flex;flex-direction:column;align-items:center;gap:13px;min-width:0;min-height:90px;padding:10px 1px 8px;color:var(--muted);font-size:14px;line-height:1.4;cursor:pointer}
.five-response input{appearance:none;-webkit-appearance:none;display:block;flex:none;width:23px;height:23px;margin:0;border:1.5px solid #b7a786;border-radius:50%;background:transparent;cursor:pointer}
.five-response input:checked{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 6px,transparent 6.5px);box-shadow:0 0 0 3px #0c0e0c,0 0 0 5px var(--gold)}
.response-label{display:block;width:100%;text-align:center;word-break:normal;overflow-wrap:normal}
.five-response:has(input:checked) .response-label{color:var(--cream)}
.actions{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
.actions button{font:inherit;background:transparent;color:var(--gold);border:1px solid #b3894b66;border-radius:0;padding:10px 16px;min-height:44px;cursor:pointer}
.actions button:disabled{opacity:.4;cursor:default}
input:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid #f3d295;outline-offset:5px}
.save-status{font-size:14px;color:var(--muted);margin:12px 0 0;min-height:24px}
footer{font-size:12px;padding-top:12px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
footer nav{justify-content:flex-start;flex-wrap:wrap;gap:4px 16px;white-space:normal}
footer a{color:var(--gold);min-height:44px}
@media(max-width:500px){header,main,footer{width:calc(100% - 32px)}header{gap:8px}h1{font-size:34px}.endpoints{gap:16px}main{padding-top:20px}html[lang=zh-CN] h1{font-family:serif;font-size:29px;line-height:1.35}}