body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#f0f2f5;overflow:hidden}.app-container{width:100vw;height:100vh;display:flex;flex-direction:column}main{flex-grow:1;display:flex;justify-content:center;align-items:center;position:relative;width:100%;height:100vh}.home-page{width:100%;height:100%;padding:20px;box-sizing:border-box;text-align:center;overflow-y:auto;background-color:#fff}.home-page h1{color:#333}.letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:15px;max-width:800px;margin:20px auto}.letter-card{display:flex;justify-content:center;align-items:center;height:80px;background-color:#fff;border-radius:8px;box-shadow:0 2px 5px #0000001a;font-size:36px;font-weight:700;color:#007bff;text-decoration:none;transition:transform .2s,box-shadow .2s}.letter-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px #00000026}.ar-ui-top-left{position:absolute;top:20px;left:20px;z-index:10}.ar-ui-top-right{position:absolute;top:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:10}.ar-ui-top-right1{position:absolute;bottom:60px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:10}.ar-nav-button{padding:8px 16px;font-size:16px;border-radius:6px;border:1px solid white;background-color:#0006;color:#fff;cursor:pointer;text-align:center}.top-ui-container{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;z-index:10}.nav-button{padding:8px 16px;font-size:16px;border-radius:6px;border:1px solid #ccc;background-color:#fff;cursor:pointer}.canvas-container{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.letter-indicator,.help-button,.restart-button,.next-button,.feedback-display,.language-button{position:absolute;z-index:10}.letter-indicator{top:80px;left:50%;transform:translate(-50%);font-size:36px;font-weight:700;background-color:#ffffffb3;padding:5px 20px;border-radius:8px}.next-button{bottom:20px;left:50%;transform:translate(-50%);background-color:#ff9800;padding:10px 20px;font-size:18px;border:none;border-radius:5px;color:#fff;cursor:pointer;touch-action:auto}.next-button:hover{background-color:#f57c00}.help-button,.restart-button{width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 2px 5px #0000004d;cursor:pointer;touch-action:auto}.help-button{bottom:60px;left:20px;background-color:#2196f3}.help-button:hover{background-color:#1976d2}.restart-button{bottom:60px;right:20px;background-color:#ff6b6b}.restart-button:hover{background-color:#ff5252}.feedback-display{bottom:50px;left:50%;transform:translate(-50%);font-size:16px;font-weight:700;color:#000;background-color:#fffc;padding:8px 15px;border-radius:20px}.icon{width:30px;height:30px;background-color:#fff;mask-size:contain;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.help-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92c-.5.51-.86.97-1.04 1.69-.08.32-.13.68-.13 1.14h-2v-.5c0-.46.08-.9.22-1.31.2-.58.53-1.1.95-1.52l1.24-1.26c.46-.44.68-1.1.55-1.8-.13-.72-.69-1.33-1.39-1.53-1.11-.31-2.14.32-2.47 1.27-.12.37-.43.65-.82.65h-.3c-.38 0-.70-.28-.83-.65-.33-.97-.15-2.16.63-2.88 1.08-1.01 2.82-1.02 3.91-.03 1.13 1.03 1.36 2.63.61 3.95z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92c-.5.51-.86.97-1.04 1.69-.08.32-.13.68-.13 1.14h-2v-.5c0-.46.08-.9.22-1.31.2-.58.53-1.1.95-1.52l1.24-1.26c.46-.44.68-1.1.55-1.8-.13-.72-.69-1.33-1.39-1.53-1.11-.31-2.14.32-2.47 1.27-.12.37-.43.65-.82.65h-.3c-.38 0-.70-.28-.83-.65-.33-.97-.15-2.16.63-2.88 1.08-1.01 2.82-1.02 3.91-.03 1.13 1.03 1.36 2.63.61 3.95z'/%3E%3C/svg%3E")}.restart-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E")}.language-button{padding:8px 16px;font-size:16px;border-radius:6px;border:1px solid #ccc;background-color:#fff;cursor:pointer;box-shadow:0 1px 3px #0000001a}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:20px;border-radius:8px;width:90%;max-width:400px;max-height:80vh;display:flex;flex-direction:column}.modal-content h2{margin-top:0;text-align:center}.language-list-modal{list-style:none;padding:0;margin:0;overflow-y:auto;flex-grow:1}.language-list-modal li{padding:15px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s}.language-list-modal li:hover{background-color:#f0f0f0}.language-list-modal li.active{background-color:#007bff;color:#fff;font-weight:700}.close-modal-button{margin-top:20px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:5px;cursor:pointer}.admin-page{width:100%;max-width:800px;height:100%;padding:20px;box-sizing:border-box;overflow-y:auto;background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a}.admin-page h2{margin-top:0;color:#333;border-bottom:2px solid #eee;padding-bottom:10px}.admin-button{padding:8px 16px;border:none;border-radius:5px;cursor:pointer;text-decoration:none;font-size:14px;font-weight:500;transition:background-color .2s ease}.admin-button.add-new{background-color:#28a745;color:#fff;display:inline-block;margin-bottom:20px}.admin-button.add-new:hover{background-color:#218838}.admin-button.delete{background-color:#dc3545;color:#fff}.admin-button.delete:hover{background-color:#c82333}.letter-list{list-style:none;padding:0;margin:0}.letter-list li{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid #eee}.letter-list li:last-child{border-bottom:none}.letter-list .actions{display:flex;gap:10px}.settings-panel{position:absolute;top:20px;right:20px;background-color:#ffffffe6;padding:15px;border-radius:8px;box-shadow:0 4px 12px #0003;z-index:20;display:flex;flex-direction:column;gap:10px;width:280px}.settings-panel h3{margin-top:0;font-size:18px}.settings-panel button{padding:10px;font-size:16px;cursor:pointer;background-color:#007bff;color:#fff;border:none;border-radius:5px}.settings-panel button:hover{background-color:#0056b3}.path-editor{margin-top:10px;padding-top:10px;border-top:1px solid #ccc}.path-editor label{display:block;margin-bottom:5px;font-weight:500}.path-editor textarea{width:100%;min-height:100px;font-family:monospace;font-size:12px;padding:8px;box-sizing:border-box;border:1px solid #ccc;border-radius:4px}.letter-key-input{width:100%;padding:10px;font-size:16px;margin-bottom:15px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box}.settings-panel .copy-button{margin-top:5px;background-color:#17a2b8}.settings-panel .copy-button:hover{background-color:#138496}.points-output{background-color:#e9ecef;color:#495057}.video-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1030}.video-container{position:relative;width:90%;height:90%;max-width:405px;max-height:720px;display:flex;justify-content:center;align-items:center}.help-video{width:100%;height:100%;object-fit:contain}.close-video-button{position:absolute;top:10px;right:10px;width:40px;height:40px;background-color:#ff5252;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:35;touch-action:auto}.close-video-button:hover{background-color:#d32f2f}.close-video-icon{width:24px;height:24px;background-color:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat 50% 50%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat 50% 50%}