:root{font-family:Poppins,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000;background-color:#dedede;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#000;text-decoration:inherit}a:hover{color:#000}body{margin:0;display:flex;place-items:center;min-width:100vw;min-height:100vh}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1{font-size:3.2em;line-height:1.1}button{border-radius:0;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{font-family:Poppins,sans-serif;font-weight:700;background-color:#ccc}}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-300.woff2) format("woff2");font-weight:300;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-300italic.woff2) format("woff2");font-weight:300;font-style:italic}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-regular.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-500.woff2) format("woff2");font-weight:500;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-500italic.woff2) format("woff2");font-weight:500;font-style:italic}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-600.woff2) format("woff2");font-weight:600;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-600italic.woff2) format("woff2");font-weight:600;font-style:italic}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-700.woff2) format("woff2");font-weight:700;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-700italic.woff2) format("woff2");font-weight:700;font-style:italic}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-800.woff2) format("woff2");font-weight:800;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-800italic.woff2) format("woff2");font-weight:800;font-style:italic}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-900.woff2) format("woff2");font-weight:900;font-style:normal}@font-face{font-family:Poppins;src:url(../fonts/poppins-v21-latin-900italic.woff2) format("woff2");font-weight:900;font-style:italic}.language-button{text-decoration:none}.language-button:not([disabled]):hover{text-decoration:underline}.language-button:focus{outline:none}@media (max-width: 768px){button{font-size:15px;padding:8px 16px}.language-button{font-size:15px!important;padding:8px 16px!important}}@media (max-width: 768px){.changes-counter{font-size:15px!important;padding:8px 16px!important}}@media (max-width: 320px){button,.language-button{font-size:13px!important;padding:8px 16px!important}}@media (max-width: 320px){.changes-counter{font-size:13px!important;padding:8px 16px!important}}.app-container{position:relative;display:flex;flex-direction:column;width:100vw;height:100vh;background-color:#ccc}.canvas-container{flex-grow:1;position:relative;min-height:auto}@media (min-width: 769px){.ui-container{padding:15px;display:flex;flex-direction:column;gap:35px;background-color:#ccc;width:100%;box-sizing:border-box;position:sticky;bottom:0;z-index:50}}@media (max-width: 768px){.ui-container{padding:15px;display:flex;flex-direction:column;gap:30px;background-color:#ccc;width:100%;box-sizing:border-box;position:sticky;bottom:0;z-index:50}}.input-container{display:flex;justify-content:center;gap:1vw}.controls-container{display:flex;flex-direction:column;gap:10px;margin:0 auto;width:100%}.controls-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.controls-top-row{justify-content:flex-start}.controls-bottom-row{justify-content:flex-end}@media (max-width: 768px){.virtual-keyboard.mobile{position:fixed;bottom:0;left:0;right:0;width:100%;background-color:#e0e0e0;display:flex;flex-wrap:wrap;justify-content:center;gap:4.5px;padding:5px 0;box-shadow:0 -2px 10px #0000001a;z-index:1000}.keyboard-button{flex-grow:0;flex-shrink:0;width:calc(100% / 11 - 5px);font-family:Poppins,sans-serif;font-size:4vmin;font-weight:500;color:#000;background-color:#f0f0f0;border:.1em solid #6e6e6e;border-radius:0;padding:1vmin;cursor:pointer;transition:background-color .1s ease}.empty-key{visibility:hidden;width:calc(100% / 11 - 5px)}.keyboard-button:active{background-color:#d0d0d0}.keyboard-button.send-button{background-color:#98fb98;color:#008b00;border:.1em solid #008b00;font-weight:700;width:calc(100% / 11 * 3 - 5px)}}.virtual-keyboard.tablet{margin-top:10px;position:relative;width:100%;background-color:#e0e0e0;display:flex;flex-wrap:wrap;justify-content:center;gap:4.5px;padding:5px 0;box-shadow:0 -2px 10px #0000001a;z-index:1000}@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait){.keyboard-button{flex-grow:0;flex-shrink:0;width:calc(100% / 11 - 5px);font-family:Poppins,sans-serif;font-size:2.2vmin;font-weight:500;color:#000;background-color:#f0f0f0;border:.1em solid #6e6e6e;border-radius:0;padding:.5vmin;cursor:pointer;transition:background-color .1s ease}}.keyboard-button.tablet{flex-grow:0;flex-shrink:0;width:calc(100% / 11 - 5px);font-family:Poppins,sans-serif;font-size:2vmin;font-weight:500;color:#000;background-color:#f0f0f0;border:.1em solid #6e6e6e;border-radius:0;padding:1vmin;cursor:pointer;transition:background-color .1s ease}.empty-key{visibility:hidden;width:calc(100% / 11 - 5px)}.keyboard-button.tablet:active{background-color:#d0d0d0}.keyboard-button.tablet.send-button{background-color:#98fb98;color:#008b00;border:.1em solid #008b00;font-weight:700;width:calc(100% / 11 * 3 - 5px)}.input-field{appearance:none;-webkit-appearance:none;-webkit-text-size-adjust:none;font-family:Poppins,sans-serif;color:#000;font-weight:500;width:29px;height:34px;font-size:2.7vmin;text-align:center;text-transform:uppercase;background-color:#f0f0f0;box-sizing:border-box;padding:1px 0 0;display:flex;justify-content:center;align-items:center;border-radius:0;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:inset;border-right-style:inset;border-bottom-style:inset;border-left-style:inset;border-top-color:gray;border-right-color:#dedede;border-bottom-color:#dedede;border-left-color:gray}.input-field.is-active{outline:2px solid #007bff;border-color:#007bff;background-color:#f0f8ff}.color-bar{width:2vmin;height:2vmin;margin:5px auto 0;border:1px solid #000}@media (max-width: 768px){.input-container{gap:1.2vw}.input-field{appearance:none;-webkit-appearance:none;-webkit-text-size-adjust:none;font-family:Poppins,sans-serif;color:#000;font-weight:500;width:9.1vmin;height:11vmin;font-size:6vmin;line-height:normal;text-align:center;text-transform:uppercase;background-color:#f0f0f0;border-radius:0;box-sizing:border-box;padding:0;display:flex;justify-content:center;align-items:center;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-top-style:inset;border-right-style:inset;border-bottom-style:inset;border-left-style:inset;border-top-color:gray;border-right-color:#dedede;border-bottom-color:#dedede;border-left-color:gray}.color-bar{width:4.1vmin;height:4.1vmin}}@media (min-width: 769px){.main-layout{display:flex;flex-direction:row;width:100vw;height:100vh}.app-container{flex:1;display:flex;flex-direction:column;min-width:0}.side-controls-container{flex-shrink:1;flex-grow:0;flex-basis:380px;min-width:380px;max-width:30vw;background-color:#ccc;padding-top:150px;padding-left:0;border-left:20px solid #ffffff;box-sizing:border-box;display:flex;flex-direction:column;gap:15px;justify-content:flex-start;align-items:flex-start;font-family:Poppins,sans-serif}.ui-container .controls-container{display:none}}@media (max-width: 768px){.side-controls-container{display:none}}.input-container.mobile-only{display:flex}.input-container.desktop-only{display:none}@media (min-width: 769px){.input-container.mobile-only{display:none}.input-container.desktop-only{display:flex;justify-content:center;gap:.4vw;margin-top:20px;padding-left:20px}}.pfeile{position:absolute;inset:0;margin:auto;width:140px;height:140px;pointer-events:none}
