dialog{position:fixed;inset:12px 0 auto;margin:0 auto;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:0;overflow:visible}
dialog[open]{display:flex;flex-direction:column;justify-content:center}
.door-panel{position:relative;display:flex;flex-direction:column;padding-top:36px;max-height:100%;min-height:0}
.door-panel>.medallion{top:2px;z-index:1}
.door-card{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
dialog.keyboard-open{justify-content:flex-start}
.keyboard-open .door-panel{padding-top:0}
.keyboard-open .medallion,.keyboard-open .door-card>.eyebrow,.keyboard-open #door-description{display:none}
.keyboard-open .door-card{padding:12px 20px}
.keyboard-open .door-card h2{font-size:30px;line-height:1.1;margin:0 30px 8px}
.keyboard-open .question{font-size:22px;margin:8px 0}
.keyboard-open .miss{margin-top:0}
.keyboard-open #answer{height:44px;margin:6px auto 10px}
.keyboard-open form .plaque{min-height:44px}
.keyboard-open .back{min-height:44px;margin-top:0;padding:8px}
.miss{display:flex;align-items:center;justify-content:center;gap:10px;background:#d63a2f;color:#fff;border:0;border-radius:12px;padding:12px 14px;font-size:15px;font-weight:600;line-height:1.3;text-align:left;box-shadow:0 6px 16px rgba(214,58,47,.33),inset 0 0 0 1px rgba(255,255,255,.18)}
.miss svg{flex:0 0 22px;width:22px;height:22px}
#answer[aria-invalid="true"]{border-color:#d63a2f;box-shadow:0 0 0 3px rgba(214,58,47,.33)}
@keyframes door-error-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-9px) rotate(-1deg)}30%{transform:translateX(8px) rotate(1deg)}45%{transform:translateX(-6px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(2px)}}
@keyframes door-error-fade{from{opacity:.35}to{opacity:1}}
.door-error-motion{animation:door-error-shake .5s cubic-bezier(.36,.07,.19,.97) both}
@media(prefers-reduced-motion:reduce){.door-error-motion{animation:door-error-fade .4s ease-out both}}