@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{
  --bg:#f3f0e8;
  --ink:#171918;
  --muted:#6f7774;
  --line:#cbc8bd;
  --blue:#718f9d;
  --blue-dark:#536b74;
  --blue-soft:#e4ebeb;
  --card:#faf8f2;
  --dark:#202423;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body{min-height:100vh;background-image:radial-gradient(rgba(23,25,24,.035) .6px, transparent .6px);background-size:6px 6px}
button,input{font:inherit}
button{cursor:pointer}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:4px;background:var(--blue)}
.shell{width:min(920px,calc(100% - 36px));margin:0 auto;flex:1;display:flex;flex-direction:column}
.header{padding:34px 0 20px;border-bottom:1px solid var(--line)}
.brand{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--blue-dark);font-weight:600}
.motto{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-size:16px;color:var(--muted);margin-top:6px}
.header-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-top:10px}
h1{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-size:clamp(32px,5vw,54px);font-weight:400;line-height:.95;letter-spacing:-1.5px;margin:0}
.progress-meta{min-width:180px;display:flex;align-items:center}
.progress-track{width:180px;height:3px;background:#d8d4c8;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--blue);transition:width .25s ease}
.main{flex:1;padding:44px 0 60px;display:block;max-width:760px;width:100%;margin:0 auto}
.quiz-card{min-width:0}
.kicker{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue-dark);font-weight:700;margin-bottom:10px}
.question{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-size:clamp(27px,4vw,40px);line-height:1.04;font-weight:400;margin:0;max-width:720px}
.subcopy{font-size:14px;line-height:1.55;color:#555c59;margin-top:13px;max-width:670px}
.options{display:grid;gap:10px;margin-top:28px}
.option{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.35);text-align:left;padding:15px 16px;display:flex;gap:13px;align-items:flex-start;transition:.15s ease;color:var(--ink)}
.option:hover{border-color:var(--blue);background:#f8f7f1;transform:translateY(-1px)}
.option.selected{border-color:var(--blue-dark);background:var(--blue-soft);box-shadow:inset 3px 0 0 var(--blue)}
.option-letter{flex:0 0 25px;height:25px;border:1px solid #aeb3af;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--blue-dark)}
.option.selected .option-letter{background:var(--blue-dark);color:white;border-color:var(--blue-dark)}
.option-label{font-size:14px;line-height:1.4;padding-top:2px}
.tooltip{margin-top:22px;background:var(--blue-soft);border-left:4px solid var(--blue);padding:15px 17px;display:none}
.tooltip.visible{display:block}
.tooltip-title{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--blue-dark);font-weight:700;margin-bottom:5px}
.tooltip-copy{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-size:16px;line-height:1.35;color:#374340}
.actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px;border-top:1px solid var(--line);padding-top:18px}
.btn{border:0;padding:13px 20px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700}
.btn-primary{background:var(--dark);color:white}
.btn-primary:disabled{opacity:.35;cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--muted);padding-left:0}
.email-panel,.success-panel{display:none}
.email-panel.active,.success-panel.active{display:block}
.email-box{max-width:620px}
.email-input{width:100%;border:1px solid var(--line);background:#faf8f2;padding:16px;font-size:16px;outline:none;margin-top:24px}
.email-input:focus{border-color:var(--blue)}
.privacy{font-size:11px;line-height:1.5;color:var(--muted);margin-top:9px}
.footer{padding:16px 0 24px;border-top:1px solid var(--line);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#828884;display:flex;justify-content:space-between}
@media(max-width:760px){.header-row{align-items:flex-start;flex-direction:column}.progress-meta{width:100%;min-width:0}.progress-track{width:100%}.shell{width:min(100% - 24px,920px)}.main{padding-top:30px}.options{margin-top:22px}}