.gate-frame{max-width:500px}
.gate-header{justify-content:space-between;gap:16px}
.gate-eyebrow{font:8px/1.8 var(--pixel);color:var(--muted);text-align:right}
.gate-main{display:flex;flex:1;flex-direction:column;justify-content:center;width:100%;padding:32px 0 26px}
.gate-ball{display:block;width:48px;height:48px;margin:0 auto 25px;image-rendering:pixelated}
.gate-question{font:17px/1.85 var(--pixel);letter-spacing:-.35px;text-align:center;overflow-wrap:anywhere;margin:0 0 30px}
.gate-form{width:100%;margin:0}
.gate-label{display:block;font:13px/1.6 var(--body);color:var(--muted);margin-bottom:9px}
.gate-input{font-size:17px;min-height:54px}
.gate-submit{margin-top:16px;min-height:55px;font-size:12px}
.gate-feedback{font:14px/1.65 var(--body);color:var(--yellow);overflow-wrap:anywhere;margin:17px 0 0}
.gate-feedback:empty{display:none}
.gate-hints{margin-top:27px;border-top:1px solid var(--blue)}
.gate-hints details{border-bottom:1px solid var(--blue)}
.gate-hints summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:49px;padding:14px 2px;list-style:none;cursor:pointer;color:var(--muted);font:9px/1.7 var(--pixel);touch-action:manipulation}
.gate-hints summary::-webkit-details-marker{display:none}
.gate-hints summary span{font:21px/1 var(--body);color:var(--yellow)}
.gate-hints details[open] summary{color:var(--cream)}
.gate-hints details[open] summary span{transform:rotate(45deg)}
.gate-hints p{font:15px/1.65 var(--body);color:var(--cream);overflow-wrap:anywhere;padding:0 2px 17px;margin:0}
@media(max-width:440px){
  .gate-eyebrow{font-size:7px}
  .gate-main{padding:27px 0 21px}
  .gate-ball{width:40px;height:40px;margin-bottom:22px}
  .gate-question{font-size:14px;line-height:1.8;letter-spacing:-.2px;margin-bottom:25px}
  .gate-submit{font-size:11px}
  .gate-hints{margin-top:25px}
}
@media(max-width:350px){
  .gate-header{gap:12px}
  .gate-eyebrow{font-size:6px}
  .gate-input{font-size:16px}
  .gate-hints summary{font-size:8px}
}