*{margin:0;padding:0;box-sizing:border-box}.app{background-color:gray;height:100vh;width:100vw}:root{--background: linear-gradient(to right, #8b5cf6, #ec4899);--foreground: linear-gradient(to right, #58d406, #93fdf1);--divider: #dcdcdc;--homePage: linear-gradient(to right, #06b6d4, #93c5fd)}@media (prefers-color-scheme: dark){:root{--background: linear-gradient(to right, #5cf6f6, #ec8148);--foreground: linear-gradient(to right, #06b6d4, #93c5fd);--divider: #333}}body{overflow:hidden;line-height:1.5}button,input,textarea,[contenteditable=true]{box-sizing:border-box;padding:1rem;border-radius:1rem;border:.0625rem solid var(--divider);font-family:inherit;font-size:1rem;background:var(--background);color:var(--foreground)}textarea{resize:none}button{cursor:pointer;background:transparent;color:#fff}.childContainer{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2;visibility:visible;transition:opacity .5s,visibility .5s}.childContainer[aria-hidden=true]{opacity:0;visibility:hidden;pointer-events:none}.homePage{position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;background:var(--homePage);opacity:.5;color:#fff}.contents{display:flex;flex-direction:column;border-radius:1rem 1rem 0 0;background:var(--background);overflow-y:hidden;--default-transitions: transform .5s, border-radius .5s;transition:var(--default-transitions);transform:translateY(0);width:80vw;max-height:100vh;height:30vh;box-sizing:border-box}.contents:not(.notSelectable){transition:var(--default-transitions),height .5s}.contents.fullscreen{border-radius:5px}.childContainer[aria-hidden=true] .contents{transform:translateY(100%)}.controls{display:flex}.dragArea{width:3rem;margin:auto;padding:1rem 0rem;cursor:grab}.dragThumb{width:inherit;height:.25rem;background:var(--divider);border-radius:.125rem}.closeContainer{border:none;padding:.9rem;font-size:20px}.body{flex-grow:1;height:100%;display:flex;flex-direction:column;overflow-y:auto;gap:1rem;padding:1rem;box-sizing:border-box}.displayMessage{color:#fff;text-align:center;font-size:20px}@media only screen and (max-width: 900px){.contents{min-width:250px;max-width:900px;width:100vw}}