*{margin:0;padding:0}html,body,#root{height:100vh;width:100vw;background-color:var(--background);color:var(--foreground);overflow:hidden;position:fixed;--foreground: #f8e0eb;--background: #12040a;--primary: #d7a2bc;--accent: #ccb958;--surface: #ffffff12;--danger: #c25353;--key: var(--background)}#app{overflow:hidden;display:grid;grid-template-columns:35% 30% 35%;grid-template-rows:1fr auto;width:100%;height:100%}.status{grid-column:span 3 / span 3}.button{display:inline-block;background-color:var(--primary);color:var(--background);border:none;padding:.8rem 2rem;border-radius:.5rem;cursor:pointer;font-weight:700}.button-danger{background-color:var(--danger);color:var(--foreground)}#status{grid-column:span 3 / span 3}.keyboard-section{display:grid;gap:8px;padding:5px;grid-template-columns:repeat(5,1fr);grid-auto-flow:dense;background-color:var(--surface)}#content{padding:5px;flex-grow:0;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--primary) var(--background)}#content p{text-wrap:initial;word-wrap:break-word;white-space:pre-wrap}#status p{padding:5px;font-family:monospace}.key{border:none;border-radius:10px;background-color:var(--key);color:var(--foreground);font-weight:700;font-size:20px}.key:not(.key-blank):active{transition:.2s;opacity:.8}.key-blank{background-color:transparent;padding:0;font-weight:100;opacity:0}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.scrollable-container{height:100vh;overflow-y:scroll}.scrollable-content{display:flex;flex-direction:column;margin:1rem;gap:.5rem}.input-group{display:flex;flex-direction:column;gap:10px}.input-label{font-weight:700}.input-control{background-color:var(--background);color:var(--foreground);border-style:solid;border-width:1px;padding:10px;border-radius:.5rem}textarea{min-height:200px}.row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}.end{justify-content:flex-end}.landscape-always{--width: 100vw;--height: 100vh;width:var(--width);height:var(--height)}ul,ol{padding-left:1.5rem}.faq section{margin-bottom:1rem}.warning{background-color:var(--accent);color:var(--background);padding:1rem;border-radius:1rem}@media only screen and (orientation: portrait){.landscape-always{transform:rotate(-90deg) translate(-100vh);transform-origin:left top;--width: 100vh;--height: 100vw;overflow:hidden}}