body{flex-direction:column;align-items:center}.controls,.key,.left-buttons,.right-buttons,body{display:flex;display:flex}@font-face{font-family:IRNazanin;src:url("fonts/IRNazanin.ttf") format("truetype");font-weight:400;font-style:normal}@font-face{font-family:IRNazanin;src:url("fonts/IRNazaninBold.ttf") format("truetype");font-weight:700;font-style:normal}@font-face{font-family:IRNazanin;src:url("fonts/IRNazaninIranic.ttf") format("truetype");font-weight:400;font-style:italic}.key,.key-options div,.notification,.text-overlay,.textarea-wrapper textarea{font-family:IRNazanin,sans-serif}.key,body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.key-row{gap:0!important}.key{flex:1;padding:.4rem 0!important;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:1}.keyboard,.left-buttons,.right-buttons{gap:.4rem}textarea::placeholder{color:#888;opacity:1;font-size:1.3rem;text-shadow:none}@media (max-width:600px){body{padding:.5rem}.textarea-wrapper textarea{font-size:1.4rem}.key,.key-options div{font-size:1.45rem}.key{padding:.4rem 0}}.controls{justify-content:space-between;align-items:center}.key,.textarea-wrapper textarea{user-select:none;font-size:1.65rem}.textarea-wrapper textarea{resize:none;box-sizing:border-box;caret-color:auto;pointer-events:auto;user-select:text;direction:rtl;padding:.5rem .5rem 2.5rem;border:1px solid #ccc;border-radius:8px;font-weight:400;height:150px;background:#fff;color:inherit;position:relative;z-index:1}.key{flex:1;user-select:none;flex-direction:column;align-items:center;justify-content:center}@media (max-width:600px){body{padding:.5rem}.textarea-wrapper textarea{font-size:1.4rem}.key{font-size:1.2rem;padding:.5rem 0}.key-options div{font-size:1.1rem}}.notification.show{transform:translate(0,-50%)}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:manipulation}.text-overlay,.textarea-wrapper textarea{width:100%;direction:rtl;user-select:text}body,html{overflow:hidden;margin:0;padding:0;height:100%}body{font-family:'IRNazanin';padding:1rem;background:#f2f2f2;align-items:center;height:100vh}.textarea-wrapper{position:relative;width:100%;max-width:500px;margin-bottom:1rem}.key-options div,.text-overlay{padding:.5rem}.text-overlay{position:absolute;top:0;right:0;font-size:1.4rem;white-space:pre-wrap;word-wrap:break-word;pointer-events:none;color:#111;text-shadow:0 0 1px rgba(255,255,255,.8);height:100%;border-radius:8px;overflow-y:auto;z-index:2;line-height:1.3em;visibility: hidden;}.key,.keyboard{user-select:none}.cursor{display:inline-block;width:1px;background:#000;animation:1s step-end infinite blink;vertical-align:bottom;height:1.3em}#preloader,.key{background:#fff}.key,.key-row,.keyboard{display:flex}@keyframes blink{0%,50%{opacity:1}100%,50.01%{opacity:0}}.keyboard{flex-direction:column;width:100%;max-width:500px;flex-grow:0;justify-content:flex-end}.key-row{gap:.3rem}.key{position:relative;flex:1;border:1px solid #bbb;border-radius:12px;box-shadow:0 2px 5px rgba(0,0,0,.07);color:#222;cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .1s;-webkit-tap-highlight-color:transparent;flex-direction:column;align-items:center;justify-content:center;gap:.1rem}.key.active{z-index:10;background-color:#e6f0fa;border-color:#5a9bf6;box-shadow:0 4px 8px rgba(90,155,246,.5);transform:scale(1.1);color:#005bb5}.key span.secondary{font-size:.85rem;color:#666;opacity:.8;order:-1}.key-options{display:none;position:absolute;bottom:110%;right:0;background:#fafafa;border:1px solid #89b;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.1);z-index:10;min-width:40px}.key-options div{font-size:1.4rem;text-align:center;cursor:default;padding:.5rem .4rem;line-height:1.2}.key-options div:hover{background-color:#dce9fc;color:#005bb5;border-radius:12px}.key.show-options .key-options{display:block}body.keyboard-disabled .key:not(.show-options){opacity:.5;pointer-events:none;filter:grayscale(20%)}@media (max-width:600px){body{padding:.5rem}.textarea-wrapper textarea{font-size:1.4rem}.key,.key-options div{font-size:1.45rem}.key{padding:.4.5rem 0}}.controls{position:absolute;bottom:.6rem;left:.7rem;right:.7rem;display:flex;justify-content:space-between;align-items:center;gap:.4rem;z-index:3}.floating-heart,.notification{position:fixed;pointer-events:none;z-index:9999}.controls button{background:#fff;border:1px solid #ccc;border-radius:6px;font-size:1.2rem;padding:.5rem .4rem;min-width:36px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1);transition:background .2s}.controls button:hover{background:#f0f0f0}.controls button span{pointer-events:none}.logo-img{height:28px;pointer-events:none}.floating-heart{font-size:24px;animation:2s ease-out forwards fly}@keyframes fly{0%{transform:scale(1) translateY(0);opacity:1}100%{transform:scale(1.5) translateY(-100px);opacity:0}}.notification{transform:translate(-100%,-50%);top:1rem;left:1rem;transform:translateX(-120%);background-color:#a8d5a3;color:#2f4f2f;padding:.7rem 1.2rem;border-radius:6px;font-size:1.1rem;box-shadow:0 4px 12px rgba(0,0,0,.2);opacity:0;transition:opacity .4s,transform .4s}.notification.show{opacity:1;transform:translateX(0)}.key-options div.active{box-shadow:0 2px 6px rgba(90,155,246,.4);background-color:#dce9fc;color:#005bb5;transform:scale(1.05);border-radius:12px;border:1px solid #89b}.dark body{background-color:#222;color:#eee}.dark .textarea-wrapper textarea{background:#333;color:#ffffff;caret-color:transparent;border-color:#555}.dark .text-overlay{color:#eee;text-shadow:none}.dark .controls button,.dark .key{background:#444;border-color:#666;color:#ddd}.dark .key.active{background-color:#8af;border-color:#89b;color:#fff}.dark .key-options{background:#333;border-color:#777}.dark .key-options div:hover{background-color:#555;color:#aaf;border-radius:12px}.dark .key-options div.active{background-color:#8af;color:#000;box-shadow:0 2px 6px rgba(255,255,255,.4);transform:scale(1.05);border-radius:12px}.dark .notification{background-color:#445;color:#ccf}.dark .key span.secondary{color:#ddd;opacity:1}html{transition:background-color .3s,color .3s}#preloader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:99999;transition:opacity .5s}#preloader .preloader-logo{height:80px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}}.dark #preloader{background:#222}@media screen and (orientation:landscape) and (max-height:500px){body,body::before{background:#fff}body{display:flex;justify-content:center;align-items:center;padding:2rem;font-family:IRNazanin,sans-serif}.controls,.keyboard,.textarea-wrapper{display:none!important}body::before{content:"لطفاً گوشی را در حالت عمودی نگه دارید 📱";color:#856404;padding:1.5rem;border:5px solid #ffeeba;border-radius:8px;font-size:1.3rem;text-align:center}} button#themeToggleBtn {display: none;}
.key span.secondary {
    font-size: .94rem;
    opacity: .8;
    order: -1;
}
.key, .textarea-wrapper {
    font-size: 1.66rem;
}
.text-overlay, .textarea-wrapper textarea {
    outline: none;
}
.textarea-wrapper {
    margin-bottom: .5rem;
}
@media (min-width: 769px) {
.controls {
    bottom: 1.2rem;
        left: .4rem;
    right: .4rem;
}
}
@media (max-width: 768px) {
.controls {
    bottom: 1.2rem;
    left: .4rem;
    right: .4rem;
}
}

.key {
    transition: background-color 0.03s, box-shadow 0.03s, transform 0.03s;
}