:root{color:#172026;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f6f7;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{min-width:320px;margin:0;overflow:hidden}button{font:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{grid-template-columns:minmax(240px,320px) minmax(0,1fr);height:100dvh;display:grid;overflow:hidden}.side-panel{color:#f7fafb;background:#172026;align-content:space-between;gap:32px;padding:40px 32px;display:grid}.side-panel h1,.page-heading h2{letter-spacing:0;margin:0;line-height:1.05}.side-panel h1{font-size:38px}.summary{color:#c6d1d6;margin:18px 0 0;line-height:1.6}.eyebrow{color:#0f8b8d;letter-spacing:0;text-transform:uppercase;margin:0 0 10px;font-size:13px;font-weight:700}.side-panel .eyebrow{color:#5eead4}.stats{gap:12px;margin:0;display:grid}.stats div{border-top:1px solid #ffffff2e;justify-content:space-between;padding-top:12px;display:flex}.stats dt{color:#c6d1d6}.stats dd{margin:0;font-weight:800}.quiz-surface{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,900px);place-content:stretch center;gap:16px;height:100dvh;min-height:0;padding:32px 48px;display:grid;overflow:hidden}.quiz-surface[data-interaction=drag\.matchPairs]{grid-template-columns:minmax(0,520px)}.quiz-surface[data-interaction=choice\.imageReference]{grid-template-columns:minmax(0,840px)}.quiz-surface[data-interaction=choice\.imageReference] .stimulus img{max-height:160px}.quiz-surface[data-interaction=choice\.imageReference] .image-option-grid .option img{height:120px}.page-heading{width:100%}.page-heading-top{justify-content:space-between;align-items:start;gap:16px;display:flex}.page-heading h2{font-size:32px}.page-heading p:last-child{color:#4e5b61;margin:10px 0 0;font-size:17px;line-height:1.55}.page-body{align-content:start;gap:12px;width:100%;min-height:0;display:grid;overflow:hidden}.countdown-timer{color:#172026;background:#fff;border:1px solid #cbd6da;border-radius:8px;justify-content:space-between;align-items:center;gap:14px;min-width:170px;padding:10px 12px;display:flex}.countdown-timer span{color:#4e5b61;font-size:13px;font-weight:700;line-height:1.2}.countdown-timer strong{font-variant-numeric:tabular-nums;font-size:22px;line-height:1}.countdown-timer.warning{border-color:#b45309;box-shadow:inset 0 0 0 1px #b45309}.countdown-timer.warning strong,.countdown-timer.expired strong{color:#b45309}.countdown-timer.expired{background:#fff7ed;border-color:#b45309}.stimulus{background:#fff;border:1px solid #dce3e6;border-radius:8px;width:100%;padding:14px}.stimulus p{margin:0;line-height:1.6}.stimulus img{aspect-ratio:16/9;object-fit:contain;background:#f6f8f9;border-radius:6px;width:100%;max-height:220px;display:block}.option img{aspect-ratio:16/9;object-fit:cover;border-radius:6px;width:100%;display:block}.option-grid,.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;display:grid}.image-option-grid .option{align-content:start;gap:8px;min-height:0;padding:12px}.image-option-grid .option img{aspect-ratio:auto;height:120px}.compare-grid .option img{aspect-ratio:auto;height:220px}.option{color:#172026;cursor:pointer;text-align:left;background:#fff;border:1px solid #cbd6da;border-radius:8px;align-items:center;gap:10px;min-height:78px;padding:14px;display:grid}.option:hover,.option:focus-visible{border-color:#0f8b8d;outline:none}.option.selected{background:#e8fbf7;border-color:#0f8b8d;box-shadow:inset 0 0 0 1px #0f8b8d}.option:disabled{cursor:not-allowed}.option span{font-weight:700;line-height:1.35}.criterion{color:#4e5b61;margin:0 0 12px}.swipe-deck{gap:18px;width:100%;display:grid}.swipe-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.swipe-panel{gap:10px;min-width:0;display:grid}.swipe-panel h3{color:#4e5b61;letter-spacing:0;text-transform:uppercase;margin:0;font-size:13px}.swipe-card{background:#fff;border:1px solid #cbd6da;border-radius:8px;align-content:start;gap:10px;min-height:270px;padding:14px;display:grid;overflow:hidden}.swipe-card.active{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-color:#0f8b8d;transition:border-color .12s,box-shadow .12s,transform .12s;position:relative;box-shadow:inset 0 0 0 1px #0f8b8d}.swipe-card.active.dragging{cursor:grabbing;transition:none}.swipe-card.active.fitting{border-color:#0f8b8d;box-shadow:inset 0 0 0 2px #0f8b8d}.swipe-card.active.rejecting{border-color:#b45309;box-shadow:inset 0 0 0 2px #b45309}.swipe-card.active:focus-visible{outline-offset:3px;outline:3px solid #0f8b8d52}.swipe-card.complete{text-align:center;align-content:start;justify-items:center}.swipe-card img{aspect-ratio:auto;object-fit:cover;background:#f6f8f9;border-radius:6px;width:100%;height:210px;display:block}.swipe-card span,.swipe-card strong{font-weight:700;line-height:1.35}.swipe-direction{color:#4e5b61;opacity:0;pointer-events:none;z-index:1;background:#fff;border:1px solid #cbd6da;border-radius:999px;padding:5px 8px;font-size:12px;transition:opacity .12s,transform .12s;position:absolute;top:24px;left:24px;transform:translateY(-4px)}.swipe-direction.fit{left:auto;right:24px}.swipe-card.active.rejecting .swipe-direction.reject,.swipe-card.active.fitting .swipe-direction.fit{opacity:1;transform:translateY(0)}.swipe-card.active.fitting .swipe-direction.fit{color:#0f5f61;border-color:#0f8b8d}.swipe-card.active.rejecting .swipe-direction.reject{color:#92400e;border-color:#b45309}.swipe-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;display:grid}.swipe-summary-item{text-align:left;background:#f6f8f9;border:1px solid #dce3e6;border-radius:8px;align-content:start;gap:6px;min-width:0;padding:8px;display:grid}.swipe-summary-item img{aspect-ratio:auto;height:72px}.swipe-summary-item span{font-size:13px}.swipe-summary-item small{color:#4e5b61;font-size:12px;font-weight:700;line-height:1.25}.swipe-progress{justify-content:center;gap:8px;display:flex}.swipe-progress span{background:#cbd6da;border-radius:999px;width:10px;height:10px;display:block}.swipe-progress .done{background:#0f8b8d}.match-board{grid-template-columns:240px 240px;justify-content:center;align-items:start;gap:32px;width:100%;display:grid}.match-column{align-content:start;gap:12px;display:grid}.match-bank.empty{display:none}.match-column h3{color:#4e5b61;letter-spacing:0;text-transform:uppercase;margin:0;font-size:13px}.match-list,.match-options{gap:8px;display:grid}.match-options{grid-template-columns:1fr}.match-row{grid-template-columns:116px 116px;align-items:stretch;gap:8px;display:grid;position:relative}.match-prompt,.match-slot,.match-option{color:#172026;background:#fff;border:1px solid #cbd6da;border-radius:8px;align-items:center;gap:10px;min-height:0;padding:6px;display:flex;overflow:hidden}.match-prompt,.match-slot{aspect-ratio:1}.match-prompt span,.match-assigned,.match-option span{font-weight:700;line-height:1.35}.match-slot{cursor:pointer;outline:none;justify-content:space-between}.match-prompt img,.match-option img,.match-assigned img{aspect-ratio:1;object-fit:cover;border-radius:6px;width:100%;height:100%;display:block}.match-assigned{width:100%;height:100%;display:block;overflow:hidden}.match-row.ready .match-slot{border-style:dashed}.match-row.over .match-slot,.match-slot:focus-visible{border-color:#0f8b8d;box-shadow:inset 0 0 0 1px #0f8b8d}.match-row.filled .match-slot{background:#e8fbf7;border-color:#0f8b8d}.match-option{cursor:grab;text-align:left;touch-action:none;grid-template-columns:116px minmax(0,1fr);justify-content:stretch;gap:12px;width:100%;height:116px;min-height:0;display:grid}.match-option-label{align-self:center;padding-right:8px;display:block}.match-option:disabled{cursor:not-allowed}.match-option:active{cursor:grabbing}.match-option:hover,.match-option:focus-visible{border-color:#0f8b8d;outline:none}.match-option.matched{color:#4e5b61;background:#f0f5f6}.match-option.pending{border-color:#0f8b8d;box-shadow:inset 0 0 0 1px #0f8b8d}.match-option.dragging{opacity:.45}.match-option.overlay{aspect-ratio:1;cursor:grabbing;opacity:.96;max-width:132px;height:132px;display:flex;box-shadow:0 12px 30px #1720262e}.match-option.overlay .match-option-label{display:none}.match-clear{color:#4e5b61;cursor:pointer;background:#fff;border:1px solid #cbd6da;border-radius:8px;min-width:28px;height:28px;padding:0;font-weight:800;line-height:1;position:absolute;top:8px;right:8px}.feedback-row{align-items:start;gap:12px;width:100%;display:grid}.feedback{color:#4e5b61;text-align:center;justify-self:center;justify-items:center;gap:4px;width:100%;max-width:640px;min-height:48px;display:grid}.feedback strong{color:#172026}.nav-actions{justify-self:center;gap:10px;display:flex}.nav-actions button{color:#172026;cursor:pointer;background:#fff;border:1px solid #cbd6da;border-radius:8px;min-width:104px;padding:11px 16px}.nav-actions button:disabled{color:#8a989e;cursor:not-allowed}.nav-actions .primary{color:#fff;background:#0f8b8d;border-color:#0f8b8d}.nav-actions .accepted:disabled{color:#0f5f61;opacity:1;background:#e8fbf7;border-color:#0f8b8d}.unsupported{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;gap:6px;max-width:820px;padding:18px;display:grid}@media (width<=820px){.app-shell{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr}.side-panel{grid-template-columns:minmax(0,1fr) minmax(116px,auto);align-content:start;gap:10px;padding:14px 20px;display:grid}.side-panel h1{font-size:24px}.summary{display:none}.stats{gap:6px}.stats div{padding-top:6px}.quiz-surface{gap:10px;height:100%;padding:14px 20px}.quiz-surface[data-interaction=drag\.matchPairs]{grid-template-columns:minmax(0,1fr)}.page-heading h2{font-size:24px}.page-heading p:last-child{margin-top:6px;font-size:15px}.page-heading-top{gap:6px;display:grid}.countdown-timer{width:100%;max-width:230px}.stimulus{padding:10px}.stimulus img{max-height:130px}.option-grid,.feedback-row{grid-template-columns:1fr}.compare-grid,.image-option-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.option{gap:8px;min-height:56px;padding:10px}.option span{font-size:14px}.compare-grid .option img{height:116px}.image-option-grid .option img,.quiz-surface[data-interaction=choice\.imageReference] .image-option-grid .option img{height:74px}.swipe-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.swipe-card{gap:8px;min-height:0;padding:10px}.swipe-card img{height:110px}.swipe-summary{gap:6px}.swipe-summary-item{gap:3px;padding:5px}.swipe-summary-item img{height:34px}.swipe-summary-item span{font-size:10px}.swipe-summary-item small{font-size:9px}.swipe-direction{padding:4px 6px;font-size:9px;top:14px;left:14px}.swipe-direction.fit{left:auto;right:14px}.match-board{grid-template-columns:1fr;gap:8px;max-width:none}.match-bank{order:-1}.match-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.match-option{aspect-ratio:1;justify-content:flex-start;height:auto;display:flex}.match-option-label{display:none}.match-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.match-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}.match-prompt,.match-slot{aspect-ratio:1;min-height:0}.match-clear{min-width:28px;height:28px;top:8px;right:8px}.feedback-row{align-items:stretch;gap:10px}.feedback{min-height:42px;font-size:14px}.nav-actions{justify-content:stretch;justify-self:stretch}.nav-actions button{width:100%;min-width:0;padding:10px 8px}}@media (width>=821px) and (height<=820px){.side-panel{gap:20px;padding:28px}.side-panel h1{font-size:32px}.summary{margin-top:12px}.quiz-surface{gap:10px;padding:20px 40px}.page-heading h2{font-size:28px}.page-heading p:last-child{margin-top:6px;font-size:15px}.eyebrow{margin-bottom:6px}.page-body{gap:10px}.stimulus{padding:10px}.stimulus img{max-height:150px}.option{min-height:66px;padding:10px 12px}.compare-grid .option img{height:150px}.image-option-grid .option img,.quiz-surface[data-interaction=choice\.imageReference] .image-option-grid .option img{height:86px}.quiz-surface[data-interaction=choice\.imageReference] .stimulus img{max-height:124px}.swipe-deck{gap:10px}.swipe-panels{gap:12px}.swipe-card{gap:8px;min-height:0;padding:10px}.swipe-card img{height:150px}.swipe-summary-item img{height:48px}.match-board{grid-template-columns:204px 204px;gap:24px}.match-column{gap:8px}.match-row{grid-template-columns:98px 98px}.match-list,.match-options{gap:6px}.match-option{grid-template-columns:98px minmax(0,1fr);gap:8px;height:98px}.feedback{min-height:38px;font-size:14px}.feedback-row{gap:8px}.nav-actions button{padding:8px 12px}}
