*,:before,:after{box-sizing:border-box}html{height:100vh}body{font-family:system-ui,sans-serif;margin:0;touch-action:none}@keyframes blink{0%{opacity:0}to{opacity:1}}.screen{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:var(--vvh);overflow:auto;overscroll-behavior:contain}.header{background-color:#fff6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding-block-start:env(safe-area-inset-top);padding-inline:20px;position:sticky;top:0;z-index:1}.content{padding-inline:20px}.footer{background-color:#fff;border-block-start:1px solid #ccc;display:flex;gap:10px;left:0;padding-block:10px calc(10px + var(--vvs));padding-inline:20px;position:fixed;top:var(--vvh);transform:translateY(-100%);transition:top .25s ease;touch-action:none;width:100%;will-change:transform}.input{flex-grow:1;touch-action:none}.input:focus{animation:blink .02s}