.ob { width:100%; word-break:keep-all; }
.ob [hidden] { display:none !important; }
.ob h2,.ob h3,.ob p { margin:0; }
.ob h2 { font-size:var(--fs-page); font-weight:650; }
.ob h3 { font-size:var(--fs-title); }
.ob p { color:var(--muted); margin-top:var(--sp-2); }
.ob-top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); margin-bottom:var(--sp-6); }
.ob-top>div { min-width:0; }
.ob button { white-space:nowrap; }
.ob-eyebrow { color:var(--muted); font-size:var(--fs-caption); letter-spacing:.12em; margin-bottom:var(--sp-2); }
.ob-intro,.ob-question { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.ob-collage { display:flex; align-items:center; padding:var(--sp-8); gap:var(--sp-3); background:var(--panel2); overflow:hidden; min-height:24rem; }
.ob-collage img { width:calc((100% - var(--sp-6))/3); aspect-ratio:3/4; object-fit:contain; background:var(--panel); }
.ob-start,.ob-answer { padding:var(--sp-10); display:flex; flex-direction:column; justify-content:center; min-width:0; }
.ob-start h3,.ob-answer h3 { font-size:var(--fs-display); line-height:1.3; }
.ob-modes { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-8); }
.ob-modes button { display:flex; flex-direction:column; align-items:flex-start; padding:var(--sp-4); gap:var(--sp-1); border:1px solid var(--line); background:var(--panel); color:var(--text); white-space:normal; word-break:keep-all; }
.ob-modes button[aria-pressed=true] { border-color:var(--brand); background:var(--brand-50); color:var(--brand-700); }
.ob-modes span,.ob-rule,.ob-start small { font-size:var(--fs-small); color:var(--muted); }
.ob-primary { margin:var(--sp-6) 0 var(--sp-3); justify-content:center; }
.ob-progress { display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; margin:var(--sp-6) 0; }
.ob-progress b { font-size:var(--fs-page); margin-right:auto; font-variant-numeric:tabular-nums; }
.ob-progress small { color:var(--muted); font-size:var(--fs-body); }
.ob progress { width:100%; height:var(--sp-1); accent-color:var(--brand); border:0; background:var(--panel2); }
.ob progress::-webkit-progress-bar { background:var(--panel2); }.ob progress::-webkit-progress-value { background:var(--brand); }
.ob-photo { background:var(--panel2); display:grid; place-items:center; padding:var(--sp-6); min-height:22rem; }
.ob-photo img { width:100%; height:min(52vh,30rem); object-fit:contain; }
.ob-photo [hidden] { display:none; }
.ob-photo [data-image-error] { text-align:center; }.ob-photo [data-image-error] button { display:block; margin:var(--sp-4) auto; }
.ob-answer form { margin-top:var(--sp-8); }
.ob-answer label { display:block; font-size:var(--fs-small); margin-bottom:var(--sp-2); }
.ob-answer-line { display:flex; gap:var(--sp-2); }.ob-answer-line input { min-width:0; flex:1; width:100%; }.ob-answer-line button { flex:none; }
.ob-feedback { min-height:6rem; margin-top:var(--sp-5); padding:var(--sp-4) 0; color:var(--muted); font-size:var(--fs-small); }
.ob-feedback strong { display:block; font-size:var(--fs-title); margin-top:var(--sp-2); color:var(--text); }.ob-feedback.is-correct b { color:var(--green); }.ob-feedback.is-wrong b { color:var(--amber); }
.ob-bottom,.ob-buttons { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-3); }
.ob-finish,.ob-empty { border:1px solid var(--line); padding:var(--sp-10); text-align:center; }
.ob-finish h3 { font-size:calc(var(--fs-display)*2); font-variant-numeric:tabular-nums; }.ob-finish h3 small { font-size:var(--fs-page); color:var(--muted); }.ob-finish .ob-buttons { justify-content:center; margin-top:var(--sp-6); }
.ob-review { margin-top:var(--sp-6); }.ob-review input { margin:var(--sp-4) 0; }.ob-review-row { display:flex; align-items:center; gap:var(--sp-4); border-bottom:1px solid var(--line); padding:var(--sp-3) 0; }.ob-review-row[hidden] { display:none; }.ob-review-row img { width:var(--sp-10); height:var(--sp-10); object-fit:contain; }.ob-review-row span { flex:1; min-width:0; }.ob-review-row b { white-space:nowrap; }
.ob-members { border:1px solid var(--line); padding:var(--sp-6); margin-bottom:var(--sp-6); background:var(--panel2); }.ob-members h3 { font-size:var(--fs-title); }.ob-members p { font-size:var(--fs-small); }.ob-member-list { max-height:18rem; overflow:auto; margin-top:var(--sp-4); }.ob-member-list label { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--line); }.ob-member-list label[hidden] { display:none; }.ob-member-list input { width:auto; }.ob-member-list small { display:block; font-size:var(--fs-caption); color:var(--muted); }.ob-member-state { margin-left:auto; font-size:var(--fs-small); white-space:nowrap; }.ob [data-notice]:not(:empty) { color:var(--red); margin-bottom:var(--sp-4); }
@media(max-width:850px) { .ob-intro,.ob-question { grid-template-columns:1fr; }.ob-collage { min-height:0; padding:var(--sp-5); }.ob-collage img { max-height:10rem; }.ob-start,.ob-answer { padding:var(--sp-6); }.ob-photo { min-height:0; padding:var(--sp-4); }.ob-photo img { height:32vh; }.ob-top { align-items:flex-start; flex-wrap:wrap; }.ob-answer h3,.ob-start h3 { font-size:var(--fs-page); }.ob-answer-line { flex-wrap:wrap; }.ob-answer-line input { flex-basis:100%; }.ob-answer-line button { width:100%; }.ob-members { padding:var(--sp-4); } }

.ob-scores { margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line); }
.ob-scores .ob-top { margin-bottom:var(--sp-4); }.ob-scores .ob-top p { font-size:var(--fs-small); }
.ob-score-filters { display:flex; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }.ob-score-filters input { flex:1; min-width:10rem; }.ob-score-filters select { width:auto; }
.ob-score-save { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); color:var(--muted); font-size:var(--fs-small); }.ob-score-save:empty { display:none; }.ob-score-save span { color:var(--amber); }
.ob-score-tablewrap { overflow-x:auto; }.ob-score-table { width:100%; min-width:35rem; }.ob-score-table :is(th,td) { padding:var(--sp-3); white-space:nowrap; text-align:left; }.ob-score-table td { font-size:var(--fs-sub); }.ob-score-table th { font-size:var(--fs-small); color:var(--muted); font-weight:500; }.ob-score-table td:last-child b { color:var(--brand); font-variant-numeric:tabular-nums; }
.ob-score-empty { padding:var(--sp-8) var(--sp-4); color:var(--muted); text-align:center; background:var(--panel2); font-size:var(--fs-small); }.ob-score-foot { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-top:var(--sp-3); color:var(--muted); font-size:var(--fs-caption); }

.ob input:not([type=checkbox]),.ob select { min-height:var(--sp-10); padding:var(--sp-2) var(--sp-3); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel); color:var(--text); font:inherit; font-size:max(1rem,var(--fs-body)); }
.ob input:not([type=checkbox]):focus,.ob select:focus { outline:2px solid var(--brand-100); outline-offset:1px; border-color:var(--brand); }

.ob-seasons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-1); background:var(--panel2); border:1px solid var(--line); padding:var(--sp-1); margin-bottom:var(--sp-5); border-radius:var(--r-md); }
.ob-seasons button { display:flex; align-items:center; justify-content:center; gap:var(--sp-2); border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--muted); padding:var(--sp-3); font:inherit; }
.ob-seasons button[aria-pressed=true] { background:var(--panel); color:var(--brand-700); border-color:var(--line); box-shadow:var(--shadow-sm); }
.ob-seasons small { font-size:var(--fs-caption); font-variant-numeric:tabular-nums; }.ob-score-table { min-width:40rem; }
@media(max-width:480px) { .ob-seasons button { flex-direction:column; gap:var(--sp-1); padding:var(--sp-2); } }

.ob-hints { margin-top:var(--sp-4); }.ob-hint-controls { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }.ob-hint-controls span { font-size:var(--fs-small); color:var(--muted); white-space:nowrap; }.ob .ob-hint-text { color:var(--brand-700); font-size:var(--fs-title); font-weight:600; letter-spacing:.08em; white-space:pre-wrap; word-break:keep-all; }.ob-score-table { min-width:44rem; }
.ob-old-answer { color:var(--muted); font-size:var(--fs-caption); white-space:nowrap; }
.ob-answer-dialog { margin:auto; width:min(64rem,calc(100vw - var(--sp-8))); max-height:calc(100dvh - var(--sp-8)); padding:0; border:1px solid var(--line); border-radius:var(--r-lg); color:var(--text); background:var(--panel); overflow:hidden; }
.ob-answer-dialog[open] { display:flex; flex-direction:column; }.ob-answer-dialog::backdrop { background:rgb(0 0 0 / .4); }
.ob-answer-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--line); flex:none; }.ob-answer-dialog-head p { font-size:var(--fs-small); }.ob-answer-dialog-head button { flex:none; }
.ob-answer-dialog-content { overflow:auto; padding:var(--sp-5) var(--sp-6); }.ob-answer-detail-filters { display:flex; gap:var(--sp-3); flex-wrap:wrap; }.ob-answer-detail-filters input { min-width:10rem; flex:1; }.ob-answer-detail-filters select { width:auto; }.ob-answer-count { color:var(--muted); font-size:var(--fs-caption); margin:var(--sp-4) 0 var(--sp-2); }
.ob-answer-record { display:flex; gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--line); }.ob-answer-thumb { width:calc(var(--sp-8)*2); height:calc(var(--sp-8)*2); flex:none; display:grid; place-items:center; background:var(--panel2); font-size:var(--fs-caption); color:var(--muted); }.ob-answer-thumb img { width:100%; height:100%; object-fit:contain; }.ob-answer-record-body { flex:1; min-width:0; }.ob-answer-record-title { display:flex; align-items:baseline; gap:var(--sp-2); flex-wrap:wrap; }.ob-answer-number { font-size:var(--fs-caption); color:var(--muted); white-space:nowrap; }.ob-answer-result { white-space:nowrap; font-size:var(--fs-small); margin-left:auto; }.ob-answer-result.is-correct { color:var(--green); }.ob-answer-result.is-wrong { color:var(--amber); }
.ob-answer-submitted { display:flex; align-items:baseline; gap:var(--sp-3); margin-top:var(--sp-2); font-size:var(--fs-small); }.ob-answer-submitted>span { color:var(--muted); white-space:nowrap; }.ob .ob-answer-submitted p { color:var(--text); margin:0; white-space:pre-wrap; overflow-wrap:anywhere; min-width:0; }.ob-answer-blank { color:var(--muted); }.ob-answer-flags { display:flex; flex-wrap:wrap; gap:var(--sp-3); font-size:var(--fs-caption); color:var(--muted); margin-top:var(--sp-2); }
@media(max-width:480px) { .ob-answer-dialog { margin:auto; width:calc(100vw - var(--sp-4)); max-height:calc(100dvh - var(--sp-4)); }.ob-answer-dialog-head,.ob-answer-dialog-content { padding:var(--sp-4); }.ob-answer-record { gap:var(--sp-3); }.ob-answer-thumb { width:calc(var(--sp-6)*2); height:calc(var(--sp-6)*2); }.ob-answer-submitted { display:block; }.ob .ob-answer-submitted p { margin-top:var(--sp-1); } }