:root{--navy:#2f2340;--blue:#7847a5;--sky:#f2eafa;--cream:#fbfaf5;--gold:#f2b84b;--green:#2c8c73;--red:#c94c4c;--ink:#243240;--muted:#667788;--line:#dbe4e8;--white:#fff;--shadow:0 14px 40px rgba(23,50,77,.10)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:linear-gradient(135deg,#f3ebfa 0%,#fbfaf5 48%,#e8edf7 100%);min-height:100vh}.hidden{display:none!important}button{font:inherit}.app-shell{min-height:100vh}.topbar{height:76px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1200px)/2));position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy)}.brand-icon{width:44px;height:44px;border-radius:13px;background:var(--navy);color:white;display:grid;place-items:center;font-weight:800}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:12px;margin-top:2px}.header-stats{display:flex;gap:22px;align-items:center;color:var(--muted);font-size:14px}.timer{font-size:19px;font-weight:800;color:var(--navy);background:var(--sky);padding:10px 15px;border-radius:10px;font-variant-numeric:tabular-nums}.timer.warning{color:var(--red);background:#fff0f0}main{max-width:1200px;margin:auto;padding:42px 24px 70px}.card{background:rgba(255,255,255,.96);border:1px solid rgba(219,228,232,.9);border-radius:24px;box-shadow:var(--shadow)}.welcome{max-width:920px;margin:auto;padding:50px;text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:1.6px;color:var(--blue);font-size:12px;font-weight:800;margin:0 0 8px}.welcome h1,.results h1{font-size:clamp(34px,5vw,54px);color:var(--navy);margin:0}.subtitle{font-size:19px;color:var(--muted);margin:10px 0 32px}.part-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}.part-grid article{background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:18px}.part-grid span,.part-grid strong,.part-grid small{display:block}.part-grid span{color:var(--blue);font-size:12px;font-weight:800}.part-grid strong{color:var(--navy);margin:7px 0;font-size:15px}.part-grid small{color:var(--muted)}.instructions{text-align:left;background:var(--sky);padding:20px 25px;border-radius:16px;margin:25px 0}.instructions h2{font-size:17px;color:var(--navy);margin:0 0 8px}.instructions li{margin:7px 0;line-height:1.45}.primary-btn,.secondary-btn,.submit-btn,.nav-btn,.play-btn{border:0;border-radius:12px;padding:13px 20px;font-weight:750;cursor:pointer;transition:.2s}.primary-btn{background:var(--navy);color:white}.primary-btn:hover{background:var(--blue);transform:translateY(-1px)}.secondary-btn,.nav-btn{background:white;color:var(--navy);border:1px solid var(--line)}.test-layout{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}.sidebar{padding:22px;position:sticky;top:100px}.progress-ring{width:92px;height:92px;margin:0 auto 23px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 0deg,#e6ecee 0deg);position:relative}.progress-ring:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:white}.progress-ring span{z-index:1;font-weight:800;color:var(--navy)}#partNav{display:grid;gap:8px}.part-nav-btn{border:1px solid transparent;background:transparent;text-align:left;border-radius:10px;padding:11px;color:var(--muted);cursor:pointer}.part-nav-btn.active{background:var(--sky);color:var(--navy);font-weight:750}.part-nav-btn small{float:right}.submit-btn{background:var(--gold);color:var(--navy);width:100%;margin-top:20px}.question-card{padding:34px;min-height:640px}.question-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px}.question-header h2{margin:0;color:var(--navy)}.flag-btn{border:1px solid var(--line);background:white;border-radius:10px;padding:9px 12px;color:var(--muted);cursor:pointer}.flag-btn.active{background:#fff8df;border-color:var(--gold);color:#8a6412}.directions{color:var(--muted);line-height:1.5}.audio-panel{background:var(--sky);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:17px;margin:20px 0}.play-btn{background:var(--blue);color:white;white-space:nowrap}.play-btn.playing{background:var(--green)}.audio-status strong,.audio-status small{display:block}.audio-status small{color:var(--muted);margin-top:4px}.prompt{font-size:19px;font-weight:750;color:var(--navy);margin:22px 0 15px}.options{display:grid;gap:11px}.option{width:100%;border:1px solid var(--line);background:white;border-radius:13px;padding:15px 17px;text-align:left;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:13px}.option:hover{border-color:var(--blue);background:#f7fbfc}.option.selected{border-color:var(--blue);background:var(--sky);box-shadow:0 0 0 1px var(--blue)}.option-letter{min-width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#edf1f3;font-weight:800;color:var(--navy)}.selected .option-letter{background:var(--blue);color:white}.question-footer{display:flex;justify-content:space-between;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}.nav-btn.next{background:var(--navy);color:white}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.photo-scene{min-height:245px;border-radius:18px;overflow:hidden;margin:18px auto;background:linear-gradient(#bfe4f2 0 58%,#cfddc5 58%);position:relative;display:grid;place-items:center;border:8px solid white;box-shadow:0 5px 20px rgba(23,50,77,.12)}.scene-content{font-size:72px;filter:drop-shadow(0 8px 5px rgba(0,0,0,.15));text-align:center}.scene-caption{position:absolute;bottom:12px;left:14px;background:rgba(255,255,255,.88);padding:7px 11px;border-radius:9px;font-size:12px;color:var(--muted)}.results{max-width:900px;margin:auto;padding:50px;text-align:center}.score-circle{width:170px;height:170px;border-radius:50%;margin:28px auto;display:flex;flex-direction:column;justify-content:center;background:var(--navy);color:white;border:10px solid var(--sky)}.score-circle strong{font-size:55px}.part-results{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0}.part-result{padding:18px 10px;border:1px solid var(--line);border-radius:14px}.part-result strong,.part-result span{display:block}.part-result strong{color:var(--navy);font-size:21px;margin-top:6px}.result-actions{display:flex;gap:12px;justify-content:center}.review-area{text-align:left;margin-top:35px;border-top:1px solid var(--line);padding-top:20px}.review-item{padding:15px;margin:8px 0;border-radius:12px;background:#f7f9fa;border-left:5px solid var(--green)}.review-item.wrong{border-left-color:var(--red)}.review-item p{margin:5px 0}.review-item small{color:var(--muted)}.modal{position:fixed;inset:0;background:rgba(16,32,45,.58);display:grid;place-items:center;z-index:50;padding:20px}.modal-box{background:white;border-radius:20px;padding:30px;max-width:440px;text-align:center;box-shadow:var(--shadow)}.modal-box h2{color:var(--navy)}.modal-box div{display:flex;justify-content:center;gap:10px;margin-top:22px}
@media(max-width:800px){.part-grid,.part-results{grid-template-columns:repeat(2,1fr)}.test-layout{display:block}.sidebar{position:static;margin-bottom:18px}.progress-ring{display:none}#partNav{grid-template-columns:repeat(2,1fr)}.question-card{padding:24px}.welcome,.results{padding:30px 20px}.header-stats #progressText{display:none}}
@media(max-width:480px){main{padding:24px 12px 50px}.part-grid{grid-template-columns:1fr}.audio-panel{align-items:flex-start;flex-direction:column}.question-header{gap:10px}.question-footer{gap:8px}.nav-btn{padding:12px}.scene-content{font-size:54px}.topbar{padding:0 14px}}