.training-mode-modal{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s}.training-mode-modal.active{opacity:1;visibility:visible}.modal-container{position:relative;width:90%;max-width:500px;background:#fff;border-radius:24px;padding:48px 40px 40px;box-shadow:0 20px 60px rgba(0,0,0,.1);transform:scale(.95);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.training-mode-modal.active .modal-container{transform:scale(1);opacity:1;transition-delay:50ms}.close-button{position:absolute;top:20px;right:20px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;cursor:pointer;color:#666;transition:all .2s ease}.close-button:hover{background:#f5f5f7;color:#2d2d2d}.close-button:active{transform:scale(.95)}.modal-header{text-align:center;margin-bottom:40px}.modal-title{font-size:26px;font-weight:600;color:#2d2d2d;margin:0;letter-spacing:-.02em}.mode-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mode-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px 20px;background:#fff;border:2px solid #f5f5f7;border-radius:16px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.mode-card:hover:not(:disabled){background:#fff;border-color:#9333ea;transform:translateY(-2px)}.mode-card:active:not(:disabled){transform:translateY(0)}.mode-card:disabled{opacity:.6;cursor:not-allowed}.mode-icon{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:#f5f5f7;border-radius:16px;transition:all .25s ease}.mode-card:hover .mode-icon{background:#fff}.paper-svg{z-index:1}.paper-svg,.pen-svg{position:absolute;width:48px;height:48px}.pen-svg{z-index:2;transform-origin:16px 48px;transition:transform 2s ease-in-out}.mode-card-dictation:hover .pen-svg{animation:writingMotion 2s ease-in-out infinite}@keyframes writingMotion{0%,to{transform:translate(0) rotate(-15deg)}20%{transform:translate(-4px,-6px) rotate(-25deg)}40%{transform:translate(8px,-2px) rotate(-5deg)}60%{transform:translate(-2px,2px) rotate(-20deg)}80%{transform:translate(6px,-8px) rotate(-10deg)}}.headphones-svg{width:56px;height:56px}.mode-card-shadowing:hover .headphones-svg{animation:pulsingAura 2s ease-in-out infinite}@keyframes pulsingAura{0%,to{filter:drop-shadow(0 0 0 rgba(147,51,234,0));transform:scale(1)}50%{filter:drop-shadow(0 0 8px rgba(147,51,234,.4));transform:scale(1.05)}}.mode-card-shadowing:hover{box-shadow:0 0 20px 5px rgba(147,51,234,.3)}.mode-content{text-align:center}.mode-label{font-size:18px;font-weight:600;color:#2d2d2d;margin:0 0 4px;letter-spacing:-.01em}.mode-hint{font-size:13px;color:#666;margin:0}@media (max-width:640px){.modal-container{padding:40px 24px 32px;border-radius:20px}.modal-title{font-size:22px}.mode-options{grid-template-columns:1fr;gap:12px}.mode-card{flex-direction:row;padding:20px;gap:16px}.mode-icon{width:64px;height:64px}.paper-svg,.pen-svg{width:40px;height:40px}.headphones-svg{width:48px;height:48px}}