:root{--body-bg: #000;--body-color: rgba(255, 255, 255, .87);--body-font-family: sans-serif;--body-font-weight: 400;--body-font-size: 1rem;--body-line-height: 1.5;--accent-color: #646cff;--btn-bg: rgba(26, 26, 26, .1);--btn-bg-hover: rgba(100, 108, 255, .5);--btn-color: var(--body-color)}*,*:before,*:after{box-sizing:border-box;margin:0;min-width:0;font:inherit}html{line-height:var(--body-line-height);-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:var(--body-font-family);overflow-x:hidden;overflow-y:scroll;overscroll-behavior:none;height:100%;min-height:100dvh;accent-color:var(--accent-color, currentColor);background-color:var(--body-bg)}body{margin:0;line-height:inherit;font-size:var(--body-font-size);font-weight:var(--body-font-weight);background-color:var(--body-bg);color:var(--body-color);overscroll-behavior:none;min-height:100dvh;display:flex;flex-direction:column}header,footer{position:relative;flex-grow:0;text-align:center;padding-block:.5rem;mix-blend-mode:difference}header{font-weight:600;font-variant:small-caps;font-size:1.25rem}footer{font-size:.8rem}main{position:relative;flex-grow:1;display:grid;width:100%;gap:.25rem;padding:.25rem;grid-template-columns:repeat(3,1fr)}button{border:1px solid transparent;padding:.5em;font-size:1.25rem;font-weight:600;font-family:inherit;background-color:var(--btn-bg);cursor:pointer;color:var(--btn-color);transition:background-color .3s,mix-blend-mode .3s allow-discrete;-webkit-user-select:none;user-select:none;text-wrap:balanced;border-radius:1px;mix-blend-mode:difference}@media ((hover: hover) and (pointer: fine)){button:hover{background-color:var(--btn-bg-hover);mix-blend-mode:normal}button:focus{webkit-tap-highlight-color:rgba(0,0,0,0)!important;mix-blend-mode:normal}button:focus-visible{background-color:var(--btn-bg-hover);mix-blend-mode:normal}}button[data-touching]{background-color:var(--btn-bg-hover);mix-blend-mode:normal}button.current{background-color:var(--accent-color);mix-blend-mode:normal}#visualizer{position:absolute;display:block;width:100%;height:100%}#pwa-toast{visibility:hidden;position:fixed;right:0;bottom:0;margin:16px;padding:12px;border:1px solid #8885;border-radius:4px;z-index:1;text-align:left;display:grid;background-color:#242424}#pwa-toast .message{margin-bottom:8px}#pwa-toast .buttons{display:flex}#pwa-toast button{border:1px solid #8885;outline:none;margin-right:5px;border-radius:2px;padding:3px 10px}#pwa-toast.show{visibility:visible}button#pwa-refresh{display:none}#pwa-toast.show.refresh button#pwa-refresh{display:block}@media (orientation: landscape){body{flex-direction:row}header,footer{position:relative;width:calc(1lh + 1rem);padding-block:0;padding-inline:.5rem;overflow:hidden}header h1,header p,footer h1,footer p{position:absolute;width:100dvh;height:1lh;top:0;left:.5rem}header h1{transform-origin:top right;translate:-100% 0;rotate:-90deg}footer p{transform-origin:bottom left;translate:0 -100%;rotate:90deg}main{grid-template-columns:repeat(4,1fr)}}