:root{--app--font-family: Monaco, Inconsolata, monospace;--app--font-size: .85rem;--app--gui-margin: 16px;--app-control-height: 32px}body,html{margin:0;background-color:#333;color:#fff;font-family:var(--app--font-family)}body{display:flex;flex-direction:column;justify-content:center;height:101vh}body.gui-faded:has(.lil-gui.root>button.title:not([aria-expanded=true])){cursor:none}body.gui-faded:has(.lil-gui.root>button.title:not([aria-expanded=true])) .lil-gui.root,body.gui-faded:has(.lil-gui.root>button.title:not([aria-expanded=true])) #viewing-tips-link,body.gui-faded:has(.lil-gui.root>button.title:not([aria-expanded=true])) #magic-eye-anything-link{transition:opacity 1s;opacity:0}#messages{position:fixed;top:0;left:0;right:0;bottom:0;align-items:center;place-content:center;margin:auto;padding:2ch;max-width:80ch;flex-grow:1}#messages:not([hidden]){display:flex}#messages p{text-shadow:0 0 10px rgba(0,0,0,1);padding:1ch;border-radius:5px}#title{margin:0;position:absolute;top:1ch}p{margin:0}a{color:#6495ed;text-decoration:none}#viewing-tips-link,#magic-eye-anything-link{box-sizing:border-box;height:var(--app-control-height);z-index:1000;background:#000000d9;color:#fff;padding:.8ch 1ch;border-radius:5px;font-size:var(--app--font-size);font-family:var(--app--font-family);text-decoration:none;box-shadow:0 2px var(--app--gui-margin) #00000026;transition:background .2s;align-items:center;justify-content:center}#viewing-tips-link:not([hidden]),#magic-eye-anything-link:not([hidden]){display:flex}#viewing-tips-link:hover,#magic-eye-anything-link:hover{background:#1e1e1ef2}#top-actions{position:fixed;top:var(--app--gui-margin);left:var(--app--gui-margin)}#bottom-actions{position:fixed;bottom:var(--app--gui-margin);left:var(--app--gui-margin)}.lil-gui.root{top:var(--app--gui-margin);right:var(--app--gui-margin);border-radius:5px;overflow:hidden;max-height:calc(100dvh - var(--app--gui-margin) * 2)}.lil-gui.root>button{display:flex;align-items:center;justify-content:center;height:var(--app-control-height);padding:.8ch 1ch}.lil-gui.root,.lil-gui.root *{font-family:var(--app--font-family)!important;font-size:var(--app--font-size)!important;font-weight:400!important;color:#fff!important}.lil-gui.root .controller.boolean{display:grid;grid-auto-flow:column;grid-template-columns:1fr auto;padding:0 10px}canvas{width:100dvw;height:100dvh;object-fit:contain}@media (max-width: 600px){#bottom-actions,#top-actions{display:flex;flex-direction:column;gap:var(--app--gui-margin);padding:var(--app--gui-margin)}#top-actions{position:fixed;top:0;left:0;right:0}#bottom-actions{position:fixed;bottom:0;left:0;right:0}#viewing-tips-link{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none}.lil-gui.root{top:calc(var(--app--gui-margin) * 2 + var(--app-control-height));left:var(--app--gui-margin);width:calc(100vw - var(--app--gui-margin) * 2)}}
