*,body,html{padding:0;margin:0}body,html{display:flex;height:100vh;width:100vw}body{font-family:Fira Code,monospace;font-optical-sizing:auto;font-weight:400;font-style:normal}#root{display:flex;flex-grow:1}@view-transition{navigation:auto}::view-transition{pointer-events:none}@layer view-transitions.no-root{:root{view-transition-name:none}::view-transition{pointer-events:none}}:root[data-page-transition=slide-up]::view-transition-old(page){animation-name:slide-up-old;z-index:1;animation-duration:.2s}:root[data-page-transition=slide-up]::view-transition-new(page){animation-name:slide-up-new;animation-timing-function:ease-out;z-index:2;animation-duration:.2s}@keyframes slide-up-old{0%{opacity:1}to{opacity:.95}}@keyframes slide-up-new{0%{transform:translateY(100%)}to{transform:translateY(0)}}:root[data-page-transition=slide-down]::view-transition-old(page){animation-name:slide-down-old;animation-timing-function:ease-in;z-index:2;pointer-events:none;animation-duration:.2s}:root[data-page-transition=slide-down]::view-transition-new(page){animation-name:slide-down-new;z-index:1;pointer-events:none;animation-duration:.2s}@keyframes slide-down-old{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slide-down-new{0%{opacity:.95}to{opacity:1}}:root[data-page-transition=front-to-back]::view-transition-old(page){animation-name:front-to-back-old;animation-timing-function:ease-in;animation-duration:.3s}:root[data-page-transition=front-to-back]::view-transition-new(page){animation-name:front-to-back-new;animation-timing-function:ease-out;animation-duration:.3s}@keyframes front-to-back-old{0%{z-index:2;transform:translate(0);opacity:1}50%{z-index:2;transform:translate(100%);opacity:1}51%{z-index:1;transform:translate(100%);opacity:1}to{z-index:1;transform:translate(0);opacity:.5}}@keyframes front-to-back-new{0%{z-index:1;opacity:.95}50%{z-index:1;opacity:1}51%{z-index:2;opacity:1}to{z-index:2;opacity:1}}body{background-color:#fff;color:#000}body.dark{background-color:#000;color:#e8e8e8}