.tilt-controls{display:none}
@media(max-width:820px){
 .tilt-controls{display:block;order:1;position:relative;align-self:stretch;z-index:4;height:44px;margin:-44px 0 0;pointer-events:none;color:#eee;font-size:14px}
 .tilt-controls #enable-tilt{pointer-events:auto;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:9px;position:absolute;left:0;top:0;min-height:44px;padding:9px 14px;background:rgb(15 23 33 / 92%);border:1px solid #b8afa5;border-radius:99px;color:#f3f0e8;font:inherit;white-space:nowrap;box-shadow:0 3px 12px #0003}
 #enable-tilt::before{content:'';display:block;width:13px;height:22px;border:1.5px solid currentColor;border-radius:3px;transform:rotate(-14deg);flex:none;box-shadow:inset 0 -4px 0 #ffffff15}
 .tilt-controls #tilt-status,.tilt-controls details{display:none}
 .tilt-controls:has(#enable-tilt:focus-visible){outline:none}
 .tilt-controls #enable-tilt:focus-visible{outline:2px solid #f3f0e8;outline-offset:3px}
 .tilt-controls #enable-tilt:active{background:#303b47}
 .character-hero .choice-grid{order:2;padding-top:18px}
 .tilt-controls[data-notice] #tilt-status{display:block;position:absolute;top:46px;left:0;right:0;padding:8px 12px;background:#111820;border-radius:6px;z-index:6;line-height:1.5;margin:0;pointer-events:none}
}

@media(max-width:820px){.tilt-test .tilt-controls details{display:block;position:absolute;top:270px;left:0;right:0;background:#111820;padding:12px;pointer-events:auto}.tilt-test #beard-demo{width:100%;min-height:44px}}