@import url('/v33/design-system.css');
:root{--navy:#071d2b;--navy2:#102c40;--gold:#e3bc71;--cream:#f7f2e9;--muted:#b2c5d1;--stroke:#456075;font-family:Manrope,Arial,Helvetica,sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 90% -15%,#1d4862,transparent 45%),var(--navy);color:var(--cream)}
button,input{font:inherit}button{cursor:pointer}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
.shell{width:min(1200px,calc(100% - 48px));margin:0 auto;padding:24px 0 38px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid #ffffff29;padding:0 0 24px}
.wordmark{font:400 clamp(17px,2.7vw,24px) Georgia,serif;text-decoration:none;color:#f1e7d3}.wordmark strong{color:var(--gold);font-weight:500}
.home-link{text-decoration:none;color:var(--gold);font-size:14px;line-height:1.4}
.intro{padding:30px 0 32px;max-width:770px}.eyebrow,.overline{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.intro h1{font:400 clamp(36px,4.8vw,61px)/1.1 Georgia,serif;letter-spacing:-.025em;margin:12px 0 16px}
.intro h1 em{font-style:italic;color:var(--gold)}.intro>p:last-child{font-size:16px;line-height:1.6;color:var(--muted);max-width:685px;margin:0}
.play-area{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:24px;align-items:stretch}
.media-panel,.question-panel{min-width:0;border:1px solid var(--stroke);background:linear-gradient(145deg,#102c40,#0d2436);border-radius:24px;overflow:hidden}
.media-panel{padding:14px 14px 4px;display:flex;flex-direction:column}
.visual-frame{position:relative;aspect-ratio:1/1;display:grid;place-items:center;isolation:isolate;background:#dbc9af;border-radius:14px;overflow:hidden}
.visual-backdrop{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(35px) brightness(.94);transform:scale(1.05);z-index:0}
.question-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center center;display:block;background:transparent;cursor:pointer}
.media-loader{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:20px;background:#122939e6;color:var(--cream);text-align:center}
.media-actions{min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 8px 2px;font-size:12px;color:var(--muted)}
.action-subtle,.secondary-actions button{color:var(--gold);border:1px solid #648090;background:#10293b;border-radius:10px;padding:10px 13px;min-height:42px}
.question-panel{padding:clamp(20px,3.3vw,40px);display:flex;flex-direction:column}
.progress-line{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:600}
.progress-track{height:6px;border-radius:8px;background:#496070;margin:12px 0 40px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--gold);transition:width .25s ease}
.overline{margin:0 0 10px}.question-panel h2{font:400 clamp(28px,3vw,43px)/1.13 Georgia,serif;margin:0 0 32px;color:var(--cream)}
#answerForm{display:grid;gap:10px}#answerForm label{font-size:13px;font-weight:600;color:#d6e1e8}.answer-controls{display:flex;flex-wrap:wrap;gap:10px}
.answer-controls input{flex:1;min-width:160px;border:1px solid #84949c;background:#f8f8f5;color:#182b3b;border-radius:10px;padding:13px 15px;font-size:16px;min-height:48px}
.primary-button{background:var(--gold);color:var(--navy);font-size:14px;border:1px solid var(--gold);border-radius:10px;padding:12px 18px;min-height:48px;font-weight:750}
.primary-button:hover{background:#f0d5a0}.feedback{min-height:22px;font-size:14px;line-height:1.5;margin:14px 0 18px}.feedback.error{color:#ffb6a7}.feedback.success{color:#94dfb4}
.secondary-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}.secondary-actions button{font-size:13px}.secondary-actions button:hover,.action-subtle:hover{border-color:var(--gold)}
.hint{color:#f6dbac;font-size:14px;line-height:1.5;border-left:2px solid var(--gold);padding:10px 14px;background:#ffffff09;border-radius:0 9px 9px 0}
.reveal{margin-top:20px;padding:24px 20px;background:#f4efe4;color:#20323d;border-radius:16px;line-height:1.6}
.reveal .overline{color:#906028}.reveal h3{font:400 33px Georgia,serif;color:#0e324a;margin:3px 0 12px}.reveal p:not(.overline){font-size:15px;margin:0 0 24px}
.next-button{width:100%}.finish-screen{text-align:center;border:1px solid var(--stroke);border-radius:22px;padding:50px 28px;background:#122e43;display:grid;justify-items:center;gap:16px}.finish-screen h2{font:400 55px Georgia,serif;margin:0}.finish-screen p{margin:0;color:var(--muted);font-size:17px}.finish-screen .home-link{margin-top:8px}
.footer{font-size:12px;line-height:1.6;color:var(--muted);text-align:center;margin-top:30px}
@media(max-width:860px){.play-area{grid-template-columns:minmax(0,1fr)}.intro{padding:22px 0 25px}.question-panel{padding:24px}.progress-track{margin-bottom:24px}.question-panel h2{margin-bottom:20px}}
@media(max-width:500px){.shell{width:min(100% - 24px,1200px);padding-top:16px}.topbar{padding-bottom:14px}.topbar .home-link{max-width:115px;text-align:right}.intro>p:last-child{font-size:14px}.play-area{gap:12px}.media-panel{padding:6px 6px 2px;border-radius:16px}.question-panel{border-radius:16px;padding:20px}.media-actions{padding:8px 10px}.answer-controls button{width:100%}.answer-controls input{min-width:100%}.question-panel h2{font-size:30px}.intro h1{font-size:37px}.intro{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.topbar .wordmark{display:inline-flex;align-items:center;gap:10px}
.video-brand-icon{width:40px;height:40px;object-fit:contain;border-radius:6px;flex:none}