@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--ink:#20231f;--muted:#7e8179;--line:#deded4;--paper:#f4f1e9;--card:#fffefa;--lime:#d3ee6a;--red:#ed6653;--green:#56815a}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(rgba(244,241,233,.52),rgba(244,241,233,.62)),url('uploads/images__16_.jfif') center / cover fixed;color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh}.app-shell{width:min(100%,780px);margin:0 auto;padding:28px 32px 24px;min-height:100vh;display:flex;flex-direction:column;background:rgba(244,241,233,.82);backdrop-filter:blur(3px)}.topbar{min-height:66px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:15px}.wordmark{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-weight:800;font-size:30px;letter-spacing:-.055em}.mark{display:grid;place-items:center;width:34px;height:34px;background:var(--lime);border-radius:50%;font-family:'DM Mono',monospace;font-size:19px}.progress-wrap{display:flex;align-items:center;gap:11px;font-family:'DM Mono',monospace;color:#696d62;font-size:11px}.progress-track{width:100px;height:4px;background:#dedfd4;border-radius:4px;overflow:hidden}.progress-track div{height:100%;width:12.5%;background:var(--ink);transition:width .3s ease}.quiz{width:min(100%,520px);margin:32px auto 22px}.eyebrow{display:flex;align-items:center;gap:8px;font:11px 'DM Mono',monospace;letter-spacing:.08em;color:#73766d;margin:0 0 9px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#9db342}h1{font-size:clamp(27px,5vw,36px);letter-spacing:-.055em;line-height:1.06;margin:0 0 20px;font-weight:700}.sign-photo{position:relative;margin:0;height:350px;background:#e1dfd3;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}.sign-photo img{width:100%;height:100%;object-fit:contain;display:block}.sign-photo figcaption{position:absolute;bottom:11px;right:11px;background:rgba(255,254,250,.91);border:1px solid rgba(32,35,31,.1);padding:6px 9px;border-radius:4px;font:11px 'DM Mono',monospace;color:#4c5048;letter-spacing:.02em}.answer-area{margin-top:22px}.answer-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:11px 'DM Mono',monospace;letter-spacing:.09em;color:#73766d}.keyboard-hint{letter-spacing:0;text-transform:none;color:#9a9c94}.answers{display:grid;grid-template-columns:1fr 1fr;gap:9px}.answer-button{min-height:53px;padding:11px 13px;border:1px solid #d9d9cf;border-radius:7px;background:var(--card);color:var(--ink);font:500 15px/1.4 'DM Sans',sans-serif;text-align:left;cursor:pointer;display:flex;align-items:center;gap:10px;transition:border .15s,background .15s,transform .15s}.answer-button:hover:not(:disabled){border-color:#777b6e;transform:translateY(-1px)}.answer-button:focus-visible,.next-button:focus-visible,.restart-button:focus-visible{outline:3px solid #aac345;outline-offset:2px}.answer-letter{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#f0efe8;font:12px 'DM Mono',monospace;color:#696d62}.answer-button.correct{border-color:var(--green);background:#eff6ed}.answer-button.correct .answer-letter{background:var(--green);color:white}.answer-button.incorrect{border-color:var(--red);background:#fff0ec}.answer-button.incorrect .answer-letter{background:var(--red);color:white}.answer-button:disabled{cursor:default}.feedback{margin-top:12px;border-top:1px solid var(--line);padding-top:13px;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:start}.feedback-icon{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#edf4e8;color:var(--green);font-size:14px}.feedback-icon.wrong{background:#fff0ec;color:var(--red)}.feedback strong{display:block;font-size:13px;margin:2px 0 3px}.feedback p{font-size:12px;line-height:1.5;color:#63665f;margin:0;max-width:330px}.next-button,.restart-button{border:0;border-radius:6px;background:var(--ink);color:white;padding:11px 13px;font:600 12px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}.next-button span,.restart-button span{margin-left:7px;color:var(--lime)}footer{margin-top:auto;border-top:1px solid var(--line);padding-top:13px;display:flex;justify-content:space-between;gap:16px;color:#888a82;font-size:10px}footer a{color:#666a60;text-decoration:none}footer a:hover{text-decoration:underline}.result{width:min(100%,520px);margin:75px auto 40px;position:relative}.result .eyebrow{margin-bottom:12px}.result h1{font-size:46px;margin-bottom:12px}.result h1 span{color:#6b812c}.result-copy{font-size:15px;color:#666a60;line-height:1.55;max-width:350px;margin:0 0 22px}.result-stamp{position:absolute;right:4px;top:0;width:91px;height:91px;display:grid;place-content:center;text-align:center;border:2px solid #bfca95;border-radius:50%;color:#6c793f;font:500 13px/1.2 'DM Mono',monospace;transform:rotate(11deg)}[hidden]{display:none!important}
/* Layered foreground with a little physical depth */
.app-shell{border-inline:1px solid rgba(255,255,255,.58);box-shadow:0 28px 70px rgba(31,35,28,.2),0 5px 18px rgba(31,35,28,.1),inset 0 1px 0 rgba(255,255,255,.8)}
.topbar{position:relative;text-shadow:0 1px 0 rgba(255,255,255,.85)}
.sign-photo{border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 24px rgba(37,40,31,.18),0 3px 0 rgba(69,72,61,.13),inset 0 1px 8px rgba(20,22,18,.12);transform:perspective(900px) rotateX(.7deg);transform-origin:center bottom}
.answer-button{box-shadow:0 4px 0 #c9c9bd,0 7px 12px rgba(37,40,31,.07);transform:translateY(-1px)}
.answer-button:hover:not(:disabled){box-shadow:0 6px 0 #c9c9bd,0 10px 18px rgba(37,40,31,.12);transform:translateY(-3px)}
.answer-button:active:not(:disabled){box-shadow:0 1px 0 #c9c9bd;transform:translateY(3px)}
.answer-button.correct{box-shadow:0 4px 0 #a5c19d,0 7px 14px rgba(37,40,31,.08)}
.answer-button.incorrect{box-shadow:0 4px 0 #e0a59a,0 7px 14px rgba(37,40,31,.08)}
.next-button,.restart-button{box-shadow:0 4px 0 #11130f,0 8px 14px rgba(31,35,28,.2);transition:transform .15s,box-shadow .15s}
.next-button:hover,.restart-button:hover{transform:translateY(-2px);box-shadow:0 6px 0 #11130f,0 11px 18px rgba(31,35,28,.22)}
.next-button:active,.restart-button:active{transform:translateY(2px);box-shadow:0 1px 0 #11130f}
@media(max-width:560px){.app-shell{padding:20px 18px 17px}.topbar{min-height:56px;padding-bottom:12px}.wordmark{font-size:22px;gap:8px}.mark{width:28px;height:28px;font-size:16px}.progress-wrap{gap:7px}.progress-track{width:58px}.quiz{margin-top:26px}.sign-photo{height:310px}.answers{grid-template-columns:1fr;gap:7px}.answer-button{min-height:54px}.feedback{grid-template-columns:23px 1fr}.next-button{grid-column:2;justify-self:start;margin-top:2px}.result{margin-top:54px}.result h1{font-size:39px}.result-stamp{width:72px;height:72px;font-size:11px}footer{font-size:9px}}